@celestia-island/hikari 0.40.12 → 0.40.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.40.12",
+  "version": "0.40.14",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkErrorBoundary.test.tsx

@@ -0,0 +1,103 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, type Component } from "vue";
+
+import HkErrorBoundary from "./HkErrorBoundary";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mountWith(child: Component, props: Record<string, unknown> = {}) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({
+    render: () => h(HkErrorBoundary, props, { default: () => h(child) }),
+  });
+  app.config.errorHandler = () => {}; // Silence Vue's own duplicate logging.
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+const Boom = defineComponent({
+  name: "Boom",
+  setup() {
+    throw new TypeError("Cannot read properties of undefined (reading 'length')");
+  },
+  render: () => h("div", "never"),
+});
+
+const Fine = defineComponent({
+  name: "Fine",
+  render: () => h("div", { class: "fine-child" }, "fine"),
+});
+
+afterEach(() => {
+  for (const { app, container } of mounts) {
+    app.unmount();
+    container.remove();
+  }
+  mounts.length = 0;
+  vi.restoreAllMocks();
+});
+
+describe("HkErrorBoundary", () => {
+  it("renders children while nothing throws", () => {
+    const el = mountWith(Fine);
+    expect(el.querySelector(".fine-child")).not.toBeNull();
+    expect(el.querySelector(".hk-error-landing")).toBeNull();
+  });
+
+  it("captures a crash and renders the inline error landing", async () => {
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    const el = mountWith(Boom);
+    await nextTick();
+
+    const landing = el.querySelector(".hk-error-landing");
+    expect(landing).not.toBeNull();
+    expect(landing!.classList.contains("is-inline")).toBe(true);
+    expect(el.querySelector(".hk-error-landing__code")!.textContent).toBe("TypeError");
+    expect(el.querySelector(".hk-error-landing__desc")!.textContent)
+      .toBe("Cannot read properties of undefined (reading 'length')");
+    // Raw details ride in the JSON tree.
+    expect(el.querySelector(".s-tool-json-tree")).not.toBeNull();
+    expect(errorSpy).toHaveBeenCalled();
+  });
+
+  it("falls back to the default headline when no title is given", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    const el = mountWith(Boom);
+    await nextTick();
+    expect(el.querySelector(".hk-error-landing__title")!.textContent).toBe("Something went wrong");
+  });
+
+  it("honours a custom title override", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    const el = mountWith(Boom, { errorTitle: "发生了错误" });
+    await nextTick();
+    expect(el.querySelector(".hk-error-landing__title")!.textContent).toBe("发生了错误");
+  });
+
+  it("recovers via the retry action", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    const el = mountWith(Boom, { retryLabel: "重试" });
+    await nextTick();
+
+    const buttons = Array.from(el.querySelectorAll<HTMLButtonElement>("button"));
+    const retry = buttons.find((b) => b.textContent === "重试");
+    expect(retry).toBeDefined();
+    retry!.click();
+    await nextTick();
+    // The slot rerender throws again, so the landing stays — but the error
+    // ref was cleared and recaptured (boundary proven by a fresh record).
+    expect(el.querySelector(".hk-error-landing")).not.toBeNull();
+  });
+
+  it("keeps the custom fallback render prop contract", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    const el = mountWith(Boom, {
+      fallback: (err: string, retry: () => void) => h("div", { class: "custom-fallback" }, [err.slice(0, 10), h("button", { onClick: retry }, "go")]),
+    });
+    await nextTick();
+    expect(el.querySelector(".custom-fallback")).not.toBeNull();
+    expect(el.querySelector(".hk-error-landing")).toBeNull();
+  });
+});

package/src/components/HkErrorBoundary.tsx

@@ -1,14 +1,38 @@
-import { Copy, RefreshCw, TriangleAlert as AlertTriangle } from "lucide-vue-next";
-import { defineComponent, onErrorCaptured, ref, type PropType, type VNode } from "vue";
-
-
+import { Copy, RefreshCw } from "lucide-vue-next";
+import { computed, defineComponent, onErrorCaptured, ref, type PropType, type VNode } from "vue";
 
 import { useClipboard } from "../runtime/useClipboard";
 import { useI18n } from "../i18n/context";
 import HButton from "./HkButton";
-import HScrollContainer from "./HkScrollContainer";
-import "./HkErrorBoundary.scss";
+import { HkErrorLanding } from "./HkErrorLanding";
+import { HkJsonTree } from "./HkJsonTree";
+
+interface CapturedError {
+  name: string;
+  message: string;
+  stack: string;
+}
 
+function captureError(err: unknown): CapturedError {
+  if (err instanceof Error) {
+    return { name: err.name || "Error", message: err.message, stack: err.stack || "" };
+  }
+  return { name: "Error", message: String(err), stack: "" };
+}
+
+function formatError(err: CapturedError): string {
+  return err.stack ? `${err.name}: ${err.message}\n\n${err.stack}` : `${err.name}: ${err.message}`;
+}
+
+/**
+ * HkErrorBoundary — inline crash guard rendering the shared error landing.
+ *
+ * Captures descendant errors via `onErrorCaptured` and stops propagation.
+ * The built-in fallback is the same HkErrorLanding card the family's
+ * full-page takeovers use (inline variant): tone icon, headline, the error
+ * name as the code chip, the message as the description, the raw
+ * name/message/stack in a collapsible JSON tree, plus retry / copy actions.
+ */
 export default defineComponent({
   name: "HkErrorBoundary",
   props: {
@@ -21,15 +45,12 @@ export default defineComponent({
   setup(props, { slots }) {
     const clipboard = useClipboard();
     const { t } = useI18n();
-    const error = ref<string | null>(null);
+    const error = ref<CapturedError | null>(null);
 
     onErrorCaptured((err) => {
-      const msg =
-        err instanceof Error
-          ? `${err.name}: ${err.message}\n\n${err.stack || ""}`
-          : String(err);
-      console.error(`[ErrorBoundary:${props.name}]`, msg);
-      error.value = msg;
+      const captured = captureError(err);
+      console.error(`[ErrorBoundary:${props.name}]`, err);
+      error.value = captured;
       return false;
     });
 
@@ -37,48 +58,49 @@ export default defineComponent({
       error.value = null;
     }
 
-    function copyError() {
-      clipboard.copy(error.value!);
-    }
+    const detailsValue = computed(() => {
+      if (!error.value) return undefined;
+      const record: Record<string, unknown> = {
+        name: error.value.name,
+        message: error.value.message,
+      };
+      if (error.value.stack) record.stack = error.value.stack;
+      if (props.name !== "unknown") record.boundary = props.name;
+      return record;
+    });
 
     return () => {
       if (error.value === null) {
         return slots.default?.();
       }
 
+      const err = error.value;
+
       if (props.fallback) {
-        return props.fallback(error.value, retry);
+        return props.fallback(formatError(err), retry);
       }
 
       return (
-        <div class="hk-error-boundary">
-          <div class="hk-error-boundary-card">
-            <div class="hk-error-boundary-header">
-              <AlertTriangle size={16} class="hk-error-boundary-icon" />
-              <span class="hk-error-boundary-label">{props.errorTitle || t("hikari::errorBoundary.title", "Component Error")}</span>
-              {props.name !== "unknown" && (
-                <span class="hk-error-boundary-tag">{props.name}</span>
-              )}
-            </div>
-            <div class="hk-error-boundary-msg">
-              <div style={{ maxHeight: "12rem" }}>
-                <HScrollContainer>
-                  {error.value}
-                </HScrollContainer>
-              </div>
-            </div>
-            <div class="hk-error-boundary-actions">
-              <HButton variant="ghost" size="sm" onClick={copyError}>
-                <Copy size={12} />
-                {props.copyErrorLabel || t("hikari::errorBoundary.copyError", "Copy Error")}
-              </HButton>
-              <HButton variant="outline" size="sm" onClick={retry}>
+        <HkErrorLanding
+          variant="inline"
+          title={props.errorTitle || t("hikari::errors.defaultTitle", "Something went wrong")}
+          description={err.message}
+          code={err.name}
+        >
+          {{
+            default: () => <HkJsonTree value={detailsValue.value} ariaLabel="stack trace" />,
+            actions: () => [
+              <HButton variant="primary" size="sm" onClick={retry}>
                 <RefreshCw size={12} />
                 {props.retryLabel || t("hikari::errorBoundary.retry", "Retry")}
-              </HButton>
-            </div>
-          </div>
-        </div>
+              </HButton>,
+              <HButton variant="ghost" size="sm" onClick={() => clipboard.copy(formatError(err))}>
+                <Copy size={12} />
+                {props.copyErrorLabel || t("hikari::errorBoundary.copyError", "Copy Error")}
+              </HButton>,
+            ],
+          }}
+        </HkErrorLanding>
       );
     };
   },

package/src/components/HkErrorLanding.scss

@@ -181,6 +181,15 @@
   margin-top: var(--space-16, 1rem);
 }
 
+// Inline variant: the same card without the viewport takeover — used when
+// HkErrorBoundary captures a crash inside a pane and swaps in the landing
+// in-place instead of covering the whole screen.
+.hk-error-landing.is-inline {
+  min-height: 0;
+  padding: var(--space-20, 1.25rem) var(--space-12, 0.75rem);
+  background: transparent;
+}
+
 @media (max-width: 480px) {
   .hk-error-landing__card {
     padding: 1.5rem 1.125rem;

package/src/components/HkErrorLanding.test.tsx

@@ -11,6 +11,7 @@ interface MountOptions {
   code?: string;
   status?: number;
   tone?: "error" | "warning" | "info";
+  variant?: "page" | "inline";
   detailsOpen?: boolean;
   details?: () => ReturnType<typeof h>;
   actions?: () => ReturnType<typeof h>;
@@ -28,6 +29,7 @@ function mountLanding(opts: MountOptions = {}) {
         code: opts.code ?? "",
         status: opts.status,
         tone: opts.tone ?? "error",
+        variant: opts.variant ?? "page",
         detailsOpen: opts.detailsOpen ?? true,
       }, {
         ...(opts.details ? { default: opts.details } : {}),
@@ -99,4 +101,10 @@ describe("HkErrorLanding", () => {
     expect(el.querySelector(".fake-action")).not.toBeNull();
     expect(el.querySelector(".fake-brand")).not.toBeNull();
   });
+
+  it("applies the inline variant class without the page backdrop", () => {
+    const el = mountLanding({ variant: "inline", title: "Boom" });
+    const root = el.querySelector(".hk-error-landing")!;
+    expect(root.classList.contains("is-inline")).toBe(true);
+  });
 });

package/src/components/HkErrorLanding.tsx

@@ -7,6 +7,15 @@ import "./HkErrorLanding.scss";
 /** Visual severity of the landing icon and accents. */
 export type HErrorTone = "error" | "warning" | "info";
 
+/**
+ * Layout variant of the landing.
+ * - `page` (default): owns a full-viewport backdrop — for overlays and
+ *   standalone error pages.
+ * - `inline`: drops the backdrop and viewport height so the same card can
+ *   live inside a pane captured by HkErrorBoundary.
+ */
+export type HErrorLandingVariant = "page" | "inline";
+
 /**
  * HkErrorLanding — the shared full-page error landing.
  *
@@ -33,6 +42,8 @@ export const HkErrorLanding = defineComponent({
     /** HTTP status chip, e.g. 400. */
     status: { type: Number, default: undefined },
     tone: { type: String as PropType<HErrorTone>, default: "error" },
+    /** Layout variant: `page` (viewport backdrop) or `inline` (in-flow card). */
+    variant: { type: String as PropType<HErrorLandingVariant>, default: "page" },
     /** Initial expansion of the raw-details section. */
     detailsOpen: { type: Boolean, default: true },
   },
@@ -48,7 +59,7 @@ export const HkErrorLanding = defineComponent({
     }
 
     return () => (
-      <div class={`hk-error-landing is-${props.tone}`}>
+      <div class={`hk-error-landing is-${props.tone}${props.variant === "inline" ? " is-inline" : ""}`}>
         <div class="hk-error-landing__card">
           {slots.brand?.()}
 

package/src/components/HkModal.transition-completion.test.tsx

@@ -0,0 +1,179 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkModal from "./HkModal";
+
+const mounts: ReturnType<typeof createApp>[] = [];
+const containers: HTMLElement[] = [];
+
+afterEach(async () => {
+  for (const app of mounts.splice(0)) app.unmount();
+  for (const el of containers.splice(0)) el.remove();
+  vi.unstubAllGlobals();
+  vi.useRealTimers();
+});
+
+const here = join(dirname(fileURLToPath(import.meta.url)));
+
+/** Freeze rAF entirely: Vue's <Transition> engine double-raf's the
+ *  leave-from → leave-to class flip before it even arms its
+ *  transitionend wait, so a frozen rAF reproduces the occluded-webview
+ *  pathology exactly — the leave can NEVER complete on its own and only
+ *  the component's watchdog can finalize it. */
+function freezeRaf(): void {
+  vi.stubGlobal("requestAnimationFrame", (_cb: FrameRequestCallback) => 0 as unknown as number);
+  vi.stubGlobal("cancelAnimationFrame", () => {});
+}
+
+/** Mount an open modal wired to an `open` ref we can flip from the test. */
+async function mountOpenModal() {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+
+  const open = ref(true);
+  const afterLeaveEvents: number[] = [];
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(HkModal, {
+          modelValue: open.value,
+          closable: true,
+          "onUpdate:modelValue": (v: boolean) => { open.value = v; },
+          onAfterLeave: () => { afterLeaveEvents.push(1); },
+        }, { default: () => h("div", "content") });
+      },
+  });
+  const app = createApp(Wrapper);
+  mounts.push(app);
+  app.mount(container);
+  await nextTick();
+  return { open, afterLeaveEvents };
+}
+
+describe("HkModal leave-completion watchdog", () => {
+  // Regression for the field-reported frozen modal (2026-09): with rAF
+  // starved, the Transition leave can never complete on its own and the
+  // panel used to stay over the page forever — undismissable, only a
+  // full reload escaped it. The watchdog must finalize within its
+  // budget, unmount both surface layers, and emit afterLeave exactly
+  // the way a real transition would.
+  it("force-finalizes a stalled leave within the watchdog budget", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+    const { open, afterLeaveEvents } = await mountOpenModal();
+    expect(document.querySelector(".hk-modal-content")).not.toBeNull();
+
+    open.value = false;
+    await nextTick();
+    // Just inside the budget nothing else can have completed the leave.
+    await vi.advanceTimersByTimeAsync(590);
+    await nextTick();
+    expect(document.querySelector(".hk-modal-content")).not.toBeNull();
+
+    await vi.advanceTimersByTimeAsync(100);
+    await nextTick();
+    expect(document.querySelector(".hk-modal-content")).toBeNull();
+    expect(document.querySelector(".hk-modal-overlay")).toBeNull();
+    expect(afterLeaveEvents).toHaveLength(1);
+  });
+
+  // The finalize flag must reset on reopen: without the reset a second
+  // close after a forced first finalize would be a no-op and the modal
+  // would freeze open forever instead.
+  // Vue resolves an OPEN-INTERRUPTED leave without a cancelled flag: a
+  // reopen patching over a still-live leave fires the old leave's
+  // onAfterLeave. The finalize must bail out while the surface is open
+  // again, or the stale completion kills the freshly reopened modal
+  // (unregisters its handle, unmounts the panel, emits a spurious
+  // afterLeave).
+  it("ignores a stale leave completion firing during reopen", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+    const { open, afterLeaveEvents } = await mountOpenModal();
+
+    open.value = false;
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(50); // leave live, nothing finalized
+    open.value = true; // reopen patches over the live leave
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(700); // past the watchdog budget
+    await nextTick();
+    // The reopened modal must survive both the stale onAfterLeave and
+    // the (disarmed) watchdog from the aborted close.
+    expect(document.querySelector(".hk-modal-content")).not.toBeNull();
+    expect(afterLeaveEvents).toHaveLength(0);
+
+    // And the surface still closes normally afterwards.
+    open.value = false;
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(700);
+    await nextTick();
+    expect(document.querySelector(".hk-modal-content")).toBeNull();
+    expect(afterLeaveEvents).toHaveLength(1);
+  });
+
+  it("re-arms across open/close cycles after a forced finalize", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+    const { open, afterLeaveEvents } = await mountOpenModal();
+
+    open.value = false;
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(700);
+    await nextTick();
+    expect(document.querySelector(".hk-modal-content")).toBeNull();
+    expect(afterLeaveEvents).toHaveLength(1);
+
+    open.value = true;
+    await nextTick();
+    expect(document.querySelector(".hk-modal-content")).not.toBeNull();
+
+    open.value = false;
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(700);
+    await nextTick();
+    expect(document.querySelector(".hk-modal-content")).toBeNull();
+    expect(afterLeaveEvents).toHaveLength(2);
+  });
+
+  // On a healthy surface (real rAF, no transitionend needed — happy-dom
+  // reports no CSS transitions so Vue completes instantly) the real
+  // path owns finalization and the watchdog is a silent no-op: exactly
+  // one afterLeave per close, no duplicates from the pending timer.
+  it("leaves normal completion to the Transition engine without double-emitting", async () => {
+    vi.useFakeTimers();
+    const { open, afterLeaveEvents } = await mountOpenModal();
+
+    open.value = false;
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(700);
+    await nextTick();
+    expect(document.querySelector(".hk-modal-content")).toBeNull();
+    expect(afterLeaveEvents).toHaveLength(1);
+
+    open.value = true;
+    await nextTick();
+    open.value = false;
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(700);
+    await nextTick();
+    expect(afterLeaveEvents).toHaveLength(2);
+  });
+
+  // Contract pin: the watchdog must stay armed on the close path and
+  // its budget must stay bigger than any themed CSS leave
+  // (--hk-modal-duration defaults to 0.25s; a theme may raise it). A
+  // refactor that drops the arming — or shrinks the budget under the
+  // CSS timing — silently re-opens the frozen-modal failure mode.
+  it("pins the watchdog wiring and budget in the source", () => {
+    const src = readFileSync(join(here, "HkModal.tsx"), "utf-8");
+    expect(src).toContain("const LEAVE_WATCHDOG_MS = 600;");
+    expect(src).toContain("if (shouldRender.value) armLeaveWatchdog();");
+    expect(src).toContain("disarmLeaveWatchdog();");
+    expect(src).toContain("onAfterLeaveFinalize();");
+  });
+});

package/src/components/HkModal.tsx

@@ -194,6 +194,41 @@ export default defineComponent({
     let previouslyFocused: HTMLElement | null = null;
     let unmounted = false;
 
+    // ── Leave-completion watchdog ─────────────────────────────────────
+    // The close path hands unmounting to <Transition>'s leave, whose
+    // engine is rAF-driven: it double-raf's the leave-from → leave-to
+    // class flip and only THEN arms its transitionend wait. In an
+    // occluded/backgrounded webview rAF can starve for the whole leave
+    // window, the classes freeze in leave-from/leave-active, and the
+    // modal stays over the page forever — undismissable, only a full
+    // reload escaped it (field-reported 2026-09). The watchdog bounds
+    // the wait: if the leave has not finalized within a budget larger
+    // than any themed CSS leave (--hk-modal-duration defaults to 0.25s,
+    // themes may raise it), onAfterLeaveFinalize runs the exact same
+    // finalization the Transition would have. Normal closes disarm it;
+    // late or stale completions (post-watchdog real onAfterLeave, or
+    // the open-interrupted leave Vue resolves without a cancelled flag)
+    // are no-ops through the finalize and modelValue guards.
+    const LEAVE_WATCHDOG_MS = 600;
+    let leaveWatchdog: ReturnType<typeof setTimeout> | null = null;
+    let leaveFinalized = false;
+
+    function armLeaveWatchdog(): void {
+      disarmLeaveWatchdog();
+      leaveWatchdog = setTimeout(() => {
+        leaveWatchdog = null;
+        if (unmounted || props.modelValue || !shouldRender.value) return;
+        onAfterLeaveFinalize();
+      }, LEAVE_WATCHDOG_MS);
+    }
+
+    function disarmLeaveWatchdog(): void {
+      if (leaveWatchdog !== null) {
+        clearTimeout(leaveWatchdog);
+        leaveWatchdog = null;
+      }
+    }
+
     const overlayZ = computed(() => handle.value?.zIndex ?? 0);
     const contentZ = computed(() => (handle.value?.zIndex ?? 0) + 1);
     const resolvedWidth = computed(() => resolveModalWidth(props.width));
@@ -275,7 +310,15 @@ export default defineComponent({
       }
     }
 
-    function onAfterLeave() {
+    function onAfterLeaveFinalize() {
+      // Finalizing while the surface is OPEN means this is a stale
+      // completion: Vue fires the interrupted leave's onAfterLeave (no
+      // cancelled flag) when a reopen patches over a still-live leave,
+      // and the watchdog callback separately guards on props.modelValue.
+      // Finalizing either of those would tear down the reopened modal.
+      if (unmounted || props.modelValue || leaveFinalized) return;
+      leaveFinalized = true;
+      disarmLeaveWatchdog();
       if (handle.value) {
         manager.unregister(handle.value.id);
         handle.value = null;
@@ -580,6 +623,8 @@ export default defineComponent({
           if (handle.value) {
             manager.unregister(handle.value.id);
           }
+          leaveFinalized = false;
+          disarmLeaveWatchdog();
           shouldRender.value = true;
           // Windows always block, so the kind alone lists this layer in
           // the modal-stack breadcrumb on every form factor.
@@ -594,6 +639,12 @@ export default defineComponent({
           // (e.g. immediate), clean up now.
           overlay.close();
           backGuard.release();
+          // Bound the Transition leave: if rAF starvation froze the
+          // class flip, the watchdog finalizes in the watchdog's place
+          // (see LEAVE_WATCHDOG_MS above). Only an actually-mounted
+          // surface can stall — a never-opened modal has nothing to
+          // finalize.
+          if (shouldRender.value) armLeaveWatchdog();
         }
       },
       { immediate: true },
@@ -626,6 +677,7 @@ export default defineComponent({
 
     onBeforeUnmount(() => {
       unmounted = true;
+      disarmLeaveWatchdog();
       detachBodyScrollbar();
       teardownWindowed();
       teardownAutoFollow();
@@ -709,7 +761,7 @@ export default defineComponent({
               }}
               onAfterLeave={() => {
                 contentHooks.onAfterLeave();
-                onAfterLeave();
+                onAfterLeaveFinalize();
               }}
             >
               {props.modelValue && (

package/src/errorReporting/HkErrorReportingOverlay.scss

@@ -0,0 +1,9 @@
+// HkErrorReportingOverlay — fixed full-viewport host for the error landing.
+// Sits above every popup band (modal 1000 / dropdown 2000 / tooltip 3000 /
+// toast 4000): an uncaught-error takeover must never be covered.
+
+.hk-error-reporting-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 5000;
+}