@etamong-playground/ui 0.34.2

package/dist/testing.cjs

@@ -0,0 +1,185 @@
+'use strict';
+
+var msw = require('msw');
+var test = require('@playwright/test');
+
+// src/testing-viewport-fit.ts
+var VIEWPORT_FIT_WARN_PREFIX = "[@etamong-playground/ui]";
+var FLEET_VIEWPORT_PROFILES = [
+  {
+    name: "iphone-17-pro-pwa",
+    viewport: { width: 402, height: 874 },
+    standalone: true,
+    safeAreaTop: 59,
+    safeAreaBottom: 34
+  },
+  {
+    name: "ipad-mini-portrait",
+    viewport: { width: 768, height: 1024 }
+  },
+  {
+    name: "desktop-1280",
+    viewport: { width: 1280, height: 800 }
+  },
+  {
+    name: "android-narrow",
+    viewport: { width: 360, height: 780 }
+  }
+];
+async function assertViewportFit(page, urls, options = {}) {
+  const profiles = options.profiles && options.profiles.length ? options.profiles : FLEET_VIEWPORT_PROFILES;
+  const settleMs = options.settleMs ?? 400;
+  const predicate = options.predicate ?? ((msg) => msg.type() === "warning" && msg.text().startsWith(VIEWPORT_FIT_WARN_PREFIX));
+  const collected = [];
+  const onConsole = (msg) => {
+    if (predicate(msg)) collected.push(msg.text());
+  };
+  page.on("console", onConsole);
+  try {
+    for (const profile of profiles) {
+      await page.setViewportSize(profile.viewport);
+      if (profile.standalone) {
+        await page.emulateMedia({ media: "screen", colorScheme: "no-preference" });
+        await page.addInitScript(() => {
+          const origMatchMedia = window.matchMedia;
+          window.matchMedia = (q) => {
+            if (q.includes("display-mode: standalone")) {
+              return {
+                matches: true,
+                media: q,
+                onchange: null,
+                addListener: () => {
+                },
+                removeListener: () => {
+                },
+                addEventListener: () => {
+                },
+                removeEventListener: () => {
+                },
+                dispatchEvent: () => true
+              };
+            }
+            return origMatchMedia.call(window, q);
+          };
+          Object.defineProperty(navigator, "standalone", {
+            configurable: true,
+            value: true
+          });
+        });
+      }
+      if (profile.safeAreaTop != null || profile.safeAreaBottom != null) {
+        const top = profile.safeAreaTop ?? 0;
+        const bot = profile.safeAreaBottom ?? 0;
+        await page.addInitScript(
+          (insets) => {
+            const style = document.createElement("style");
+            style.textContent = `:root {
+              --etu-test-safe-top: ${insets.top}px;
+              --etu-test-safe-bot: ${insets.bot}px;
+            }
+            /* Stub env() so the browser sees a real inset value during
+               headless testing. CSS @supports cannot polyfill env(), so
+               apps that want this assertion to run under emulated
+               notched insets must use the .etu-test-safe-top/bot custom
+               properties instead of env() in tests \u2014 or apps can keep
+               env() and accept that desktop Chromium reports 0.        */
+          `;
+            document.head.appendChild(style);
+          },
+          { top, bot }
+        );
+      }
+      for (const url of urls) {
+        collected.length = 0;
+        await page.goto(url, { waitUntil: "networkidle" });
+        await page.waitForTimeout(settleMs);
+        if (collected.length > 0) {
+          throw new Error(
+            `viewport-fit assertion failed at ${profile.name} on ${url}:
+` + collected.map((l) => "  - " + l).join("\n")
+          );
+        }
+      }
+    }
+  } finally {
+    page.off("console", onConsole);
+  }
+}
+function defineViewportFitTests(test, options) {
+  const profiles = options.profiles && options.profiles.length ? options.profiles : FLEET_VIEWPORT_PROFILES;
+  const prefix = options.titlePrefix ?? "viewport-fit";
+  for (const profile of profiles) {
+    test(`${prefix} \u2014 ${profile.name}`, async (args) => {
+      if (options.beforeEach) await options.beforeEach(args);
+      await assertViewportFit(args.page, options.urls, {
+        profiles: [profile]
+      });
+    });
+  }
+}
+function mockHttperrRef() {
+  const b = new Uint8Array(4);
+  if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+    crypto.getRandomValues(b);
+  } else {
+    for (let i = 0; i < 4; i++) b[i] = Math.floor(Math.random() * 256);
+  }
+  return Array.from(b).map((x) => x.toString(16).padStart(2, "0")).join("");
+}
+function httperrBody(message, ref) {
+  return { error: message, ref: ref ?? mockHttperrRef() };
+}
+function createMeHandler(me = {}, path = "/api/v1/me") {
+  const body = {
+    email: me.email ?? "you@etamong.com",
+    is_admin: me.is_admin ?? false,
+    via_token: me.via_token ?? false,
+    can_create_apps: me.can_create_apps ?? false
+  };
+  return msw.http.get(path, () => msw.HttpResponse.json(body));
+}
+function createMeSignedOutHandler(path = "/api/v1/me") {
+  return msw.http.get(
+    path,
+    () => msw.HttpResponse.json(httperrBody("not signed in"), { status: 401 })
+  );
+}
+function createHealthzHandler(path = "/healthz") {
+  return msw.http.get(path, () => new msw.HttpResponse("ok", { status: 200 }));
+}
+function defaultMockHandlers(me = {}, paths = {}) {
+  return [createMeHandler(me, paths.me), createHealthzHandler(paths.healthz)];
+}
+var fleetTest = test.test.extend({
+  // eslint-disable-next-line no-empty-pattern
+  fleetPage: async ({ page }, use) => {
+    await use(page);
+  },
+  page: async ({ browser }, use) => {
+    const context = await browser.newContext({
+      locale: "ko-KR",
+      timezoneId: "Asia/Seoul",
+      viewport: { width: 1280, height: 800 },
+      extraHTTPHeaders: { "Accept-Language": "ko-KR" }
+    });
+    const page = await context.newPage();
+    try {
+      await use(page);
+    } finally {
+      await page.close();
+      await context.close();
+    }
+  }
+});
+
+exports.FLEET_VIEWPORT_PROFILES = FLEET_VIEWPORT_PROFILES;
+exports.VIEWPORT_FIT_WARN_PREFIX = VIEWPORT_FIT_WARN_PREFIX;
+exports.assertViewportFit = assertViewportFit;
+exports.createHealthzHandler = createHealthzHandler;
+exports.createMeHandler = createMeHandler;
+exports.createMeSignedOutHandler = createMeSignedOutHandler;
+exports.defaultMockHandlers = defaultMockHandlers;
+exports.defineViewportFitTests = defineViewportFitTests;
+exports.fleetTest = fleetTest;
+exports.httperrBody = httperrBody;
+exports.mockHttperrRef = mockHttperrRef;

package/dist/testing.d.cts

@@ -0,0 +1,166 @@
+import * as _playwright_test from '@playwright/test';
+import { ConsoleMessage, PlaywrightTestArgs, Page } from '@playwright/test';
+export { Page, PlaywrightTestArgs, PlaywrightTestConfig } from '@playwright/test';
+import { HttpHandler } from 'msw';
+
+/**
+ * Playwright helpers for the fleet viewport-fit assertions.
+ *
+ * The chrome primitives (`<NavigationBar>` v0.28.1+, MobileTabBar/Sidebar
+ * to follow) emit dev-mode `console.warn` lines prefixed with
+ * `[@etamong-playground/ui]` when layout breaks (off-screen bar, shrunk title,
+ * stacked safe-area-top). This module lifts the dev-mode signal into a
+ * CI gate.
+ *
+ *   1. Apps add a Playwright spec that calls `assertViewportFit(page,
+ *      urls)`.
+ *   2. CI runs it at each fleet device profile (mobile/tablet/desktop +
+ *      iPhone-Pro-PWA).
+ *   3. Any `[@etamong-playground/ui]` warning fails the test with the original
+ *      message — so the diagnosis is the same one the developer would
+ *      have seen at localhost.
+ *
+ * Peer dependency: `@playwright/test` (peer, not bundled). Apps that
+ * don't run e2e simply don't import this entry; nothing is pulled.
+ *
+ * See planning wiki: concepts/viewport-fit-assertions.md.
+ */
+
+/** Marker the chrome primitives prefix every layout warning with. */
+declare const VIEWPORT_FIT_WARN_PREFIX = "[@etamong-playground/ui]";
+/**
+ * Canonical device profiles to drive viewport-fit checks at. These
+ * cover the four corners the regression has historically slipped past:
+ * iPhone Pro PWA (notch, narrow), iPad Mini (tablet rail boundary),
+ * desktop (sidebar), small Android (mobile tab bar).
+ *
+ * Names match Playwright's `devices` map where possible so apps can
+ * also reuse the profile directly.
+ */
+interface DeviceProfile {
+    name: string;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** When true, set the page to standalone-display-mode for iOS PWA. */
+    standalone?: boolean;
+    /** Emulate notched device safe-area-insets via a meta tag patch. */
+    safeAreaTop?: number;
+    safeAreaBottom?: number;
+}
+declare const FLEET_VIEWPORT_PROFILES: DeviceProfile[];
+interface AssertViewportFitOptions {
+    /**
+     * Profiles to iterate. Default: `FLEET_VIEWPORT_PROFILES`. Pass an
+     * empty array to run only the currently-set page viewport.
+     */
+    profiles?: DeviceProfile[];
+    /**
+     * Extra time (ms) to settle after navigation before reading the
+     * captured warnings. Default 400 — gives the primitive's two
+     * `requestAnimationFrame` ticks plus a buffer for `env()` to apply.
+     */
+    settleMs?: number;
+    /**
+     * Additional console-message predicate. Default matches anything
+     * starting with `[@etamong-playground/ui]`.
+     */
+    predicate?: (msg: ConsoleMessage) => boolean;
+}
+/**
+ * Open each URL at each profile and assert no chrome primitive emitted
+ * a `[@etamong-playground/ui]` warning. The first violation throws with the
+ * original message — the failing test's stack carries the URL + profile.
+ */
+declare function assertViewportFit(page: Page, urls: string[], options?: AssertViewportFitOptions): Promise<void>;
+/**
+ * Convenience: a Playwright test that wraps `assertViewportFit` and
+ * fans out across profiles as separate test cases (so the failure
+ * report names the profile). Apps wire this in their `tests/` dir as:
+ *
+ * ```ts
+ * import { defineViewportFitTests } from "@etamong-playground/ui/testing";
+ * defineViewportFitTests({
+ *   urls: ["/", "/settings", "/me"],
+ *   beforeEach: async ({ page }) => { /* auth, mocks */ interface DefineViewportFitTestsOptions {
+    urls: string[];
+    profiles?: DeviceProfile[];
+    beforeEach?: (args: PlaywrightTestArgs) => Promise<void> | void;
+    /** Optional title prefix. Default: "viewport-fit". */
+    titlePrefix?: string;
+}
+declare function defineViewportFitTests(test: any, options: DefineViewportFitTestsOptions): void;
+
+/**
+ * Cross-app MSW helpers. Optional — apps that use a different mock layer
+ * don't pull `msw` in (it's a peer dep).
+ *
+ * Two contracts every etamong-lab webui shares:
+ *
+ *   1. `/me` from oauth2-proxy/Authentik returns `{email, is_admin, ...}`.
+ *   2. Errors carry `{error, ref}` per `@etamong-lab/httperr`. Tests want a
+ *      one-liner to produce a realistic failure.
+ *
+ * Both live here so a per-app `handlers.ts` only encodes the app's own
+ * surface, not these standard shapes.
+ */
+
+/** Random 8-hex ref, matching the httperr server-side format. */
+declare function mockHttperrRef(): string;
+/**
+ * httperr-shaped error body. Pass to `HttpResponse.json` with the desired
+ * status so MSW returns the same shape as the real apiserver.
+ */
+declare function httperrBody(message: string, ref?: string): {
+    error: string;
+    ref: string;
+};
+interface MockMe {
+    email?: string;
+    is_admin?: boolean;
+    via_token?: boolean;
+    can_create_apps?: boolean;
+}
+/**
+ * `/me` handler at the standard fleet path. Pass any subset of fields; the
+ * rest fall back to sensible test defaults.
+ */
+declare function createMeHandler(me?: MockMe, path?: string): HttpHandler;
+/**
+ * `/me` that returns the oauth2-proxy "not signed in" 401, so the webui's
+ * sign-in flow renders.
+ */
+declare function createMeSignedOutHandler(path?: string): HttpHandler;
+/**
+ * Default healthz — every fleet apiserver exposes one and tests often hit it
+ * in setup teardown.
+ */
+declare function createHealthzHandler(path?: string): HttpHandler;
+/**
+ * Convenience bundle: `/me` (signed-in by default) + `/healthz`. The first
+ * call site usually wants both; pass overrides as needed.
+ */
+declare function defaultMockHandlers(me?: MockMe, paths?: {
+    me?: string;
+    healthz?: string;
+}): HttpHandler[];
+
+interface FleetFixtures {
+    /** Hook called once per test; passed the page after locale/viewport setup. */
+    fleetPage: Page;
+}
+/**
+ * Extended Playwright `test` that:
+ *   - sets `Accept-Language: ko-KR` and locale ko-KR (matches the production
+ *     i18n default per planning concept fleet-language-policy)
+ *   - sets timezone to Asia/Seoul so date assertions are stable
+ *   - sets a 1280×800 desktop viewport unless the test overrides it
+ *
+ * Use:
+ *   import { fleetTest as test } from "@etamong-playground/ui/testing";
+ *   test("works", async ({ page }) => { ... });
+ */
+declare const fleetTest: _playwright_test.TestType<PlaywrightTestArgs & _playwright_test.PlaywrightTestOptions & FleetFixtures, _playwright_test.PlaywrightWorkerArgs & _playwright_test.PlaywrightWorkerOptions>;
+
+export { type AssertViewportFitOptions, type DefineViewportFitTestsOptions, type DeviceProfile, FLEET_VIEWPORT_PROFILES, type FleetFixtures, type MockMe, VIEWPORT_FIT_WARN_PREFIX, assertViewportFit, createHealthzHandler, createMeHandler, createMeSignedOutHandler, defaultMockHandlers, defineViewportFitTests, fleetTest, httperrBody, mockHttperrRef };

package/dist/testing.d.ts

@@ -0,0 +1,166 @@
+import * as _playwright_test from '@playwright/test';
+import { ConsoleMessage, PlaywrightTestArgs, Page } from '@playwright/test';
+export { Page, PlaywrightTestArgs, PlaywrightTestConfig } from '@playwright/test';
+import { HttpHandler } from 'msw';
+
+/**
+ * Playwright helpers for the fleet viewport-fit assertions.
+ *
+ * The chrome primitives (`<NavigationBar>` v0.28.1+, MobileTabBar/Sidebar
+ * to follow) emit dev-mode `console.warn` lines prefixed with
+ * `[@etamong-playground/ui]` when layout breaks (off-screen bar, shrunk title,
+ * stacked safe-area-top). This module lifts the dev-mode signal into a
+ * CI gate.
+ *
+ *   1. Apps add a Playwright spec that calls `assertViewportFit(page,
+ *      urls)`.
+ *   2. CI runs it at each fleet device profile (mobile/tablet/desktop +
+ *      iPhone-Pro-PWA).
+ *   3. Any `[@etamong-playground/ui]` warning fails the test with the original
+ *      message — so the diagnosis is the same one the developer would
+ *      have seen at localhost.
+ *
+ * Peer dependency: `@playwright/test` (peer, not bundled). Apps that
+ * don't run e2e simply don't import this entry; nothing is pulled.
+ *
+ * See planning wiki: concepts/viewport-fit-assertions.md.
+ */
+
+/** Marker the chrome primitives prefix every layout warning with. */
+declare const VIEWPORT_FIT_WARN_PREFIX = "[@etamong-playground/ui]";
+/**
+ * Canonical device profiles to drive viewport-fit checks at. These
+ * cover the four corners the regression has historically slipped past:
+ * iPhone Pro PWA (notch, narrow), iPad Mini (tablet rail boundary),
+ * desktop (sidebar), small Android (mobile tab bar).
+ *
+ * Names match Playwright's `devices` map where possible so apps can
+ * also reuse the profile directly.
+ */
+interface DeviceProfile {
+    name: string;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** When true, set the page to standalone-display-mode for iOS PWA. */
+    standalone?: boolean;
+    /** Emulate notched device safe-area-insets via a meta tag patch. */
+    safeAreaTop?: number;
+    safeAreaBottom?: number;
+}
+declare const FLEET_VIEWPORT_PROFILES: DeviceProfile[];
+interface AssertViewportFitOptions {
+    /**
+     * Profiles to iterate. Default: `FLEET_VIEWPORT_PROFILES`. Pass an
+     * empty array to run only the currently-set page viewport.
+     */
+    profiles?: DeviceProfile[];
+    /**
+     * Extra time (ms) to settle after navigation before reading the
+     * captured warnings. Default 400 — gives the primitive's two
+     * `requestAnimationFrame` ticks plus a buffer for `env()` to apply.
+     */
+    settleMs?: number;
+    /**
+     * Additional console-message predicate. Default matches anything
+     * starting with `[@etamong-playground/ui]`.
+     */
+    predicate?: (msg: ConsoleMessage) => boolean;
+}
+/**
+ * Open each URL at each profile and assert no chrome primitive emitted
+ * a `[@etamong-playground/ui]` warning. The first violation throws with the
+ * original message — the failing test's stack carries the URL + profile.
+ */
+declare function assertViewportFit(page: Page, urls: string[], options?: AssertViewportFitOptions): Promise<void>;
+/**
+ * Convenience: a Playwright test that wraps `assertViewportFit` and
+ * fans out across profiles as separate test cases (so the failure
+ * report names the profile). Apps wire this in their `tests/` dir as:
+ *
+ * ```ts
+ * import { defineViewportFitTests } from "@etamong-playground/ui/testing";
+ * defineViewportFitTests({
+ *   urls: ["/", "/settings", "/me"],
+ *   beforeEach: async ({ page }) => { /* auth, mocks */ interface DefineViewportFitTestsOptions {
+    urls: string[];
+    profiles?: DeviceProfile[];
+    beforeEach?: (args: PlaywrightTestArgs) => Promise<void> | void;
+    /** Optional title prefix. Default: "viewport-fit". */
+    titlePrefix?: string;
+}
+declare function defineViewportFitTests(test: any, options: DefineViewportFitTestsOptions): void;
+
+/**
+ * Cross-app MSW helpers. Optional — apps that use a different mock layer
+ * don't pull `msw` in (it's a peer dep).
+ *
+ * Two contracts every etamong-lab webui shares:
+ *
+ *   1. `/me` from oauth2-proxy/Authentik returns `{email, is_admin, ...}`.
+ *   2. Errors carry `{error, ref}` per `@etamong-lab/httperr`. Tests want a
+ *      one-liner to produce a realistic failure.
+ *
+ * Both live here so a per-app `handlers.ts` only encodes the app's own
+ * surface, not these standard shapes.
+ */
+
+/** Random 8-hex ref, matching the httperr server-side format. */
+declare function mockHttperrRef(): string;
+/**
+ * httperr-shaped error body. Pass to `HttpResponse.json` with the desired
+ * status so MSW returns the same shape as the real apiserver.
+ */
+declare function httperrBody(message: string, ref?: string): {
+    error: string;
+    ref: string;
+};
+interface MockMe {
+    email?: string;
+    is_admin?: boolean;
+    via_token?: boolean;
+    can_create_apps?: boolean;
+}
+/**
+ * `/me` handler at the standard fleet path. Pass any subset of fields; the
+ * rest fall back to sensible test defaults.
+ */
+declare function createMeHandler(me?: MockMe, path?: string): HttpHandler;
+/**
+ * `/me` that returns the oauth2-proxy "not signed in" 401, so the webui's
+ * sign-in flow renders.
+ */
+declare function createMeSignedOutHandler(path?: string): HttpHandler;
+/**
+ * Default healthz — every fleet apiserver exposes one and tests often hit it
+ * in setup teardown.
+ */
+declare function createHealthzHandler(path?: string): HttpHandler;
+/**
+ * Convenience bundle: `/me` (signed-in by default) + `/healthz`. The first
+ * call site usually wants both; pass overrides as needed.
+ */
+declare function defaultMockHandlers(me?: MockMe, paths?: {
+    me?: string;
+    healthz?: string;
+}): HttpHandler[];
+
+interface FleetFixtures {
+    /** Hook called once per test; passed the page after locale/viewport setup. */
+    fleetPage: Page;
+}
+/**
+ * Extended Playwright `test` that:
+ *   - sets `Accept-Language: ko-KR` and locale ko-KR (matches the production
+ *     i18n default per planning concept fleet-language-policy)
+ *   - sets timezone to Asia/Seoul so date assertions are stable
+ *   - sets a 1280×800 desktop viewport unless the test overrides it
+ *
+ * Use:
+ *   import { fleetTest as test } from "@etamong-playground/ui/testing";
+ *   test("works", async ({ page }) => { ... });
+ */
+declare const fleetTest: _playwright_test.TestType<PlaywrightTestArgs & _playwright_test.PlaywrightTestOptions & FleetFixtures, _playwright_test.PlaywrightWorkerArgs & _playwright_test.PlaywrightWorkerOptions>;
+
+export { type AssertViewportFitOptions, type DefineViewportFitTestsOptions, type DeviceProfile, FLEET_VIEWPORT_PROFILES, type FleetFixtures, type MockMe, VIEWPORT_FIT_WARN_PREFIX, assertViewportFit, createHealthzHandler, createMeHandler, createMeSignedOutHandler, defaultMockHandlers, defineViewportFitTests, fleetTest, httperrBody, mockHttperrRef };

package/dist/testing.js

@@ -0,0 +1,173 @@
+import { http, HttpResponse } from 'msw';
+import { test } from '@playwright/test';
+
+// src/testing-viewport-fit.ts
+var VIEWPORT_FIT_WARN_PREFIX = "[@etamong-playground/ui]";
+var FLEET_VIEWPORT_PROFILES = [
+  {
+    name: "iphone-17-pro-pwa",
+    viewport: { width: 402, height: 874 },
+    standalone: true,
+    safeAreaTop: 59,
+    safeAreaBottom: 34
+  },
+  {
+    name: "ipad-mini-portrait",
+    viewport: { width: 768, height: 1024 }
+  },
+  {
+    name: "desktop-1280",
+    viewport: { width: 1280, height: 800 }
+  },
+  {
+    name: "android-narrow",
+    viewport: { width: 360, height: 780 }
+  }
+];
+async function assertViewportFit(page, urls, options = {}) {
+  const profiles = options.profiles && options.profiles.length ? options.profiles : FLEET_VIEWPORT_PROFILES;
+  const settleMs = options.settleMs ?? 400;
+  const predicate = options.predicate ?? ((msg) => msg.type() === "warning" && msg.text().startsWith(VIEWPORT_FIT_WARN_PREFIX));
+  const collected = [];
+  const onConsole = (msg) => {
+    if (predicate(msg)) collected.push(msg.text());
+  };
+  page.on("console", onConsole);
+  try {
+    for (const profile of profiles) {
+      await page.setViewportSize(profile.viewport);
+      if (profile.standalone) {
+        await page.emulateMedia({ media: "screen", colorScheme: "no-preference" });
+        await page.addInitScript(() => {
+          const origMatchMedia = window.matchMedia;
+          window.matchMedia = (q) => {
+            if (q.includes("display-mode: standalone")) {
+              return {
+                matches: true,
+                media: q,
+                onchange: null,
+                addListener: () => {
+                },
+                removeListener: () => {
+                },
+                addEventListener: () => {
+                },
+                removeEventListener: () => {
+                },
+                dispatchEvent: () => true
+              };
+            }
+            return origMatchMedia.call(window, q);
+          };
+          Object.defineProperty(navigator, "standalone", {
+            configurable: true,
+            value: true
+          });
+        });
+      }
+      if (profile.safeAreaTop != null || profile.safeAreaBottom != null) {
+        const top = profile.safeAreaTop ?? 0;
+        const bot = profile.safeAreaBottom ?? 0;
+        await page.addInitScript(
+          (insets) => {
+            const style = document.createElement("style");
+            style.textContent = `:root {
+              --etu-test-safe-top: ${insets.top}px;
+              --etu-test-safe-bot: ${insets.bot}px;
+            }
+            /* Stub env() so the browser sees a real inset value during
+               headless testing. CSS @supports cannot polyfill env(), so
+               apps that want this assertion to run under emulated
+               notched insets must use the .etu-test-safe-top/bot custom
+               properties instead of env() in tests \u2014 or apps can keep
+               env() and accept that desktop Chromium reports 0.        */
+          `;
+            document.head.appendChild(style);
+          },
+          { top, bot }
+        );
+      }
+      for (const url of urls) {
+        collected.length = 0;
+        await page.goto(url, { waitUntil: "networkidle" });
+        await page.waitForTimeout(settleMs);
+        if (collected.length > 0) {
+          throw new Error(
+            `viewport-fit assertion failed at ${profile.name} on ${url}:
+` + collected.map((l) => "  - " + l).join("\n")
+          );
+        }
+      }
+    }
+  } finally {
+    page.off("console", onConsole);
+  }
+}
+function defineViewportFitTests(test, options) {
+  const profiles = options.profiles && options.profiles.length ? options.profiles : FLEET_VIEWPORT_PROFILES;
+  const prefix = options.titlePrefix ?? "viewport-fit";
+  for (const profile of profiles) {
+    test(`${prefix} \u2014 ${profile.name}`, async (args) => {
+      if (options.beforeEach) await options.beforeEach(args);
+      await assertViewportFit(args.page, options.urls, {
+        profiles: [profile]
+      });
+    });
+  }
+}
+function mockHttperrRef() {
+  const b = new Uint8Array(4);
+  if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+    crypto.getRandomValues(b);
+  } else {
+    for (let i = 0; i < 4; i++) b[i] = Math.floor(Math.random() * 256);
+  }
+  return Array.from(b).map((x) => x.toString(16).padStart(2, "0")).join("");
+}
+function httperrBody(message, ref) {
+  return { error: message, ref: ref ?? mockHttperrRef() };
+}
+function createMeHandler(me = {}, path = "/api/v1/me") {
+  const body = {
+    email: me.email ?? "you@etamong.com",
+    is_admin: me.is_admin ?? false,
+    via_token: me.via_token ?? false,
+    can_create_apps: me.can_create_apps ?? false
+  };
+  return http.get(path, () => HttpResponse.json(body));
+}
+function createMeSignedOutHandler(path = "/api/v1/me") {
+  return http.get(
+    path,
+    () => HttpResponse.json(httperrBody("not signed in"), { status: 401 })
+  );
+}
+function createHealthzHandler(path = "/healthz") {
+  return http.get(path, () => new HttpResponse("ok", { status: 200 }));
+}
+function defaultMockHandlers(me = {}, paths = {}) {
+  return [createMeHandler(me, paths.me), createHealthzHandler(paths.healthz)];
+}
+var fleetTest = test.extend({
+  // eslint-disable-next-line no-empty-pattern
+  fleetPage: async ({ page }, use) => {
+    await use(page);
+  },
+  page: async ({ browser }, use) => {
+    const context = await browser.newContext({
+      locale: "ko-KR",
+      timezoneId: "Asia/Seoul",
+      viewport: { width: 1280, height: 800 },
+      extraHTTPHeaders: { "Accept-Language": "ko-KR" }
+    });
+    const page = await context.newPage();
+    try {
+      await use(page);
+    } finally {
+      await page.close();
+      await context.close();
+    }
+  }
+});
+
+export { FLEET_VIEWPORT_PROFILES, VIEWPORT_FIT_WARN_PREFIX, assertViewportFit, createHealthzHandler, createMeHandler, createMeSignedOutHandler, defaultMockHandlers, defineViewportFitTests, fleetTest, httperrBody, mockHttperrRef };