@tangle-network/ui 11.51.7 → 11.51.9

package/src/primitives/theme-toggle.test.tsx

@@ -1,168 +0,0 @@
-import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
-import { hydrateRoot } from "react-dom/client";
-import { renderToString } from "react-dom/server";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-let ThemeToggle: typeof import("./theme-toggle").ThemeToggle;
-let useTheme: typeof import("./theme-toggle").useTheme;
-let dark = false;
-let listeners: Set<() => void>;
-
-beforeEach(async () => {
-  vi.resetModules();
-  for (const attr of ["class", "data-theme", "data-sandbox-theme"]) document.documentElement.removeAttribute(attr);
-  window.localStorage.clear();
-  dark = false;
-  listeners = new Set();
-  vi.stubGlobal("matchMedia", vi.fn(() => ({
-    get matches() { return dark; },
-    media: "(prefers-color-scheme: dark)",
-    addEventListener: (_: string, handler: () => void) => listeners.add(handler),
-    removeEventListener: (_: string, handler: () => void) => listeners.delete(handler),
-  })));
-  ({ ThemeToggle, useTheme } = await import("./theme-toggle"));
-});
-
-afterEach(() => {
-  cleanup();
-  vi.restoreAllMocks();
-  vi.unstubAllGlobals();
-  for (const attr of ["class", "data-theme", "data-sandbox-theme"]) document.documentElement.removeAttribute(attr);
-});
-
-function systemMode(next: boolean) {
-  act(() => { dark = next; listeners.forEach((notify) => notify()); });
-}
-
-function PreferenceControl() {
-  const { theme, resolvedTheme, setTheme } = useTheme();
-  return <button onClick={() => setTheme("system")}>{theme}:{resolvedTheme}</button>;
-}
-
-describe("root mode preference", () => {
-  it("tracks system changes in the DOM, icon label and click behavior", () => {
-    render(<ThemeToggle />);
-    expect(screen.getByRole("button", { name: "Switch to dark mode" })).toBeTruthy();
-    expect(document.documentElement.classList.contains("light")).toBe(true);
-    systemMode(true);
-    fireEvent.click(screen.getByRole("button", { name: "Switch to light mode" }));
-    expect(window.localStorage.getItem("theme")).toBe("light");
-    expect(document.documentElement.className).toBe("light");
-    systemMode(false); systemMode(true);
-    expect(screen.getByRole("button", { name: "Switch to dark mode" })).toBeTruthy();
-  });
-
-  it("shares explicit choices and a return to system across mounted consumers", () => {
-    window.localStorage.setItem("theme", "dark");
-    render(<><ThemeToggle /><PreferenceControl /></>);
-    fireEvent.click(screen.getByRole("button", { name: "Switch to light mode" }));
-    expect(screen.getByRole("button", { name: "light:light" })).toBeTruthy();
-    fireEvent.click(screen.getByRole("button", { name: "light:light" }));
-    expect(window.localStorage.getItem("theme")).toBeNull();
-    systemMode(true);
-    expect(screen.getByRole("button", { name: "system:dark" })).toBeTruthy();
-  });
-
-  it("remains usable when storage reads, writes and removals throw", () => {
-    for (const method of ["getItem", "setItem", "removeItem"] as const) {
-      vi.spyOn(Storage.prototype, method).mockImplementation(() => { throw new Error("denied"); });
-    }
-    render(<><ThemeToggle /><PreferenceControl /></>);
-    fireEvent.click(screen.getByRole("button", { name: "Switch to dark mode" }));
-    expect(screen.getByRole("button", { name: "dark:dark" })).toBeTruthy();
-    fireEvent.click(screen.getByRole("button", { name: "dark:dark" }));
-    expect(screen.getByRole("button", { name: "system:light" })).toBeTruthy();
-  });
-
-  it("ignores invalid stored values and handles cross-tab preference changes", () => {
-    window.localStorage.setItem("theme", "not-a-theme");
-    render(<ThemeToggle />);
-    expect(document.documentElement.className).toBe("light");
-    act(() => window.dispatchEvent(new StorageEvent("storage", { key: "theme", newValue: "dark" })));
-    expect(screen.getByRole("button", { name: "Switch to light mode" })).toBeTruthy();
-    act(() => window.dispatchEvent(new StorageEvent("storage", { key: "theme", newValue: null })));
-    expect(document.documentElement.className).toBe("light");
-  });
-
-  it.each(["light", "dark"])("honors explicit data-theme=%s and keeps it in sync", (mode) => {
-    document.documentElement.dataset.theme = mode;
-    dark = mode !== "dark";
-    render(<ThemeToggle />);
-    expect(document.documentElement.className).toBe(mode);
-    fireEvent.click(screen.getByRole("button"));
-    expect(document.documentElement.dataset.theme).toBe(mode === "light" ? "dark" : "light");
-  });
-
-  it.each(["light", "dark"])("honors an explicit .%s class without a saved preference", (mode) => {
-    document.documentElement.className = mode;
-    dark = mode !== "dark";
-    render(<ThemeToggle />);
-    expect(document.documentElement.className).toBe(mode);
-  });
-
-  it.each([
-    ["aubergine", "aubergine-light"], ["arena", "arena-light"], ["super", "super-light"], ["tangle-dark", "tangle-light"],
-    ["agents", "agents-light"],
-  ])("keeps the %s named family in both directions", (name, lightName) => {
-    document.documentElement.dataset.theme = name;
-    render(<ThemeToggle />);
-    fireEvent.click(screen.getByRole("button", { name: "Switch to light mode" }));
-    expect(document.documentElement.dataset.theme).toBe(lightName);
-    fireEvent.click(screen.getByRole("button", { name: "Switch to dark mode" }));
-    expect(document.documentElement.dataset.theme).toBe(name);
-  });
-
-  it.each(["intelligence", "custom-product"])("does not overwrite unpaired identity %s", (name) => {
-    document.documentElement.dataset.theme = name;
-    document.documentElement.className = "dark";
-    render(<ThemeToggle />);
-    fireEvent.click(screen.getByRole("button"));
-    expect(document.documentElement.dataset.theme).toBe(name);
-    expect(document.documentElement.className).toBe("light");
-  });
-
-  it.each(["vault", "dawn"])("preserves legacy %s identity while changing mode", (name) => {
-    document.documentElement.dataset.sandboxTheme = name;
-    render(<ThemeToggle />);
-    fireEvent.click(screen.getByRole("button", { name: "Switch to dark mode" }));
-    expect(document.documentElement.dataset.sandboxTheme).toBe(name);
-    expect(document.documentElement.className).toBe("dark");
-  });
-
-  it("uses the dark fallback without matchMedia and cleans subscriptions on unmount", () => {
-    const view = render(<ThemeToggle />);
-    expect(listeners.size).toBe(1);
-    view.unmount();
-    expect(listeners.size).toBe(0);
-    vi.stubGlobal("matchMedia", undefined);
-    render(<ThemeToggle />);
-    expect(screen.getByRole("button", { name: "Switch to light mode" })).toBeTruthy();
-  });
-});
-
-describe("server rendering and hydration", () => {
-  it("renders without window, document, matchMedia or storage", () => {
-    vi.stubGlobal("window", undefined);
-    vi.stubGlobal("document", undefined);
-    expect(renderToString(<ThemeToggle />)).toContain("Switch to light mode");
-    vi.unstubAllGlobals();
-  });
-
-  it("hydrates the server snapshot then resolves saved light without a dark write", async () => {
-    const html = renderToString(<ThemeToggle />);
-    window.localStorage.setItem("theme", "light");
-    document.documentElement.className = "light";
-    const host = document.createElement("div");
-    host.innerHTML = html;
-    document.body.append(host);
-    const recoverable = vi.fn();
-    const toggle = vi.spyOn(document.documentElement.classList, "toggle");
-    let root: ReturnType<typeof hydrateRoot>;
-    await act(async () => { root = hydrateRoot(host, <ThemeToggle />, { onRecoverableError: recoverable }); });
-    expect(host.querySelector("button")?.getAttribute("aria-label")).toBe("Switch to dark mode");
-    expect(recoverable).not.toHaveBeenCalled();
-    expect(toggle).not.toHaveBeenCalledWith("dark", true);
-    await act(async () => root.unmount());
-    host.remove();
-  });
-});

package/src/primitives/toast.test.tsx

@@ -1,130 +0,0 @@
-import { act, cleanup, fireEvent, render, screen, within } from "@testing-library/react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { ToastProvider, useToast } from "./toast";
-
-function ToastTrigger({ title, duration }: { title: string; duration?: number }) {
-  const { toast } = useToast();
-
-  return (
-    <button type="button" onClick={() => toast({ title, duration })}>
-      Show {title}
-    </button>
-  );
-}
-
-beforeEach(() => {
-  vi.useFakeTimers();
-});
-
-afterEach(() => {
-  cleanup();
-  vi.restoreAllMocks();
-  vi.useRealTimers();
-});
-
-describe("ToastProvider auto-dismiss", () => {
-  it("cancels every pending dismissal on unmount without updating after teardown", () => {
-    const view = render(
-      <ToastProvider>
-        <ToastTrigger title="First" duration={1000} />
-        <ToastTrigger title="Second" duration={2000} />
-      </ToastProvider>,
-    );
-    const scheduleTimeout = globalThis.setTimeout;
-    const timeoutFired = vi.fn();
-    // Observe the real dismissal callbacks without mocking the provider or React state.
-    vi.spyOn(globalThis, "setTimeout").mockImplementation((callback, delay, ...args) =>
-      scheduleTimeout(() => {
-        timeoutFired();
-        callback(...args);
-      }, delay),
-    );
-
-    fireEvent.click(screen.getByRole("button", { name: "Show First" }));
-    fireEvent.click(screen.getByRole("button", { name: "Show Second" }));
-    expect(screen.getAllByRole("alert")).toHaveLength(2);
-    expect(vi.getTimerCount()).toBe(2);
-
-    view.unmount();
-    expect(vi.getTimerCount()).toBe(0);
-
-    act(() => {
-      vi.advanceTimersByTime(5000);
-    });
-    // A cancelled callback cannot reach dismiss() or its state update after unmount.
-    expect(timeoutFired).not.toHaveBeenCalled();
-    expect(vi.getTimerCount()).toBe(0);
-  });
-
-  it("keeps a toast until its duration elapses, then removes it", () => {
-    render(
-      <ToastProvider>
-        <ToastTrigger title="Saved" duration={1000} />
-      </ToastProvider>,
-    );
-
-    fireEvent.click(screen.getByRole("button", { name: "Show Saved" }));
-    expect(vi.getTimerCount()).toBe(1);
-
-    act(() => {
-      vi.advanceTimersByTime(999);
-    });
-    expect(screen.getByRole("alert")).toHaveTextContent("Saved");
-
-    act(() => {
-      vi.advanceTimersByTime(1);
-    });
-    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
-    expect(vi.getTimerCount()).toBe(0);
-  });
-
-  it("clears only the manually dismissed toast's timer", () => {
-    render(
-      <ToastProvider>
-        <ToastTrigger title="First" duration={1000} />
-        <ToastTrigger title="Second" duration={2000} />
-      </ToastProvider>,
-    );
-
-    fireEvent.click(screen.getByRole("button", { name: "Show First" }));
-    fireEvent.click(screen.getByRole("button", { name: "Show Second" }));
-    expect(vi.getTimerCount()).toBe(2);
-
-    fireEvent.click(within(screen.getAllByRole("alert")[0]!).getByRole("button", {
-      name: "Dismiss notification",
-    }));
-    expect(screen.queryByText("First")).not.toBeInTheDocument();
-    expect(screen.getByRole("alert")).toHaveTextContent("Second");
-    expect(vi.getTimerCount()).toBe(1);
-
-    act(() => {
-      vi.advanceTimersByTime(1000);
-    });
-    expect(screen.getByRole("alert")).toHaveTextContent("Second");
-
-    act(() => {
-      vi.advanceTimersByTime(1000);
-    });
-    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
-    expect(vi.getTimerCount()).toBe(0);
-  });
-
-  it("schedules no timer when duration is zero", () => {
-    render(
-      <ToastProvider>
-        <ToastTrigger title="Persistent" duration={0} />
-      </ToastProvider>,
-    );
-    const scheduleTimeout = vi.spyOn(globalThis, "setTimeout");
-
-    fireEvent.click(screen.getByRole("button", { name: "Show Persistent" }));
-    expect(scheduleTimeout).not.toHaveBeenCalled();
-    expect(vi.getTimerCount()).toBe(0);
-
-    act(() => {
-      vi.advanceTimersByTime(10000);
-    });
-    expect(screen.getByRole("alert")).toHaveTextContent("Persistent");
-    expect(vi.getTimerCount()).toBe(0);
-  });
-});

package/src/primitives/wizard.test.tsx

@@ -1,106 +0,0 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import * as React from "react";
-import { describe, expect, it, vi } from "vitest";
-import { Wizard } from "./wizard";
-
-function Flow(props: Partial<React.ComponentProps<typeof Wizard>> = {}) {
-  return (
-    <Wizard {...props}>
-      <Wizard.Step title="Number" nextLabel="Continue">pick a number</Wizard.Step>
-      <Wizard.Step title="Verify" nextLabel="I replied">verify panel</Wizard.Step>
-      <Wizard.Step title="Done" nextLabel="Finish">done panel</Wizard.Step>
-    </Wizard>
-  );
-}
-
-describe("Wizard", () => {
-  it("renders the first step and the rail, marks the active step, hides future panels", () => {
-    render(<Flow />);
-    expect(screen.getByText("pick a number")).toBeVisible();
-    expect(screen.queryByText("verify panel")).toBeNull();
-    expect(screen.getByRole("list", { name: "Steps" })).toBeVisible();
-    expect(screen.getAllByText("Number").length).toBeGreaterThan(0);
-  });
-
-  it("advances on the primary action and mirrors onStepChange", async () => {
-    const onStepChange = vi.fn();
-    render(<Flow onStepChange={onStepChange} />);
-    await userEvent.click(screen.getByRole("button", { name: "Continue" }));
-    expect(screen.getByText("verify panel")).toBeVisible();
-    expect(onStepChange).toHaveBeenCalledWith(1);
-  });
-
-  it("back returns to the previous step; the first step has no back", async () => {
-    render(<Flow />);
-    await userEvent.click(screen.getByRole("button", { name: "Continue" }));
-    await userEvent.click(screen.getByRole("button", { name: "Back" }));
-    expect(screen.getByText("pick a number")).toBeVisible();
-    expect(screen.queryByRole("button", { name: "Back" })).toBeNull();
-  });
-
-  it("future steps are not clickable; past steps are", async () => {
-    render(<Flow />);
-    fireEvent.click(screen.getByText("Verify")); // future: a span, not a button
-    expect(screen.getByText("pick a number")).toBeVisible();
-    await userEvent.click(screen.getByRole("button", { name: "Continue" }));
-    await userEvent.click(screen.getAllByRole("button", { name: /Number/ })[0]!); // past: clickable
-    expect(screen.getByText("pick a number")).toBeVisible();
-  });
-
-  it("an async onNext advances only on resolve; returning false keeps the step", async () => {
-    let resolveCheck: (value: unknown) => void = () => {};
-    const onNext = vi.fn(() => new Promise(resolve => { resolveCheck = resolve; }));
-    render(
-      <Wizard>
-        <Wizard.Step title="Check" nextLabel="Check" onNext={onNext}>checking</Wizard.Step>
-        <Wizard.Step title="Next">next panel</Wizard.Step>
-      </Wizard>,
-    );
-    await userEvent.click(screen.getByRole("button", { name: "Check" }));
-    expect(screen.getByText("checking")).toBeVisible(); // still here while pending
-    resolveCheck(true);
-    await waitFor(() => expect(screen.getByText("next panel")).toBeVisible());
-    expect(onNext).toHaveBeenCalledTimes(1);
-  });
-
-  it("a rejected onNext stays on the step without crashing", async () => {
-    const onNext = vi.fn(() => Promise.reject(new Error("no")));
-    render(
-      <Wizard>
-        <Wizard.Step title="Check" nextLabel="Check" onNext={onNext}>checking</Wizard.Step>
-        <Wizard.Step title="Next">next panel</Wizard.Step>
-      </Wizard>,
-    );
-    await userEvent.click(screen.getByRole("button", { name: "Check" }));
-    await waitFor(() => expect(screen.getByRole("button", { name: "Check" })).toBeEnabled());
-    expect(screen.getByText("checking")).toBeVisible();
-  });
-
-  it("the last step fires onFinished instead of advancing", async () => {
-    const onFinished = vi.fn();
-    render(<Flow onFinished={onFinished} defaultStep={2} />);
-    await userEvent.click(screen.getByRole("button", { name: "Finish" }));
-    expect(onFinished).toHaveBeenCalledTimes(1);
-    expect(screen.getByText("done panel")).toBeVisible();
-  });
-
-  it("step can drive externally (controlled) and omit the default footer action", () => {
-    render(
-      <Wizard step={1}>
-        <Wizard.Step title="One">one</Wizard.Step>
-        <Wizard.Step title="Two"><button type="button">custom</button></Wizard.Step>
-      </Wizard>,
-    );
-    expect(screen.getAllByText("Two").length).toBeGreaterThan(0);
-    expect(screen.getByText("custom")).toBeVisible();
-    expect(screen.queryByRole("button", { name: "Continue" })).toBeNull();
-  });
-
-  it("throws when a step is used outside a wizard", () => {
-    // Silence the expected console.error from React's error boundary path.
-    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
-    expect(() => render(<Wizard.Step title="Alone">x</Wizard.Step>)).toThrow(/must be used inside/);
-    spy.mockRestore();
-  });
-});

package/src/run/expandable-content.test.tsx

@@ -1,52 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { ExpandableContent } from "./expandable-content";
-
-describe("ExpandableContent", () => {
-  let scrollHeightSpy: ReturnType<typeof vi.spyOn> | undefined;
-
-  afterEach(() => {
-    scrollHeightSpy?.mockRestore();
-    scrollHeightSpy = undefined;
-  });
-
-  it("renders no toggle when content fits within the cap", () => {
-    render(
-      <ExpandableContent collapsedMaxPx={180}>
-        <div>short</div>
-      </ExpandableContent>,
-    );
-    expect(
-      screen.queryByRole("button", { name: /show more/i }),
-    ).not.toBeInTheDocument();
-  });
-
-  describe("when content overflows", () => {
-    beforeEach(() => {
-      scrollHeightSpy = vi
-        .spyOn(HTMLElement.prototype, "scrollHeight", "get")
-        .mockReturnValue(999);
-    });
-
-    it("clamps with a Show more toggle that expands and collapses", async () => {
-      const user = userEvent.setup();
-      render(
-        <ExpandableContent collapsedMaxPx={180}>
-          <div>tall content</div>
-        </ExpandableContent>,
-      );
-
-      const showMore = screen.getByRole("button", { name: /show more/i });
-      await user.click(showMore);
-      expect(
-        screen.getByRole("button", { name: /show less/i }),
-      ).toBeInTheDocument();
-
-      await user.click(screen.getByRole("button", { name: /show less/i }));
-      expect(
-        screen.getByRole("button", { name: /show more/i }),
-      ).toBeInTheDocument();
-    });
-  });
-});

package/src/utils/format.test.ts

@@ -1,58 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { formatBytes, formatUptime, plainTextFromMarkdown } from "./format";
-
-describe("formatUptime", () => {
-  it("renders seconds for short durations", () => {
-    expect(formatUptime(0)).toBe("0s");
-    expect(formatUptime(7_500)).toBe("7s");
-  });
-
-  it("renders minutes and seconds under an hour", () => {
-    expect(formatUptime(90_000)).toBe("1m 30s");
-    expect(formatUptime(59 * 60_000 + 12_000)).toBe("59m 12s");
-  });
-
-  it("renders hours and minutes under a day", () => {
-    expect(formatUptime(3_600_000)).toBe("1h 0m");
-    expect(formatUptime(5 * 3_600_000 + 30 * 60_000)).toBe("5h 30m");
-  });
-
-  it("renders days and hours for multi-day durations", () => {
-    expect(formatUptime(86_400_000)).toBe("1d 0h");
-    expect(formatUptime(86_400_000 * 3 + 3_600_000 * 4)).toBe("3d 4h");
-  });
-
-  it("handles invalid input", () => {
-    expect(formatUptime(Number.NaN)).toBe("—");
-    expect(formatUptime(-1)).toBe("—");
-  });
-});
-
-describe("formatBytes", () => {
-  it("renders bytes, KB, MB, GB progressively", () => {
-    expect(formatBytes(512)).toBe("512 B");
-    expect(formatBytes(2_048)).toBe("2.0 KB");
-    expect(formatBytes(5 * 1024 * 1024)).toBe("5.0 MB");
-    expect(formatBytes(2.5 * 1024 * 1024 * 1024)).toBe("2.50 GB");
-  });
-
-  it("handles invalid input", () => {
-    expect(formatBytes(Number.NaN)).toBe("—");
-    expect(formatBytes(-1)).toBe("—");
-  });
-});
-
-describe("plainTextFromMarkdown", () => {
-  it("drops emphasis, headings, list markers, code marks and link syntax", () => {
-    expect(plainTextFromMarkdown("**Ensuring workspace configuration** I need to check")).toBe("Ensuring workspace configuration I need to check");
-    expect(plainTextFromMarkdown("## Plan\n- item one\n- *soft* point")).toBe("Plan\nitem one\nsoft point");
-    expect(plainTextFromMarkdown("see [docs](https://example.com) and _this_")).toBe("see docs and this");
-    expect(plainTextFromMarkdown("**bold** and __also__ ~~gone~~")).toBe("bold and also gone");
-    expect(plainTextFromMarkdown("1. First\n2) Second")).toBe("First\nSecond");
-  });
-
-  it("keeps characters that are not markdown marks", () => {
-    expect(plainTextFromMarkdown("read `src/a_b.ts` and snake_case_name")).toBe("read src/a_b.ts and snake_case_name");
-    expect(plainTextFromMarkdown("2 * 3 * 4 = 24")).toBe("2 * 3 * 4 = 24");
-  });
-});