@stigmer/react 3.35.0 → 3.36.0

package/src/internal/__tests__/DecisionButton.test.tsx

@@ -1,107 +0,0 @@
-import { describe, it, expect, afterEach, vi } from "vitest";
-import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import { DecisionButton } from "../DecisionButton";
-
-afterEach(cleanup);
-
-// happy-dom cannot resolve `@layer`/the cascade, so these assert the class
-// CONTRACT (the quiet, token-only treatment), not rendered pixels. The rendered
-// outcome is covered by the e2e computed-style guard in tool-card-ux.spec.ts.
-describe("DecisionButton", () => {
-  it("renders the label as the accessible name and invokes onClick", () => {
-    const onClick = vi.fn();
-    render(<DecisionButton label="Approve" variant="primary" onClick={onClick} />);
-    const btn = screen.getByRole("button", { name: "Approve" });
-    fireEvent.click(btn);
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("primary is a neutral chip (bordered fill), never the loud success green", () => {
-    render(<DecisionButton label="Approve" variant="primary" onClick={() => {}} />);
-    const cls = screen.getByRole("button").className;
-    expect(cls).toContain("border");
-    expect(cls).toContain("stg:bg-accent");
-    expect(cls).toContain("stg:text-accent-foreground");
-    expect(cls).not.toContain("stg:bg-success");
-  });
-
-  it("ghost carries no fill at rest (lowest weight)", () => {
-    render(<DecisionButton label="Skip" variant="ghost" onClick={() => {}} />);
-    const cls = screen.getByRole("button").className;
-    expect(cls).toContain("stg:text-muted-foreground");
-    // No resting background — only a neutral hover wash.
-    expect(cls).not.toMatch(/(?:^|\s)bg-/);
-    expect(cls).toContain("stg:hover:bg-accent-hover");
-  });
-
-  it("danger is a quiet ghost that reveals the destructive cue on hover AND focus, never the loud red fill", () => {
-    render(<DecisionButton label="Reject" variant="danger" onClick={() => {}} />);
-    const cls = screen.getByRole("button").className;
-    expect(cls).toContain("stg:text-muted-foreground");
-    expect(cls).not.toMatch(/(?:^|\s)bg-/); // transparent at rest
-    expect(cls).toContain("stg:hover:text-destructive");
-    expect(cls).toContain("stg:hover:bg-destructive-subtle");
-    // Keyboard parity: the cue is not hover-only.
-    expect(cls).toContain("stg:focus-visible:text-destructive");
-    expect(cls).not.toContain("stg:bg-destructive stg:text-destructive-foreground");
-  });
-
-  it("uses NO `bg-token/NN` opacity modifiers in any variant", () => {
-    for (const variant of ["primary", "ghost", "danger"] as const) {
-      const { unmount } = render(
-        <DecisionButton label="x" variant={variant} onClick={() => {}} />,
-      );
-      const cls = screen.getByRole("button").className;
-      // No utility ends in `/<digits>` (e.g. bg-success/90, hover:bg-destructive/10).
-      expect(cls).not.toMatch(/\/\d+(?:\s|$)/);
-      unmount();
-    }
-  });
-
-  it("disables every button while a submission is in flight", () => {
-    render(
-      <DecisionButton label="Approve" variant="primary" onClick={() => {}} isSubmitting />,
-    );
-    expect((screen.getByRole("button") as HTMLButtonElement).disabled).toBe(true);
-  });
-
-  it("shows the spinner only on the active button that is submitting", () => {
-    const { rerender } = render(
-      <DecisionButton
-        label="Approve"
-        variant="primary"
-        onClick={() => {}}
-        isSubmitting
-        isActive
-      />,
-    );
-    expect(screen.getByRole("button").querySelector("svg.stg\\:animate-spin")).toBeTruthy();
-
-    // In-flight, but a DIFFERENT button is the active one — no spinner here.
-    rerender(
-      <DecisionButton
-        label="Approve"
-        variant="primary"
-        onClick={() => {}}
-        isSubmitting
-        isActive={false}
-      />,
-    );
-    expect(screen.getByRole("button").querySelector("svg.stg\\:animate-spin")).toBeNull();
-  });
-
-  it("forwards className and the data-cursor-target hook", () => {
-    render(
-      <DecisionButton
-        label="Approve all"
-        variant="ghost"
-        onClick={() => {}}
-        className="stg:ml-auto"
-        cursorTarget="approve-all-button"
-      />,
-    );
-    const btn = screen.getByRole("button");
-    expect(btn.className).toContain("stg:ml-auto");
-    expect(btn.getAttribute("data-cursor-target")).toBe("approve-all-button");
-  });
-});

package/src/internal/__tests__/DialogShell.test.tsx

@@ -1,223 +0,0 @@
-/**
- * DialogShell (stigmer#653): the one modal shell — showModal lifecycle,
- * cancel/Escape wiring with state authority, native-close sync, the token
- * backdrop + converged chrome, and the non-modal in-flow mode.
- */
-
-import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
-import { render, cleanup, fireEvent } from "@testing-library/react";
-import { DialogShell } from "../DialogShell";
-
-// happy-dom does not implement the native dialog show/close methods.
-beforeAll(() => {
-  HTMLDialogElement.prototype.showModal = function showModal() {
-    this.open = true;
-  };
-  HTMLDialogElement.prototype.close = function close() {
-    this.open = false;
-  };
-});
-
-afterEach(cleanup);
-
-function dialogOf(container: HTMLElement): HTMLDialogElement {
-  return container.querySelector("dialog")!;
-}
-
-describe("DialogShell lifecycle", () => {
-  it("opens via showModal when the controlled prop flips true", () => {
-    const { container, rerender } = render(
-      <DialogShell open={false} onOpenChange={() => {}}>
-        <p>body</p>
-      </DialogShell>,
-    );
-    expect(dialogOf(container).open).toBe(false);
-
-    rerender(
-      <DialogShell open onOpenChange={() => {}}>
-        <p>body</p>
-      </DialogShell>,
-    );
-    expect(dialogOf(container).open).toBe(true);
-  });
-
-  it("shows immediately when mounted already open", () => {
-    const { container } = render(
-      <DialogShell open onOpenChange={() => {}}>
-        <p>body</p>
-      </DialogShell>,
-    );
-    expect(dialogOf(container).open).toBe(true);
-  });
-
-  it("closes the native dialog when the controlled prop flips false", () => {
-    const { container, rerender } = render(
-      <DialogShell open onOpenChange={() => {}}>
-        <p>body</p>
-      </DialogShell>,
-    );
-    rerender(
-      <DialogShell open={false} onOpenChange={() => {}}>
-        <p>body</p>
-      </DialogShell>,
-    );
-    expect(dialogOf(container).open).toBe(false);
-  });
-
-  it("Escape/cancel reports intent but never closes on its own — state stays authoritative", () => {
-    const onOpenChange = vi.fn();
-    const { container } = render(
-      <DialogShell open onOpenChange={onOpenChange}>
-        <p>body</p>
-      </DialogShell>,
-    );
-
-    fireEvent(dialogOf(container), new Event("cancel", { cancelable: true }));
-
-    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(false);
-    // The shell prevented the native close; the dialog stays open until the
-    // host flips the prop.
-    expect(dialogOf(container).open).toBe(true);
-  });
-
-  it("syncs the controlled state when something else closes the dialog natively", () => {
-    const onOpenChange = vi.fn();
-    const { container } = render(
-      <DialogShell open onOpenChange={onOpenChange}>
-        <p>body</p>
-      </DialogShell>,
-    );
-
-    // e.g. a method="dialog" form submit closes without going through props.
-    const dialog = dialogOf(container);
-    dialog.close();
-    fireEvent(dialog, new Event("close"));
-
-    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(false);
-  });
-
-  it("does not re-report a close the host itself drove", () => {
-    const onOpenChange = vi.fn();
-    const { container, rerender } = render(
-      <DialogShell open onOpenChange={onOpenChange}>
-        <p>body</p>
-      </DialogShell>,
-    );
-    rerender(
-      <DialogShell open={false} onOpenChange={onOpenChange}>
-        <p>body</p>
-      </DialogShell>,
-    );
-    // The effect's own dialog.close() fires a native close event in real
-    // browsers — replay it against the now-false prop.
-    fireEvent(dialogOf(container), new Event("close"));
-    expect(onOpenChange).not.toHaveBeenCalled();
-  });
-});
-
-describe("DialogShell chrome", () => {
-  it("carries the token backdrop, animation, positioning, and width preset", () => {
-    const { container } = render(
-      <DialogShell open onOpenChange={() => {}} width="3xl">
-        <p>body</p>
-      </DialogShell>,
-    );
-    const cls = dialogOf(container).className;
-
-    expect(cls).toContain("stg:backdrop:bg-backdrop");
-    expect(cls).toContain("stg:open:animate-in");
-    expect(cls).toContain("stg:fixed");
-    expect(cls).toContain("stg:m-auto");
-    expect(cls).toContain("stg:max-w-3xl");
-    expect(cls).toContain("stg:bg-popover");
-  });
-
-  it("className overrides the shell's own chrome per class (tailwind-merge)", () => {
-    const { container } = render(
-      <DialogShell
-        open
-        onOpenChange={() => {}}
-        className="stg:bg-background stg:max-w-[85vw]"
-      >
-        <p>body</p>
-      </DialogShell>,
-    );
-    const cls = dialogOf(container).className;
-
-    expect(cls).toContain("stg:bg-background");
-    expect(cls).not.toContain("stg:bg-popover");
-    expect(cls).toContain("stg:max-w-[85vw]");
-    expect(cls).not.toContain("stg:max-w-md");
-  });
-
-  it("labels the dialog for assistive tech", () => {
-    const { container } = render(
-      <DialogShell open onOpenChange={() => {}} aria-label="Confirm delete">
-        <p>body</p>
-      </DialogShell>,
-    );
-    expect(dialogOf(container).getAttribute("aria-label")).toBe("Confirm delete");
-  });
-});
-
-describe("DialogShell backdrop dismiss", () => {
-  it("dismissOnBackdrop: a click on the dialog element itself reports close intent", () => {
-    const onOpenChange = vi.fn();
-    const { container } = render(
-      <DialogShell open onOpenChange={onOpenChange} dismissOnBackdrop>
-        <p>body</p>
-      </DialogShell>,
-    );
-
-    fireEvent.click(dialogOf(container));
-    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(false);
-  });
-
-  it("dismissOnBackdrop: clicks on content descendants never dismiss", () => {
-    const onOpenChange = vi.fn();
-    const { container, getByText } = render(
-      <DialogShell open onOpenChange={onOpenChange} dismissOnBackdrop>
-        <p>body</p>
-      </DialogShell>,
-    );
-
-    fireEvent.click(getByText("body"));
-    expect(onOpenChange).not.toHaveBeenCalled();
-    expect(dialogOf(container).open).toBe(true);
-  });
-
-  it("default: backdrop clicks are inert (form dialogs)", () => {
-    const onOpenChange = vi.fn();
-    const { container } = render(
-      <DialogShell open onOpenChange={onOpenChange}>
-        <p>body</p>
-      </DialogShell>,
-    );
-
-    fireEvent.click(dialogOf(container));
-    expect(onOpenChange).not.toHaveBeenCalled();
-  });
-});
-
-describe("DialogShell non-modal mode", () => {
-  it("renders in-flow: open attribute, no backdrop, no fixed positioning", () => {
-    const { container, rerender } = render(
-      <DialogShell open modal={false} onOpenChange={() => {}}>
-        <p>body</p>
-      </DialogShell>,
-    );
-    const dialog = dialogOf(container);
-
-    expect(dialog.open).toBe(true);
-    expect(dialog.className).toContain("stg:relative");
-    expect(dialog.className).not.toContain("stg:backdrop:bg-backdrop");
-    expect(dialog.className).not.toContain("stg:fixed");
-
-    rerender(
-      <DialogShell open={false} modal={false} onOpenChange={() => {}}>
-        <p>body</p>
-      </DialogShell>,
-    );
-    expect(dialogOf(container).open).toBe(false);
-  });
-});

package/src/internal/__tests__/ResizableSplit.layout.test.tsx

@@ -1,136 +0,0 @@
-// Layout-contract regression suite for ResizableSplit's responsive collapse
-// (stigmer/stigmer#301). Runs in a real Chromium via `vitest.a11y.config.ts` —
-// evaluating a CSS container query requires a real layout engine, which
-// happy-dom does not have.
-//
-// The contract under test: `responsiveCollapse` keys on the split's OWN box
-// (a container query), never the browser viewport. The defining scenario is
-// the one the issue reports — a narrow dock inside a WIDE window. A viewport
-// media query can never fire there (the window is wide), so every assertion
-// below that expects a collapse is meaningless under the old `max-lg`
-// implementation and fails against it.
-//
-// Like the provider container suite (#260/DD-019), this renders against the
-// SHIPPED stylesheet (`dist/styles.css`, built by `npm run build:libs`), so
-// the contract is verified on the artifact consumers actually load.
-
-import "../../../dist/styles.css";
-
-import { describe, it, expect, afterEach, beforeAll } from "vitest";
-import { render, cleanup, screen } from "@testing-library/react";
-import { page } from "@vitest/browser/context";
-import { ResizableSplit } from "../ResizableSplit";
-
-// The harness default viewport (414×896) is narrower than Tailwind's `lg`,
-// where a viewport-keyed collapse would fire too — hiding the very defect
-// this suite exists to catch. Pin a desktop-wide window so the narrow-dock
-// cases can only pass with a container-keyed implementation.
-beforeAll(async () => {
-  await page.viewport(1280, 800);
-});
-
-afterEach(cleanup);
-
-/** The collapse threshold the component documents: 48rem = 768px. */
-const THRESHOLD_PX = 768;
-
-/** Comfortably inside the collapse band — the issue's 360–640px dock class. */
-const NARROW_PX = 500;
-
-/** Comfortably above the threshold, yet far below the Chromium viewport. */
-const WIDE_PX = THRESHOLD_PX + 132;
-
-/**
- * Render the split docked in a fixed-width wrapper, the embedded-host
- * arrangement from stigmer/stigmer#301: the wrapper is narrower than the
- * viewport, so any viewport-keyed rule sees a wide window while the
- * component's own box is tight.
- */
-function renderDocked(
-  wrapperWidthPx: number,
-  overrides: Partial<React.ComponentProps<typeof ResizableSplit>> = {},
-) {
-  return render(
-    <div style={{ width: wrapperWidthPx, height: 400, display: "flex" }}>
-      <ResizableSplit
-        resizablePane="primary"
-        responsiveCollapse="primary"
-        primary={<div data-testid="primary">chat</div>}
-        secondary={<div data-testid="secondary">panel</div>}
-        {...overrides}
-      />
-    </div>,
-  );
-}
-
-function paneOf(testId: string): HTMLElement {
-  return screen.getByTestId(testId).parentElement!;
-}
-
-describe("ResizableSplit responsive collapse keys on its container (#301)", () => {
-  it("sanity: the test viewport is wide enough that a viewport-lg query could never fire", () => {
-    // Guards the premise of every case below. If the runner's viewport ever
-    // shrinks below Tailwind's `lg` (1024px), the narrow-dock cases stop
-    // discriminating between container- and viewport-keyed implementations.
-    expect(window.innerWidth).toBeGreaterThanOrEqual(1024);
-  });
-
-  it("collapses the primary pane in a narrow dock inside a wide window", () => {
-    renderDocked(NARROW_PX);
-
-    expect(getComputedStyle(paneOf("primary")).display).toBe("none");
-    // The drag handle hides with the pane...
-    const separator = screen.getByRole("separator", { hidden: true });
-    expect(getComputedStyle(separator).display).toBe("none");
-    // ...so the secondary pane owns the full dock width.
-    expect(paneOf("secondary").getBoundingClientRect().width).toBe(NARROW_PX);
-  });
-
-  it("keeps both panes side-by-side once the dock is wider than the threshold", () => {
-    renderDocked(WIDE_PX);
-
-    const primary = paneOf("primary");
-    const secondary = paneOf("secondary");
-    expect(getComputedStyle(primary).display).not.toBe("none");
-    expect(getComputedStyle(secondary).display).not.toBe("none");
-    // The fixed pane holds its pixel width; the sibling flexes into the rest.
-    expect(primary.getBoundingClientRect().width).toBe(384);
-    expect(secondary.getBoundingClientRect().width).toBeGreaterThan(0);
-  });
-
-  it("collapses the secondary pane when it is the responsive side", () => {
-    renderDocked(NARROW_PX, {
-      resizablePane: "secondary",
-      responsiveCollapse: "secondary",
-    });
-
-    expect(getComputedStyle(paneOf("secondary")).display).toBe("none");
-    expect(paneOf("primary").getBoundingClientRect().width).toBe(NARROW_PX);
-  });
-
-  it('responsiveCollapse="none": never collapses and creates no containment context', () => {
-    const { container } = renderDocked(NARROW_PX, {
-      responsiveCollapse: "none",
-    });
-
-    expect(getComputedStyle(paneOf("primary")).display).not.toBe("none");
-    expect(getComputedStyle(paneOf("secondary")).display).not.toBe("none");
-
-    // The containment invariant: without a collapse to decide, the root must
-    // NOT be a CSS container — `container-type: inline-size` would re-parent
-    // `position: fixed` descendants (the workflow inspector's click-away
-    // backdrop renders in-tree inside a split pane) and add a stacking
-    // context. See the conditional in ResizableSplit.
-    const root = paneOf("primary").parentElement!;
-    expect(getComputedStyle(root).containerType).toBe("normal");
-  });
-
-  it("the collapse-enabled root is an inline-size container named for its query", () => {
-    renderDocked(NARROW_PX);
-
-    const root = screen.getByRole("separator", { hidden: true }).parentElement!;
-    const style = getComputedStyle(root);
-    expect(style.containerType).toBe("inline-size");
-    expect(style.containerName).toBe("resizable-split");
-  });
-});