Screen wake lock

import { ScreenWakeLock } from "@bosunkit/components/screen-wake-lock";
import type { ReactElement } from "react";

export const description: string =
  "A deck tablet showing the alert zone keeps its screen on while the page is visible: the component draws nothing, the lock is the effect.";

export default function Deck(): ReactElement {
  return (
    <div style={{ display: "grid", gap: "var(--space-xs)", justifyItems: "start" }}>
      <ScreenWakeLock />
      <span>The screen stays on while this page is visible.</span>
    </div>
  );
}

ScreenWakeLock keeps the screen on while it is mounted: a deck tablet showing the console or the alert zone stays awake rather than sleeping, so an alarm is seen. It draws nothing — the lock itself is the effect, which is why the page shows the words beside it.

The browser releases its own lock when the tab hides, so the component asks for it again when the page becomes visible again, and releases it when active turns off or the component unmounts. The Screen Wake Lock API needs a secure context — HTTPS, which the vessel network provides; where the browser has no wake lock, the component does nothing.

Best-effort display behavior

Mount the component only for a view whose purpose requires the screen to remain awake. Wake-lock support, permissions and device power policy can prevent a request from succeeding. The component does not certify that a display will remain on, restore a lost connection or replace the vessel's alert delivery.

Test backgrounding the tab, returning to it, switching the feature off and leaving the screen. Provide operating instructions appropriate to the actual device when continuous display availability matters. A static report or ordinary reading page should not keep a device awake merely because it includes an instrument illustration.

Props