@antelopejs/dms 0.8.2 → 0.9.0

package/frontend-vue/tests/page-no-visible-blocks.test.ts

@@ -21,6 +21,16 @@ import {
   usePageFillHeight,
 } from "../layers/dms-layout/app/composables/layout/usePageFillHeight";
 
+// The page's data refresh and the visit's navigation badges read the
+// realtime session and Inertia's page, which these tests do not run.
+vi.mock(
+  "../layers/dms-ui/app/build/composables/live/usePageDataRefresh",
+  () => ({ usePageDataRefresh: () => {} }),
+);
+vi.mock(
+  "../layers/dms-layout/app/build/composables/navigation/useVisitNavBadges",
+  () => ({ useVisitNavBadges: () => {} }),
+);
 vi.mock(
   "../layers/dms-layout/app/build/composables/dev-reload/useDevReloadHolder",
   async () => {
@@ -73,7 +83,7 @@ function installRuntime(): void {
     PAGE_FILL_HEIGHT_CLASSES,
     providePageFillHeight,
     usePageFillHeight,
-    createError: vi.fn(),
+    createDmsError: vi.fn(),
     defineDmsPageMeta: vi.fn(),
     firstAccessiblePagePath: vi.fn(),
     navigateDms,
@@ -81,7 +91,7 @@ function installRuntime(): void {
     providePageRealtime: vi.fn(),
     resolveDmsComponent: () => "div",
     runCustomValidation: vi.fn(),
-    showError: vi.fn(),
+    showDmsError: vi.fn(),
     validateRequiredQueryParams: vi.fn(),
     useDefinedFunctions: () => ({ getFunction: () => undefined }),
     useDmsRoute: () => ({ path: "/examples/overview", query: {} }),

package/frontend-vue/tests/page-realtime-remount.test.ts

@@ -101,7 +101,7 @@ beforeEach(async () => {
   vi.stubGlobal("useDmsRuntimeConfig", () => ({
     public: { dms: { baseURL: BASE_URL } },
   }));
-  vi.stubGlobal("useUserSession", () => ({ loggedIn }));
+  vi.stubGlobal("useDmsUserSession", () => ({ loggedIn }));
   vi.stubGlobal("useSessionRecovery", () => ({
     refreshSession: async () => true,
     redirectToAuth: async () => {},

package/frontend-vue/tests/page-record-label.test.ts

@@ -18,9 +18,6 @@ vi.stubGlobal("useDmsState", <T>(key: string, init?: () => T): Ref<T> => {
 const { usePageRecordLabel } = await import(
   "../layers/dms-core/app/composables/page/usePageRecordLabel"
 );
-const legacy = await import(
-  "../layers/dms-core/app/build/composables/page/usePageRecordLabel"
-);
 
 beforeEach(() => {
   sharedState = new Map();
@@ -47,7 +44,3 @@ it("never shows a label on another page, and clears with no value", () => {
   setLabel(route.path, undefined);
   expect(label.value).toBeUndefined();
 });
-
-it("stays importable from its former internal path", () => {
-  expect(legacy.usePageRecordLabel).toBe(usePageRecordLabel);
-});

package/frontend-vue/tests/page-validation-redirect.test.ts

@@ -27,6 +27,16 @@ import {
 } from "../layers/dms-layout/app/composables/layout/usePageFillHeight";
 import type { PageValidation } from "../layers/dms-layout/app/types/page";
 
+// The page's data refresh and the visit's navigation badges read the
+// realtime session and Inertia's page, which these tests do not run.
+vi.mock(
+  "../layers/dms-ui/app/build/composables/live/usePageDataRefresh",
+  () => ({ usePageDataRefresh: () => {} }),
+);
+vi.mock(
+  "../layers/dms-layout/app/build/composables/navigation/useVisitNavBadges",
+  () => ({ useVisitNavBadges: () => {} }),
+);
 vi.mock(
   "../layers/dms-layout/app/build/composables/dev-reload/useDevReloadHolder",
   async () => {
@@ -72,7 +82,7 @@ function installRuntime(): void {
     PAGE_FILL_HEIGHT_CLASSES,
     providePageFillHeight,
     usePageFillHeight,
-    createError: ({ statusCode }: { statusCode: number }) =>
+    createDmsError: ({ statusCode }: { statusCode: number }) =>
       new HttpError(statusCode),
     defineDmsPageMeta: vi.fn(),
     firstAccessiblePagePath: vi.fn(),
@@ -81,7 +91,7 @@ function installRuntime(): void {
     providePageRealtime: vi.fn(),
     resolveDmsComponent: () => "div",
     runCustomValidation,
-    showError: vi.fn(),
+    showDmsError: vi.fn(),
     validateRequiredQueryParams,
     useDefinedFunctions: () => ({ getFunction: () => undefined }),
     useDmsRoute: () => ({ path: PAGE_PATH, query: pageQuery.value }),

package/frontend-vue/tests/period-hydration-now.test.ts

@@ -0,0 +1,185 @@
+// @vitest-environment jsdom
+/**
+ * A relative preset (`last-24h`) in a server render and in the browser that
+ * hydrates it, through the runtime's real async data: both resolve the period
+ * from the instant the server rendered at, so the browser hydrates the same
+ * bounds, key and card data without asking again, whatever time it is when
+ * it hydrates. Anywhere else, the period follows the browser's clock.
+ */
+import {
+  createApp,
+  createSSRApp,
+  defineComponent,
+  h,
+  nextTick,
+  onBeforeUnmount,
+  type App,
+  type Component,
+} from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  browserTimeZone,
+  setReaderTimeZoneSource,
+} from "../layers/dms-core/app/utils/regional";
+
+const engine = await import("#dms/frontend-module");
+vi.stubGlobal("useDmsAsyncData", engine.useDmsAsyncData);
+vi.stubGlobal("useDmsFetch", engine.useDmsFetch);
+vi.stubGlobal("useDmsState", engine.useDmsState);
+vi.stubGlobal("useDmsCookie", engine.useDmsCookie);
+
+const requests: string[] = [];
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: async (url: string) => {
+    requests.push(url);
+    return {
+      value: new URL(url, "http://dms.local").searchParams.get("to"),
+    };
+  },
+}));
+
+const { useApiData } = await import(
+  "../layers/dms-core/app/composables/auth/useApiData"
+);
+vi.stubGlobal("useApiData", useApiData);
+const { usePeriod } = await import(
+  "../layers/dms-core/app/composables/period/usePeriod"
+);
+const { registerPeriodScope } = await import(
+  "../layers/dms-core/app/composables/period/usePeriodScope"
+);
+const { TIME_ZONE_COOKIE, useTimeZoneCookie } = await import(
+  "../layers/dms-core/app/composables/period/periodTimeZone"
+);
+setReaderTimeZoneSource(() => useTimeZoneCookie().value);
+const ZONE_COOKIE = `${TIME_ZONE_COOKIE}=${encodeURIComponent(JSON.stringify(browserTimeZone()))}`;
+// jsdom's `document` stays while the server renders: its cookies are the ones
+// read then, as the request's would be.
+document.cookie = ZONE_COOKIE;
+const { useChartFetch } = await import(
+  "../layers/dms-ui/app/composables/chart/useChartFetch"
+);
+
+const SCOPE = "ops";
+const SERVER_NOW = new Date("2026-10-15T10:00:30.000Z");
+// The browser hydrates a minute and a half later, past a minute boundary.
+const HYDRATION_DELAY_MS = 90_000;
+
+const Selector = defineComponent({
+  setup() {
+    const period = usePeriod({ defaultPreset: "last-24h" });
+    onBeforeUnmount(registerPeriodScope(SCOPE, period.state));
+    return () => h("i", period.state.value.key);
+  },
+});
+
+const Card = defineComponent({
+  setup() {
+    const { data, isLoading } = useChartFetch<{ value: string }>({
+      fetchUrl: "/api/errors",
+      periodScope: SCOPE,
+    });
+    return () =>
+      h("p", isLoading.value ? "SKELETON" : `to:${data.value?.value}`);
+  },
+});
+
+const Page: Component = {
+  render: () => h("main", [h(Selector), h(Card)]),
+};
+
+const mounted: App[] = [];
+
+beforeEach(() => {
+  requests.length = 0;
+  vi.useFakeTimers({ toFake: ["Date"] });
+  vi.setSystemTime(SERVER_NOW);
+});
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+  vi.useRealTimers();
+});
+
+async function serverRender() {
+  const runtime = engine.createDmsFrontendRuntime(
+    undefined,
+    {},
+    true,
+    ZONE_COOKIE,
+  );
+  const app = createSSRApp(Page);
+  engine.provideDmsFrontendRuntime(app, runtime);
+  engine.setDmsServerRuntimeResolver(() => runtime);
+  // What the server sees: no `window`.
+  const browserWindow = globalThis.window;
+  vi.stubGlobal("window", undefined);
+  try {
+    const html = await renderToString(app);
+    return { html, payload: engine.serializeDmsPayload(runtime) };
+  } finally {
+    vi.stubGlobal("window", browserWindow);
+  }
+}
+
+async function hydrate(html: string, payload: unknown) {
+  const browser = engine.createDmsFrontendRuntime(undefined, {});
+  engine.restoreDmsPayload(
+    browser,
+    structuredClone(payload) as Parameters<typeof engine.restoreDmsPayload>[1],
+  );
+  const container = document.createElement("div");
+  container.innerHTML = html;
+  const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+  const error = vi.spyOn(console, "error").mockImplementation(() => {});
+  const app = createSSRApp(Page);
+  engine.provideDmsFrontendRuntime(app, browser);
+  app.mount(container);
+  mounted.push(app);
+  await nextTick();
+  await new Promise((done) => setTimeout(done, 300));
+  const mismatches = [...warn.mock.calls, ...error.mock.calls].filter((call) =>
+    /hydration/i.test(String(call[0])),
+  );
+  warn.mockRestore();
+  error.mockRestore();
+  return { container, mismatches };
+}
+
+describe("a relative preset across a server render and its hydration", () => {
+  it("renders the card's data with the server's instant", async () => {
+    const { html } = await serverRender();
+
+    expect(html).toContain(`to:${SERVER_NOW.toISOString()}`);
+    expect(html).toContain(`|${SERVER_NOW.toISOString()}|`);
+    expect(requests).toHaveLength(1);
+  });
+
+  it("hydrates the same bounds later on: no request, no mismatch", async () => {
+    const { html, payload } = await serverRender();
+    requests.length = 0;
+    vi.setSystemTime(SERVER_NOW.getTime() + HYDRATION_DELAY_MS);
+
+    const { container, mismatches } = await hydrate(html, payload);
+
+    expect(mismatches).toEqual([]);
+    expect(requests).toEqual([]);
+    expect(container.innerHTML).toBe(html);
+  });
+
+  it("follows the browser's clock on a client mount", async () => {
+    const later = SERVER_NOW.getTime() + HYDRATION_DELAY_MS;
+    vi.setSystemTime(later);
+    const app = createApp(Selector);
+    engine.provideDmsFrontendRuntime(
+      app,
+      engine.createDmsFrontendRuntime(undefined, {}),
+    );
+    const root = document.createElement("div");
+    app.mount(root);
+    mounted.push(app);
+
+    expect(root.textContent).toContain(`|${new Date(later).toISOString()}|`);
+  });
+});

package/frontend-vue/tests/period-live-pause.test.ts

@@ -7,6 +7,7 @@
  */
 import { createApp, defineComponent, h, ref } from "vue";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { useRealDataEngine } from "./fixtures/dataEngine";
 import { createPageLiveController } from "../layers/dms-ui/app/build/composables/live/pageLiveController";
 import { setCurrentPageLive } from "../layers/dms-ui/app/build/composables/live/currentPageLive";
 import { usePageLive } from "../layers/dms-ui/app/composables/live/usePageLive";
@@ -57,6 +58,8 @@ function mountPageWithChart(): UsePeriodReturn {
   return period!;
 }
 
+beforeEach(() => useRealDataEngine());
+
 beforeEach(() => {
   vi.useFakeTimers();
   requests.length = 0;

package/frontend-vue/tests/period-reader-zone.test.ts

@@ -0,0 +1,137 @@
+/**
+ * A server render resolves periods and writes dates in the time zone of the
+ * browser it renders for (its `dms-time-zone` cookie), whatever the server's
+ * own: the same bounds and the same text as the browser's, so hydration
+ * matches. Without the cookie, or in the server's own zone, nothing changes.
+ */
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  browserTimeZone,
+  regionalDateTimeFormat,
+  regionalDayKey,
+  setReaderTimeZoneSource,
+} from "../layers/dms-core/app/utils/regional";
+import {
+  localClock,
+  zonedClock,
+} from "../layers/dms-core/app/composables/period/periodClock";
+import { resolvePresetRange } from "../layers/dms-core/app/composables/period/presetResolvers";
+import { resolveComparisonRange } from "../layers/dms-core/app/composables/period/compareResolvers";
+import {
+  formatPeriodDate,
+  parsePeriodDate,
+} from "../layers/dms-ui/app/build/composables/period/periodQuery";
+import { formatPeriodRange } from "../layers/dms-ui/app/build/composables/period/periodDisplay";
+
+// A zone far from any CI's, and one with a daylight saving change.
+const READER_ZONE =
+  browserTimeZone() === "Pacific/Kiritimati"
+    ? "Etc/GMT+12"
+    : "Pacific/Kiritimati";
+const NEW_YORK = "America/New_York";
+const NOW = new Date("2026-10-14T21:30:00.000Z");
+const FALLBACK = { from: NOW, to: NOW };
+
+function readFor(zone: string | null): void {
+  setReaderTimeZoneSource(() => zone);
+}
+
+function inZone(zone: string, date: Date) {
+  const { year, month, day, hours, minutes } = zonedClock(zone).wall(date);
+  return `${year}-${month + 1}-${day} ${hours}:${minutes}`;
+}
+
+afterEach(() => readFor(null));
+
+describe("the clock a period is resolved in", () => {
+  it("reads and builds wall times in a zone, across a daylight saving change", () => {
+    const clock = zonedClock(NEW_YORK);
+    // 8 March 2026: New York moves from UTC-5 to UTC-4 at 2:00.
+    const midnight = clock.instant({
+      year: 2026,
+      month: 2,
+      day: 8,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+      milliseconds: 0,
+    });
+    expect(midnight.toISOString()).toBe("2026-03-08T05:00:00.000Z");
+    const evening = clock.instant({ ...clock.wall(midnight), hours: 23 });
+    expect(evening.toISOString()).toBe("2026-03-09T03:00:00.000Z");
+    // Day 0 rolls back to the last day of the month before, as Date's does.
+    const rolled = clock.wall(
+      clock.instant({ ...clock.wall(midnight), month: 3, day: 0 }),
+    );
+    expect([rolled.month, rolled.day]).toEqual([2, 31]);
+  });
+
+  it("matches Date's own calendar in the zone the code runs in", () => {
+    const local = zonedClock(browserTimeZone());
+    expect(local.wall(NOW)).toEqual(localClock.wall(NOW));
+    const wall = { ...localClock.wall(NOW), day: 40, hours: 0 };
+    expect(local.instant(wall).getTime()).toBe(
+      localClock.instant(wall).getTime(),
+    );
+  });
+});
+
+describe("a server render for a browser in another zone", () => {
+  it("resolves presets and comparisons on the browser's calendar days", () => {
+    readFor(READER_ZONE);
+    const range = resolvePresetRange("this-month", NOW, FALLBACK)!;
+    const reader = zonedClock(READER_ZONE);
+    expect(inZone(READER_ZONE, range.from)).toMatch(/-1 0:0$/);
+    expect(reader.wall(range.to).hours).toBe(23);
+    expect(reader.wall(range.to).month).toBe(reader.wall(range.from).month);
+    const previous = resolveComparisonRange("previous-year", range, null)!;
+    expect(reader.wall(previous.from).year).toBe(
+      reader.wall(range.from).year - 1,
+    );
+    expect(inZone(READER_ZONE, previous.from)).toMatch(/-1 0:0$/);
+  });
+
+  it("reads and writes the URL's days as the browser's", () => {
+    readFor(READER_ZONE);
+    const from = parsePeriodDate("2026-10-01", "start")!;
+    expect(inZone(READER_ZONE, from)).toBe("2026-10-1 0:0");
+    expect(formatPeriodDate(from, "start")).toBe("2026-10-01");
+    expect(parsePeriodDate("2026-02-30", "start")).toBeNull();
+  });
+
+  it("writes the period's label and other dates in the browser's zone", () => {
+    readFor(READER_ZONE);
+    const range = resolvePresetRange("this-month", NOW, FALLBACK)!;
+    const expected = new Intl.DateTimeFormat("en", {
+      month: "short",
+      day: "numeric",
+      timeZone: READER_ZONE,
+    }).format(range.from);
+    expect(formatPeriodRange(range, "en")).toContain(expected);
+    expect(
+      regionalDateTimeFormat("en", { dateStyle: "medium" }).format(NOW),
+    ).toBe(
+      new Intl.DateTimeFormat("en", {
+        dateStyle: "medium",
+        timeZone: READER_ZONE,
+      }).format(NOW),
+    );
+  });
+
+  it("files dates under the browser's calendar days", () => {
+    readFor(READER_ZONE);
+    const { year, month, day } = zonedClock(READER_ZONE).wall(NOW);
+    const pad = (value: number) => String(value).padStart(2, "0");
+    expect(regionalDayKey(NOW)).toBe(`${year}-${pad(month + 1)}-${pad(day)}`);
+  });
+
+  it("changes nothing without the browser's zone, or in the server's own", () => {
+    for (const zone of [null, browserTimeZone()]) {
+      readFor(zone);
+      const range = resolvePresetRange("this-month", NOW, FALLBACK)!;
+      expect(range.from).toEqual(
+        new Date(NOW.getFullYear(), NOW.getMonth(), 1),
+      );
+    }
+  });
+});

package/frontend-vue/tests/period-scope-first-fetch.test.ts

@@ -19,6 +19,7 @@ import {
 } from "vue";
 import { renderToString } from "vue/server-renderer";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useRealDataEngine } from "./fixtures/dataEngine";
 import type { PeriodState } from "../layers/dms-core/app/composables/period/types";
 
 const requests: string[] = [];
@@ -143,7 +144,13 @@ async function ssrThenHydrate(
   const container = document.createElement("div");
   container.innerHTML = html;
   document.body.appendChild(container);
+  // The browser starts from what the page carried, as it does after a server
+  // render: its first mount takes the data over instead of reading it again.
+  const payload = structuredClone(engine.serializeDmsPayload(renderRuntime));
+  const browser = engine.createDmsFrontendRuntime(undefined, {});
+  engine.restoreDmsPayload(browser, payload);
   const app = withComponents(createSSRApp(root as never), components);
+  engine.provideDmsFrontendRuntime(app, browser);
   app.mount(container);
   mounted.push(app);
   const deadline = Date.now() + SETTLE_MS;
@@ -163,6 +170,13 @@ function withComponents<
   return app;
 }
 
+const engine = await import("#dms/frontend-module");
+let renderRuntime: ReturnType<typeof useRealDataEngine>;
+
+beforeEach(() => {
+  renderRuntime = useRealDataEngine();
+});
+
 beforeEach(() => {
   requests.length = 0;
 });
@@ -238,6 +252,8 @@ describe("period-scoped cards on first paint", () => {
     }
   });
 
+  // Its period unknown to the server (no selector registered it before the
+  // card set up), a card renders its placeholder, never an empty value.
   it("shows a loading placeholder server-side rather than an empty value", async () => {
     const app = createSSRApp({
       render: () =>
@@ -246,7 +262,7 @@ describe("period-scoped cards on first paint", () => {
           componentId: "card",
           pageId: "page",
           fetchUrl: "/api/metrics/kpi/revenue",
-          periodScope: SCOPE,
+          periodScope: "unregistered-scope",
         }),
     });
     withComponents(app, {

package/frontend-vue/tests/period-ssr.test.ts

@@ -0,0 +1,195 @@
+/**
+ * A server render of a dashboard, through the runtime's real async data: a
+ * card bound to a period scope renders its data when the server resolves the
+ * period as the browser will (in the browser's time zone, read in its cookie;
+ * a selector set up before the card), and its placeholder
+ * otherwise, requesting nothing. Each request has its scopes.
+ */
+import { createSSRApp, defineComponent, h, ref, type Component } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { PeriodPreset } from "../layers/dms-core/app/composables/period/types";
+import {
+  browserTimeZone,
+  setReaderTimeZoneSource,
+} from "../layers/dms-core/app/utils/regional";
+
+const engine = await import("#dms/frontend-module");
+vi.stubGlobal("useDmsAsyncData", engine.useDmsAsyncData);
+vi.stubGlobal("useDmsFetch", engine.useDmsFetch);
+vi.stubGlobal("useDmsState", engine.useDmsState);
+vi.stubGlobal("useDmsCookie", engine.useDmsCookie);
+
+const requests: string[] = [];
+vi.stubGlobal("useAuthFetch", () => ({
+  $authFetch: async (url: string) => {
+    requests.push(url);
+    await new Promise((done) => setTimeout(done, 5));
+    return {
+      value: new URL(url, "http://dms.local").searchParams.get("preset"),
+    };
+  },
+}));
+
+const { useApiData } = await import(
+  "../layers/dms-core/app/composables/auth/useApiData"
+);
+vi.stubGlobal("useApiData", useApiData);
+const { usePeriod } = await import(
+  "../layers/dms-core/app/composables/period/usePeriod"
+);
+const { registerPeriodScope } = await import(
+  "../layers/dms-core/app/composables/period/usePeriodScope"
+);
+const { TIME_ZONE_COOKIE, useTimeZoneCookie } = await import(
+  "../layers/dms-core/app/composables/period/periodTimeZone"
+);
+const { zonedClock } = await import(
+  "../layers/dms-core/app/composables/period/periodClock"
+);
+// What the regional-preferences plugin sets up.
+setReaderTimeZoneSource(() => useTimeZoneCookie().value);
+const { useChartFetch } = await import(
+  "../layers/dms-ui/app/composables/chart/useChartFetch"
+);
+
+const SCOPE = "dashboard";
+
+function selector(preset: PeriodPreset): Component {
+  return defineComponent({
+    setup() {
+      const period = usePeriod({ defaultPreset: preset });
+      registerPeriodScope(SCOPE, period.state);
+      return () => h("i");
+    },
+  });
+}
+
+const Card = defineComponent({
+  setup() {
+    const { data, isLoading } = useChartFetch<{ value: string }>({
+      fetchUrl: "/api/kpi",
+      periodScope: SCOPE,
+    });
+    return () =>
+      h("p", isLoading.value ? "SKELETON" : `value:${data.value?.value}`);
+  },
+});
+
+function zoneCookie(zone: string): string {
+  return `${TIME_ZONE_COOKIE}=${encodeURIComponent(JSON.stringify(zone))}`;
+}
+
+async function serverRender(children: Component[], cookies?: string) {
+  const runtime = engine.createDmsFrontendRuntime(undefined, {}, true, cookies);
+  const app = createSSRApp({
+    render: () =>
+      h(
+        "main",
+        children.map((c) => h(c)),
+      ),
+  });
+  engine.provideDmsFrontendRuntime(app, runtime);
+  engine.setDmsServerRuntimeResolver(() => runtime);
+  const html = await renderToString(app);
+  return { html, payload: engine.serializeDmsPayload(runtime) };
+}
+
+beforeEach(() => {
+  requests.length = 0;
+});
+
+describe("a period-scoped card in a server render", () => {
+  it("renders its data with the period the browser resolves, and hands it over", async () => {
+    const { html, payload } = await serverRender(
+      [selector("this-month"), Card],
+      zoneCookie(browserTimeZone()),
+    );
+
+    expect(html).toContain("value:this-month");
+    expect(requests).toHaveLength(1);
+    expect(requests[0]).toMatch(
+      /^\/api\/kpi\?from=.*&preset=this-month&comparison=none$/,
+    );
+    expect(Object.values(payload.data)).toEqual([{ value: "this-month" }]);
+  });
+
+  it("leaves it to the browser without the browser's time zone", async () => {
+    const { html } = await serverRender([selector("this-month"), Card]);
+
+    expect(html).toContain("SKELETON");
+    expect(requests).toEqual([]);
+  });
+
+  it("resolves the period in the browser's zone when it is not the server's", async () => {
+    const elsewhere =
+      browserTimeZone() === "Pacific/Kiritimati"
+        ? "Etc/GMT+12"
+        : "Pacific/Kiritimati";
+    const { html } = await serverRender(
+      [selector("this-month"), Card],
+      zoneCookie(elsewhere),
+    );
+
+    expect(html).toContain("value:this-month");
+    const query = new URL(requests[0]!, "http://dms.local").searchParams;
+    const from = zonedClock(elsewhere).wall(new Date(query.get("from")!));
+    const to = zonedClock(elsewhere).wall(new Date(query.get("to")!));
+    expect([from.day, from.hours, from.minutes]).toEqual([1, 0, 0]);
+    expect([to.hours, to.minutes, to.milliseconds]).toEqual([23, 59, 999]);
+    expect(to.month).toBe(from.month);
+  });
+
+  it("renders a relative preset too, from the instant it hands the browser", async () => {
+    const { html, payload } = await serverRender(
+      [selector("last-24h"), Card],
+      zoneCookie(browserTimeZone()),
+    );
+
+    expect(html).toContain("value:last-24h");
+    expect(requests).toHaveLength(1);
+    const query = new URL(requests[0]!, "http://dms.local").searchParams;
+    expect(payload.state["dms-period-render-now"]).toBe(
+      new Date(query.get("to")!).getTime(),
+    );
+  });
+
+  it("leaves it to the browser when its selector sets up after it", async () => {
+    const { html } = await serverRender(
+      [Card, selector("this-month")],
+      zoneCookie(browserTimeZone()),
+    );
+
+    expect(html).toContain("SKELETON");
+    expect(requests).toEqual([]);
+  });
+
+  it("keeps the scopes of concurrent requests apart", async () => {
+    const cookie = zoneCookie(browserTimeZone());
+    const [month, year] = await Promise.all([
+      serverRender([selector("this-month"), Card], cookie),
+      serverRender([selector("last-year"), Card], cookie),
+    ]);
+
+    expect(month.html).toContain("value:this-month");
+    expect(year.html).toContain("value:last-year");
+  });
+});
+
+describe("a card without a period in a server render", () => {
+  it("renders its data", async () => {
+    const Plain = defineComponent({
+      setup() {
+        const { data } = useChartFetch<{ value: string | null }>({
+          fetchUrl: "/api/plain",
+          watchSource: () => ref(1).value,
+        });
+        return () => h("p", `plain:${data.value ? "loaded" : "none"}`);
+      },
+    });
+    const { html } = await serverRender([Plain]);
+
+    expect(html).toContain("plain:loaded");
+    expect(requests).toEqual(["/api/plain"]);
+  });
+});