@stigmer/react 3.35.0 → 3.36.0

package/src/__tests__/deployment-mode.test.tsx

@@ -1,72 +0,0 @@
-/**
- * Pins the React side of the edition vocabulary: `useDeploymentMode` reads
- * the provider's context (default "cloud"), and `useResourceAvailable`
- * answers the tier question for the third edition — an enterprise-tier
- * kind is served, a cloud_only kind is not. The rank logic itself is pinned
- * in @stigmer/sdk (`resource-availability.test.ts`); this proves the hook
- * threads the context value through without narrowing it.
- */
-import { describe, it, expect, afterEach } from "vitest";
-import { cleanup, renderHook } from "@testing-library/react";
-import type { ReactNode } from "react";
-import type { DeploymentMode } from "@stigmer/sdk";
-import {
-  ApiResourceKind,
-  DeploymentModeContext,
-  useDeploymentMode,
-  useResourceAvailable,
-} from "../deployment-mode";
-
-function wrapper(mode: DeploymentMode) {
-  return function Wrapper({ children }: { children: ReactNode }) {
-    return (
-      <DeploymentModeContext.Provider value={mode}>
-        {children}
-      </DeploymentModeContext.Provider>
-    );
-  };
-}
-
-afterEach(cleanup);
-
-describe("useDeploymentMode", () => {
-  it("defaults to cloud when no provider sets it", () => {
-    const { result } = renderHook(() => useDeploymentMode());
-    expect(result.current).toBe("cloud");
-  });
-
-  it("reads enterprise from the provider", () => {
-    const { result } = renderHook(() => useDeploymentMode(), {
-      wrapper: wrapper("enterprise"),
-    });
-    expect(result.current).toBe("enterprise");
-  });
-});
-
-describe("useResourceAvailable under the enterprise mode", () => {
-  it("serves an enterprise-tier kind", () => {
-    // `invitation` is the example since `iam_policy` moved to open_source
-    // (20260913.01: the row half is served by every edition).
-    const { result } = renderHook(
-      () => useResourceAvailable(ApiResourceKind.invitation),
-      { wrapper: wrapper("enterprise") },
-    );
-    expect(result.current).toBe(true);
-  });
-
-  it("does not serve a cloud_only-tier kind", () => {
-    const { result } = renderHook(
-      () => useResourceAvailable(ApiResourceKind.api_resource_version),
-      { wrapper: wrapper("enterprise") },
-    );
-    expect(result.current).toBe(false);
-  });
-
-  it("serves every open_source-tier kind, like every mode does", () => {
-    const { result } = renderHook(
-      () => useResourceAvailable(ApiResourceKind.agent),
-      { wrapper: wrapper("enterprise") },
-    );
-    expect(result.current).toBe(true);
-  });
-});

package/src/__tests__/helpers/a11y-audit.tsx

@@ -1,159 +0,0 @@
-// The shared harness for the browser-mode accessibility audits (DD-22).
-//
-// Renders an audited component inside the `.stgm` scope against the SDK's
-// SHIPPED stylesheet (the prebuilt `dist/styles.css`, not a test-time
-// recompile), then runs axe-core with the SAME policy as the e2e page audit
-// (`test/e2e/tests/functional/accessibility.spec.ts`): WCAG 2.0 A/AA tags,
-// fail on critical/serious, log moderate/minor.
-//
-// Why this file exists and how it stays honest:
-// - Contrast/target-size are the point, so it runs in a real browser via
-//   `vitest.a11y.config.ts` (happy-dom can't evaluate either).
-// - axe is scoped to the rendered container and restricted to WCAG tags, so
-//   page-level rules (`region`, `landmark-one-main`, `html-has-lang`, …) don't
-//   false-positive on a component rendered in isolation.
-// - The wrapper carries the themed background so `color-contrast` is measured
-//   against the real surface color in BOTH color modes, not the browser default.
-//
-// Extracted when a third surface needed it (the workspace panel, the
-// conversation surfaces, the licenses console), per the house rule that a
-// shared test helper waits for its third call site. A surface keeps only
-// its own setup beside its suites (the workspace listing-cache reset).
-//
-// Not a `.test` file and inside `__tests__` deliberately, like `open-menu.ts`:
-// vitest collects nothing from it, and it never ships.
-
-import "../../../dist/styles.css";
-
-import { render, cleanup } from "@testing-library/react";
-import type { ReactElement } from "react";
-import axe from "axe-core";
-import { expect } from "vitest";
-import type { Stigmer } from "@stigmer/sdk";
-import { StigmerContext } from "../../context.js";
-
-/** The color modes every state is audited under. */
-export const COLOR_MODES = ["light", "dark"] as const;
-export type ColorMode = (typeof COLOR_MODES)[number];
-
-/**
- * Rules that are audited but reported as advisory (logged, non-blocking) rather
- * than failing the suite — mirroring the e2e audit's graduated rollout, which
- * ships fixing only some severities first.
- *
- * `color-contrast`: the SDK's deliberately dense small muted text (the
- * workspace panel's tree labels and `text-[0.65rem]` path subtitles, count
- * badges, captions across the consoles) falls below WCAG AA 4.5:1 in both
- * modes. This is a PRE-EXISTING, app-wide design-token/density concern (the
- * `--stgm-muted-foreground` token at small sizes), and its fix needs a
- * deliberate design pass across presets (tracked in DD-22's Follow-ups).
- * Kept advisory so the audits guard the STRUCTURAL accessibility (roles,
- * names, relationships, nesting) now. Promote back to blocking once the
- * contrast pass ships.
- */
-const ADVISORY_RULE_IDS = new Set<string>(["color-contrast"]);
-
-/**
- * Presentational surfaces never call the client, but `useStigmer` throws
- * outside a provider, so an empty stub is the default. A data-driven
- * surface passes a client whose methods answer with its fixtures.
- */
-const EMPTY_CLIENT = {} as unknown as Stigmer;
-
-/** Options for {@link renderAudited}. */
-export interface RenderAuditedOptions {
-  /** The client the surface reads through; defaults to an empty stub. */
-  readonly client?: Stigmer;
-  /** The container's box. Defaults to 1024 × 720. */
-  readonly width?: number;
-  readonly height?: number;
-}
-
-/**
- * Render `ui` inside a themed `.stgm` container for the given color mode.
- * Returns the container so callers can await the settled DOM before auditing.
- */
-export function renderAudited(
-  ui: ReactElement,
-  mode: ColorMode,
-  options: RenderAuditedOptions = {},
-): HTMLElement {
-  const container = document.createElement("div");
-  container.className = "stgm";
-  container.setAttribute("data-stgm-color-mode", mode);
-  // Audited surfaces always sit on a themed surface; matching it here means
-  // color-contrast is computed against the real background, not body white.
-  container.style.background = "var(--stgm-background)";
-  container.style.color = "var(--stgm-foreground)";
-  // A fixed box gives flex/scroll surfaces (ResizableSplit, editor panes) a
-  // real box to lay out in — observer-driven measurement that is a no-op in
-  // happy-dom but correct in Chromium.
-  container.style.height = `${options.height ?? 720}px`;
-  container.style.width = `${options.width ?? 1024}px`;
-  // RTL does NOT attach a caller-provided container to the document, so attach
-  // it ourselves — both `screen` queries and axe need it in the live DOM.
-  document.body.appendChild(container);
-
-  render(
-    <StigmerContext.Provider value={options.client ?? EMPTY_CLIENT}>{ui}</StigmerContext.Provider>,
-    { container },
-  );
-  return container;
-}
-
-function summarize(violations: axe.Result[]): string {
-  return violations
-    .map((v) => {
-      const nodes = v.nodes
-        .slice(0, 5)
-        .map((n) => `    · ${n.target.join(" ")}\n      ${n.html.slice(0, 160)}`)
-        .join("\n");
-      return `  [${v.impact}] ${v.id}: ${v.help} (${v.nodes.length} node(s))\n${nodes}`;
-    })
-    .join("\n");
-}
-
-/**
- * Run the WCAG 2.0 A/AA audit over `container`. Fails the test on any
- * critical/serious violation (mirroring the e2e gate); logs moderate/minor.
- */
-export async function auditA11y(container: HTMLElement, label: string): Promise<void> {
-  const results = await axe.run(container, {
-    runOnly: { type: "tag", values: ["wcag2a", "wcag2aa"] },
-  });
-
-  // Blocking: critical/serious violations that are NOT on the advisory list.
-  const serious = results.violations.filter(
-    (v) =>
-      (v.impact === "critical" || v.impact === "serious") &&
-      !ADVISORY_RULE_IDS.has(v.id),
-  );
-  // Advisory: everything else worth logging — the deferred rules plus any
-  // moderate/minor findings.
-  const advisory = results.violations.filter(
-    (v) =>
-      ADVISORY_RULE_IDS.has(v.id) ||
-      v.impact === "moderate" ||
-      v.impact === "minor",
-  );
-
-  if (advisory.length > 0) {
-    // Non-blocking a11y signal (mirrors the e2e audit's moderate/minor logging).
-    console.warn(`[a11y: ${label}] non-blocking violations:\n${summarize(advisory)}`);
-  }
-
-  expect(
-    serious,
-    `[a11y: ${label}] critical/serious axe violations:\n${summarize(serious)}`,
-  ).toHaveLength(0);
-}
-
-/**
- * Reset the DOM between audits. `cleanup()` unmounts React trees but does not
- * remove caller-provided containers, so leftover `.stgm` wrappers are dropped
- * too and scenarios never bleed. Call in `afterEach`.
- */
-export function resetAudit(): void {
-  cleanup();
-  document.querySelectorAll(".stgm").forEach((node) => node.remove());
-}

package/src/__tests__/helpers/compile-sdk-styles.ts

@@ -1,33 +0,0 @@
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-import postcss, { type Root } from "postcss";
-import tailwindcss from "@tailwindcss/postcss";
-import { scopeUnprefixedSelectors } from "../../../scripts/lib/scope-unprefixed.js";
-
-/**
- * Compile `src/styles.css` through the exact pipeline `scripts/build-styles.ts`
- * ships: a standalone Tailwind compile (the SDK stylesheet is a self-contained
- * artifact since #454 — client apps and hosts consume the COMPILED file, never
- * the source) followed by the `:where(.stgm, .stgm *)` scoping pass for the
- * selectors the `stg:` prefix cannot cover.
- *
- * Tests that assert on the shipped stylesheet's structure compile it here
- * instead of reading `dist/` so the default unit suite stays hermetic —
- * it must not depend on a prior `npm run build`.
- */
-export async function compileSdkStylesheet(): Promise<Root> {
-  // The directory of `styles.css` — `@source` globs and relative `@import`s
-  // inside it resolve from here, exactly as they do in the shipped build.
-  const srcDir = resolve(dirname(fileURLToPath(import.meta.url)), "..", "..");
-  const result = await postcss([tailwindcss({ base: srcDir })]).process(
-    `@import "./styles.css";`,
-    {
-      // A virtual entry inside src/ so `@import "./styles.css"` resolves to
-      // the real SDK stylesheet under test.
-      from: resolve(srcDir, "__styles-probe__.css"),
-    },
-  );
-  const root = postcss.parse(result.css);
-  scopeUnprefixedSelectors(root);
-  return root;
-}

package/src/__tests__/helpers/open-menu.ts

@@ -1,88 +0,0 @@
-import { screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-/**
- * Open a Base UI floating-trigger popup (action menu, dropdown) the way a
- * real pointer does, and fail with the exact stage that died.
- *
- * WHY THIS EXISTS (oss#483): Base UI commits a trigger's interactive props
- * (open handlers, `aria-expanded`) one store-notification cycle AFTER the
- * button first appears in the DOM. A test that clicks immediately after
- * render can hit that window — the click lands on a not-yet-wired button
- * and the open is never attempted. Invisible at human speed, the window
- * widens under CI load into intermittent "menu never opened" timeouts
- * (~5% per attempt under CPU starvation; mechanism pinned by probing
- * `aria-expanded` synchronously after the click: `null`, with the menu
- * root's `onOpenChange` never firing). The readiness stage below closes
- * the race by construction; the pointer-fidelity click keeps the test on
- * the open path real users exercise.
- *
- * Failure semantics: each stage throws a named error, so a CI log
- * pinpoints WHICH link broke (trigger never wired / open never happened /
- * items never rendered) instead of an opaque 8s query timeout. There are
- * deliberately NO retries: a helper that re-clicks would mask genuine
- * open-path regressions in the SDK.
- *
- * Caveat: `userEvent` deadlocks under `vi.useFakeTimers()` unless
- * configured with `advanceTimers` — don't call this helper from
- * fake-timer tests (none of the menu suites use them today).
- *
- * Not a `.test` file and inside `__tests__` deliberately: vitest does not
- * collect it, and the build/typedoc excludes keep it out of the published
- * package.
- */
-export async function openMenu(trigger: HTMLElement): Promise<void> {
-  await openFloatingTrigger(trigger, "menuitem");
-}
-
-/**
- * Trigger-generic core: Base UI selects/comboboxes share the same wiring
- * lifecycle and the same latent race (their popup items are `option`
- * instead of `menuitem`). Widen to an exported `openSelect` if that family
- * ever needs it — do not fork the stages.
- */
-async function openFloatingTrigger(
-  trigger: HTMLElement,
-  itemRole: "menuitem" | "option",
-): Promise<void> {
-  // Stage 1 — trigger wiring. `aria-expanded` arrives in the same props
-  // merge as the open handlers, so its presence is the observable signal
-  // that the button is actually clickable-as-a-trigger.
-  await waitFor(() => {
-    if (!trigger.hasAttribute("aria-expanded")) {
-      throw new Error(
-        `openMenu stage "trigger-wiring": trigger is rendered but Base UI ` +
-          `has not attached its interactive props yet (no aria-expanded). ` +
-          `Trigger: ${describeTrigger(trigger)}`,
-      );
-    }
-  });
-
-  // Stage 2 — the click, with full pointer + focus fidelity (pointerdown,
-  // mousedown, focus, pointerup, mouseup, click) so the primary
-  // mousedown-open path is exercised, not the bare-click fallback.
-  await userEvent.click(trigger);
-
-  // Stage 3 — the open must register on the trigger itself.
-  await waitFor(() => {
-    if (trigger.getAttribute("aria-expanded") !== "true") {
-      throw new Error(
-        `openMenu stage "open": the click was dispatched but the trigger ` +
-          `never reported open (aria-expanded=` +
-          `${JSON.stringify(trigger.getAttribute("aria-expanded"))}). ` +
-          `Trigger: ${describeTrigger(trigger)}`,
-      );
-    }
-  });
-
-  // Stage 4 — items must be queryable. findAllByRole (not waitFor) so a
-  // timeout here still produces testing-library's DOM dump.
-  await screen.findAllByRole(itemRole);
-}
-
-function describeTrigger(trigger: HTMLElement): string {
-  const label = trigger.getAttribute("aria-label") ?? trigger.textContent;
-  return `<${trigger.tagName.toLowerCase()} aria-label=${JSON.stringify(
-    label,
-  )} connected=${trigger.isConnected}>`;
-}

package/src/__tests__/hooks.test.tsx

@@ -1,56 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { renderHook } from "@testing-library/react";
-import type { ReactNode } from "react";
-import type { Stigmer } from "@stigmer/sdk";
-import { StigmerContext } from "../context";
-import { useStigmer } from "../hooks";
-import { ExecutionTargetContext, useExecutionTarget } from "../execution-target-context";
-
-describe("useStigmer", () => {
-  it("throws when used outside StigmerProvider", () => {
-    expect(() => renderHook(() => useStigmer())).toThrow(
-      "useStigmer must be used within <StigmerProvider>. " +
-        "Wrap your component tree with <StigmerProvider client={stigmerClient}>.",
-    );
-  });
-
-  it("returns the Stigmer client when inside a provider", () => {
-    const mockClient = { agent: {} } as unknown as Stigmer;
-
-    const wrapper = ({ children }: { children: ReactNode }) => (
-      <StigmerContext.Provider value={mockClient}>
-        {children}
-      </StigmerContext.Provider>
-    );
-
-    const { result } = renderHook(() => useStigmer(), { wrapper });
-    expect(result.current).toBe(mockClient);
-  });
-});
-
-describe("useExecutionTarget", () => {
-  it("returns undefined when no ExecutionTargetContext.Provider wraps it", () => {
-    const { result } = renderHook(() => useExecutionTarget());
-    expect(result.current).toBeUndefined();
-  });
-
-  it("returns 'local' when provider sets executionTarget to local", () => {
-    const wrapper = ({ children }: { children: ReactNode }) => (
-      <ExecutionTargetContext.Provider value="local">
-        {children}
-      </ExecutionTargetContext.Provider>
-    );
-    const { result } = renderHook(() => useExecutionTarget(), { wrapper });
-    expect(result.current).toBe("local");
-  });
-
-  it("returns 'cloud' when provider sets executionTarget to cloud", () => {
-    const wrapper = ({ children }: { children: ReactNode }) => (
-      <ExecutionTargetContext.Provider value="cloud">
-        {children}
-      </ExecutionTargetContext.Provider>
-    );
-    const { result } = renderHook(() => useExecutionTarget(), { wrapper });
-    expect(result.current).toBe("cloud");
-  });
-});

package/src/__tests__/portal-container.test.tsx

@@ -1,97 +0,0 @@
-import { describe, it, expect, beforeAll, afterEach } from "vitest";
-import { render, renderHook, screen, cleanup } from "@testing-library/react";
-import type { Stigmer } from "@stigmer/sdk";
-import { StigmerProvider } from "../provider";
-import { useStigmerPortalContainer } from "../portal-container";
-import { Menu, MenuTrigger, MenuContent, MenuItem } from "../internal/menu";
-import { openMenu } from "./helpers/open-menu";
-
-// Regression tests for stigmer-cloud#271: Base UI treats an EXPLICIT
-// `container={null}` as "wait for a container" and renders the popup
-// NOWHERE; only `undefined` falls back to `document.body`. The hook
-// therefore returns a three-state value (undefined / null / element)
-// that call sites pass straight through — see `useStigmerPortalContainer`
-// for the full contract. These tests pin the contract at its single
-// source plus one real consumer rendered standalone.
-
-beforeAll(() => {
-  // happy-dom lacks ResizeObserver, which Base UI positioners observe.
-  if (!("ResizeObserver" in globalThis)) {
-    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
-      class {
-        observe() {}
-        unobserve() {}
-        disconnect() {}
-      };
-  }
-});
-
-afterEach(cleanup);
-
-// A minimal client: the provider eagerly fetches the model/task-kind
-// registries on mount. Returning a null credential keeps that work
-// non-blocking (it polls for a token) so rendering is synchronous and
-// never touches the network during the test.
-function makeClient(): Stigmer {
-  return {
-    baseUrl: "https://example.test",
-    getAuthCredential: async () => null,
-    fetch: (async () => {
-      throw new Error("network disabled in test");
-    }) as unknown as typeof globalThis.fetch,
-  } as unknown as Stigmer;
-}
-
-describe("useStigmerPortalContainer contract", () => {
-  it("returns undefined — never null — outside a StigmerProvider", () => {
-    const { result } = renderHook(() => useStigmerPortalContainer());
-
-    // The load-bearing distinction: `undefined` makes Base UI portals
-    // fall back to `document.body` (standalone components work);
-    // an explicit `null` makes them render NOWHERE. A default of
-    // `null` is exactly the cloud#271 defect.
-    expect(result.current).toBeUndefined();
-    expect(result.current).not.toBeNull();
-  });
-
-  it("returns the mounted themed portal container inside a StigmerProvider", () => {
-    const { result } = renderHook(() => useStigmerPortalContainer(), {
-      wrapper: ({ children }) => (
-        <StigmerProvider client={makeClient()}>{children}</StigmerProvider>
-      ),
-    });
-
-    // After mount the provider publishes its themed container — the
-    // `data-stgm-portal` element appended to document.body.
-    expect(result.current).toBeInstanceOf(HTMLElement);
-    expect(result.current!.hasAttribute("data-stgm-portal")).toBe(true);
-    expect(document.body.contains(result.current!)).toBe(true);
-  });
-});
-
-describe("standalone portal rendering (no StigmerProvider)", () => {
-  it("opens a menu into document.body instead of rendering it nowhere", async () => {
-    // The internal menu wrapper is a real consumer that passes the
-    // hook's value straight through as `container`. Rendered without
-    // any provider, the popup must reach document.body via Base UI's
-    // `undefined` fallback. Against the pre-fix hook (default `null`)
-    // this popup renders nowhere and the query below times out.
-    const { container } = render(
-      <Menu>
-        <MenuTrigger>Open actions</MenuTrigger>
-        <MenuContent>
-          <MenuItem>Rename</MenuItem>
-        </MenuContent>
-      </Menu>,
-    );
-
-    await openMenu(screen.getByRole("button", { name: "Open actions" }));
-
-    const item = screen.getByRole("menuitem", { name: "Rename" });
-
-    // Portaled for real: in the document, but NOT inside the render
-    // container — Base UI appended it to document.body.
-    expect(document.body.contains(item)).toBe(true);
-    expect(container.contains(item)).toBe(false);
-  });
-});

package/src/__tests__/preflight-parity.layout.test.tsx

@@ -1,156 +0,0 @@
-// Preflight-parity regression suite for form controls (#374).
-//
-// Runs in a real Chromium via `vitest.a11y.config.ts` — the defect under
-// guard is the user agent's OWN default control styling (buttonface
-// background, built-in padding, UA font stack), which only a real browser
-// applies. happy-dom has no UA stylesheet, so it would pass vacuously.
-//
-// The contract: every SDK component is authored against Tailwind's preflight
-// baseline (our consoles run it globally). In a host WITHOUT a preflight —
-// third-party embeds, the packed demo tours — the scoped form-control
-// preflight in `styles.css` must reproduce that baseline under `.stgm`, or
-// every unstyled-by-intent button renders as a grey UA box (the #374
-// screenshots). Like the sibling layout suites (DD-21), this renders against
-// the SHIPPED stylesheet (`dist/styles.css`, rebuilt by `npm run build:css`)
-// and nothing else — exactly what an embed loads.
-//
-// Two directions, both load-bearing:
-// 1. UA defaults neutralized: bare controls show no buttonface box, no UA
-//    padding, no UA font.
-// 2. Utilities still win: the preflight lives in `@layer base`, so `bg-*`
-//    and `p-*` utilities on themed components must beat it. This half is
-//    what fails if the block ever migrates to a layer above `utilities`
-//    (the exact mistake that shipped three times with the border reset —
-//    see styles-border-layer-invariant.test.ts for the host-compiled twin).
-
-import "../../dist/styles.css";
-
-import { describe, it, expect, afterEach } from "vitest";
-import { render, cleanup } from "@testing-library/react";
-import type { Stigmer } from "@stigmer/sdk";
-import { StigmerProvider } from "../provider";
-import { Button } from "../button/Button.js";
-import { UNSTYLED_BUTTON } from "../internal/form-primitives.js";
-
-afterEach(cleanup);
-
-// A minimal client (the provider-container suite's idiom): a null credential
-// keeps the provider's registry fetches non-blocking so rendering is
-// synchronous and never touches the network.
-function makeClient(): Stigmer {
-  return {
-    baseUrl: "https://example.test",
-    getAuthCredential: async () => null,
-    fetch: (async () => {
-      throw new Error("network disabled in test");
-    }) as unknown as typeof globalThis.fetch,
-  } as unknown as Stigmer;
-}
-
-/**
- * Renders `ui` inside the provider, wrapped in a probe `<div>` with a
- * distinctive font so inheritance is detectable: a control that inherits
- * (`font: inherit`) computes to Georgia; one still wearing the UA button
- * font does not.
- */
-function renderScoped(ui: React.ReactNode): HTMLElement {
-  render(
-    <StigmerProvider client={makeClient()}>
-      <div data-testid="probe" style={{ fontFamily: "Georgia, serif" }}>
-        {ui}
-      </div>
-    </StigmerProvider>,
-  );
-  return document.querySelector('[data-testid="probe"]') as HTMLElement;
-}
-
-function computed(el: Element): CSSStyleDeclaration {
-  return getComputedStyle(el);
-}
-
-const TRANSPARENT = "rgba(0, 0, 0, 0)";
-
-describe("scoped form-control preflight (#374)", () => {
-  describe("UA defaults are neutralized under .stgm", () => {
-    it("a bare button loses the buttonface box, UA padding, and UA font", () => {
-      const probe = renderScoped(<button type="button">bare</button>);
-      const style = computed(probe.querySelector("button")!);
-
-      expect(style.backgroundColor, "UA buttonface background must be cleared").toBe(TRANSPARENT);
-      // Chromium's UA button padding is 1px 6px — all four sides must be 0.
-      expect(
-        [style.paddingTop, style.paddingRight, style.paddingBottom, style.paddingLeft],
-        "UA button padding must be zeroed",
-      ).toEqual(["0px", "0px", "0px", "0px"]);
-      expect(style.fontFamily, "button font must inherit, not the UA stack").toBe(
-        computed(probe).fontFamily,
-      );
-      expect(style.borderTopLeftRadius).toBe("0px");
-    });
-
-    it("an unstyled-by-intent tile button (the #371 shape) renders content-only", () => {
-      // The exact pattern the issue screenshotted: an image tile whose only
-      // classes are UNSTYLED_BUTTON + geometry.
-      const probe = renderScoped(
-        <button type="button" className={`${UNSTYLED_BUTTON} stg:relative stg:block stg:h-14 stg:w-14 stg:rounded-md`}>
-          tile
-        </button>,
-      );
-      const style = computed(probe.querySelector("button")!);
-
-      expect(style.backgroundColor).toBe(TRANSPARENT);
-      expect(style.paddingLeft).toBe("0px");
-      expect(style.cursor, "UNSTYLED_BUTTON supplies the pointer cursor").toBe("pointer");
-      // Geometry utilities keep working on top of the reset.
-      expect(style.width).toBe("56px");
-      expect(style.borderTopLeftRadius).not.toBe("0px");
-    });
-
-    it("bare input, textarea, and select lose UA backgrounds and inherit the font", () => {
-      const probe = renderScoped(
-        <>
-          <input readOnly value="i" />
-          <textarea readOnly value="t" />
-          <select defaultValue="o">
-            <option value="o">o</option>
-          </select>
-        </>,
-      );
-
-      for (const tag of ["input", "textarea", "select"] as const) {
-        const style = computed(probe.querySelector(tag)!);
-        expect(style.backgroundColor, `${tag} UA background must be cleared`).toBe(TRANSPARENT);
-        expect(style.fontFamily, `${tag} font must inherit`).toBe(computed(probe).fontFamily);
-      }
-      expect(
-        computed(probe.querySelector("textarea")!).resize,
-        "textareas resize vertically only (preflight parity)",
-      ).toBe("vertical");
-    });
-  });
-
-  describe("utilities still beat the preflight (the base-vs-utilities invariant, on the shipped artifact)", () => {
-    it("the themed Button keeps its background and padding", () => {
-      const probe = renderScoped(<Button variant="primary">go</Button>);
-      const style = computed(probe.querySelector("button")!);
-
-      // `bg-primary` must survive the preflight's background-color:
-      // transparent — this is the assertion that fails if the form-control
-      // block ever lands in a layer above `utilities`.
-      expect(style.backgroundColor, "bg-primary must win over the preflight").not.toBe(
-        TRANSPARENT,
-      );
-      // size "sm" = px-3 py-1.5 → 12px / 6px.
-      expect(style.paddingLeft, "p-* utilities must win over the preflight").toBe("12px");
-      expect(style.paddingTop).toBe("6px");
-    });
-
-    it("the ghost Button is transparent by design and stays that way", () => {
-      // Ghost sets NO bg-* utility: pre-#374 it silently wore the UA
-      // buttonface grey in embeds. Transparent here proves the preflight is
-      // what ghost was implicitly depending on all along.
-      const probe = renderScoped(<Button variant="ghost">go</Button>);
-      expect(computed(probe.querySelector("button")!).backgroundColor).toBe(TRANSPARENT);
-    });
-  });
-});