@antelopejs/dms 0.7.8 → 0.7.10

package/frontend-vue/tests/period-selector-url.test.ts

@@ -13,6 +13,7 @@ import {
   nextTick,
   reactive,
   type App,
+  type Component,
 } from "vue";
 import { renderToString } from "vue/server-renderer";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -51,17 +52,36 @@ const PAGE_ID = "dashboard";
 const PAGE_PATH = "/dashboard";
 const handles: Record<string, Period> = {};
 
+const PRESETS: PeriodPreset[] = [
+  "last-7-days",
+  "last-30-days",
+  "this-month",
+  "custom",
+];
+
+/** What a test changes of a selector's setup. */
+interface SelectorSetup {
+  pageId?: string;
+  presets?: PeriodPreset[];
+  rememberKey?: string;
+}
+
 /** The selector's state wiring, as PeriodSelector.vue does it in setup. */
-function selector(id: string, defaultPreset: PeriodPreset = "this-month") {
+function selector(
+  id: string,
+  defaultPreset: PeriodPreset = "this-month",
+  setup: SelectorSetup = {},
+) {
   return defineComponent({
     setup() {
       const period = usePeriod({
         defaultPreset,
-        presets: ["last-7-days", "last-30-days", "this-month", "custom"],
+        presets: setup.presets ?? PRESETS,
       });
       usePeriodLocation(period, {
         id,
-        pageId: PAGE_ID,
+        pageId: setup.pageId ?? PAGE_ID,
+        rememberKey: setup.rememberKey,
         fallback: {
           preset: period.preset.value,
           comparison: period.comparison.value,
@@ -78,16 +98,20 @@ function selector(id: string, defaultPreset: PeriodPreset = "this-month") {
 
 const mounted: App[] = [];
 
+function mountApp(root: Component): void {
+  const app = createApp(root);
+  app.mount(document.createElement("div"));
+  mounted.push(app);
+}
+
 function mount(...ids: string[]): void {
-  const app = createApp({
+  mountApp({
     setup: () => () =>
       h(
         "div",
         ids.map((id) => h(selector(id))),
       ),
   });
-  app.mount(document.createElement("div"));
-  mounted.push(app);
 }
 
 const search = () => new URLSearchParams(window.location.search);
@@ -266,3 +290,57 @@ describe("a route changed from outside", () => {
     expect(handles.page!.preset.value).toBe("last-7-days");
   });
 });
+
+describe("a remembered choice shared by a rememberKey", () => {
+  const onPage = (pageId: string) =>
+    selector("api", "last-30-days", { pageId, rememberKey: "api" });
+
+  it("follows the user from one page to the next", async () => {
+    mountApp(onPage("overview"));
+    handles.api!.setPreset("last-7-days");
+    await nextTick();
+    mounted.splice(0).forEach((app) => app.unmount());
+    route.query = {};
+    window.history.replaceState(null, "", "/logs");
+    mountApp(onPage("logs"));
+    expect(handles.api!.preset.value).toBe("last-7-days");
+  });
+
+  it("stays per page without one", async () => {
+    mountApp(selector("api", "last-30-days", { pageId: "overview" }));
+    handles.api!.setPreset("last-7-days");
+    await nextTick();
+    mounted.splice(0).forEach((app) => app.unmount());
+    route.query = {};
+    mountApp(selector("api", "last-30-days", { pageId: "logs" }));
+    expect(handles.api!.preset.value).toBe("last-30-days");
+  });
+});
+
+describe("a link framing a window no preset matches", () => {
+  const PILLS: PeriodPreset[] = ["last-hour", "last-24h", "last-7-days"];
+
+  it("opens on that window, no preset selected, and is not remembered", async () => {
+    remember({ period: "last-7-days" });
+    route.query = {
+      "page.from": "2026-10-11T09:12:00.000Z",
+      "page.to": "2026-10-11T09:40:00.000Z",
+    };
+    mountApp(selector("page", "last-24h", { presets: PILLS }));
+    await nextTick();
+    const period = handles.page!;
+    expect(period.preset.value).toBe("custom");
+    expect(PILLS).not.toContain(period.preset.value);
+    expect(period.state.value.range).toEqual({
+      from: new Date("2026-10-11T09:12:00.000Z"),
+      to: new Date("2026-10-11T09:40:00.000Z"),
+    });
+    period.setComparison("previous-period");
+    await nextTick();
+    expect(
+      (preferences.get(PERIOD_PREFERENCE_KEY) as Record<string, unknown>)[
+        `${PAGE_ID}#page`
+      ],
+    ).toEqual({ period: "last-7-days" });
+  });
+});

package/frontend-vue/tests/period-url-query.test.ts

@@ -15,7 +15,9 @@ import {
   type PeriodChoices,
   type PeriodSelection,
   readComparisonChoice,
+  isRangeOffered,
   readRangeChoice,
+  rememberedPeriodKey,
   rememberPeriod,
   resolvePeriodSelection,
   writePeriodQuery,
@@ -197,6 +199,23 @@ describe("parsing the URL", () => {
     ).toBeNull();
   });
 
+  it("takes a linked range the selector does not offer, from a source that always accepts one", () => {
+    const query = { "page.from": "2026-10-01", "page.to": "2026-10-15" };
+    const choices = { ...CHOICES, presets: ["last-7-days" as const] };
+    expect(
+      readRangeChoice(
+        { query, keys: PAGE, isRangeAlwaysAccepted: true },
+        choices,
+      ),
+    ).toEqual({
+      preset: "custom",
+      customRange: { from: day(2026, 10, 1), to: endOfDay(2026, 10, 15) },
+    });
+    expect(
+      isRangeOffered({ preset: "custom", customRange: null }, choices),
+    ).toBe(false);
+  });
+
   it.each([
     ["an unknown comparison", { "page.compare": "previous-decade" }],
     ["a custom comparison with no range", { "page.compare": "custom" }],
@@ -349,3 +368,36 @@ describe("the last choices kept in the browser", () => {
     });
   });
 });
+
+describe("every period", () => {
+  const choices: PeriodChoices = { ...CHOICES, presets: ["last-24h", "all"] };
+
+  it("is written as a preset with no bounds", () => {
+    expect(writePeriodQuery({ ...DEFAULT, preset: "all" }, PAGE)).toEqual({
+      "page.period": "all",
+      "page.compare": "none",
+    });
+  });
+
+  it("is read back when the selector offers it", () => {
+    const query = { "page.period": "all" };
+    expect(readRangeChoice({ query, keys: PAGE }, choices)).toEqual({
+      preset: "all",
+      customRange: null,
+    });
+    expect(readRangeChoice({ query, keys: PAGE }, CHOICES)).toBeNull();
+  });
+});
+
+describe("the key a last choice is kept under", () => {
+  it("is the page and the selector id by default", () => {
+    expect(rememberedPeriodKey({ pageId: "logs", id: "api" })).toBe("logs#api");
+  });
+
+  it("is the shared key on every page carrying it", () => {
+    const shared = (pageId: string) =>
+      rememberedPeriodKey({ pageId, id: "api", rememberKey: "api" });
+    expect(shared("logs")).toBe(shared("overview"));
+    expect(shared("logs")).not.toContain("#");
+  });
+});

package/frontend-vue/tests/preferences-cookie-size.test.ts

@@ -0,0 +1,311 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createSSRApp,
+  defineComponent,
+  h,
+  nextTick,
+  readonly,
+  ref,
+  toRaw,
+  watch,
+  type Ref,
+} from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  MAX_PREFERENCES_COOKIE_BYTES,
+  usePreferences,
+} from "../layers/dms-core/app/composables/user/usePreferences";
+import {
+  decodePreferencesTree,
+  preferencesCookieBytes,
+} from "../layers/dms-core/app/build/composables/user/preferencesCookie";
+import {
+  LOCAL_TABLE_KEY_PREFIX,
+  tablePreferenceId,
+} from "../layers/dms-core/app/build/composables/user/tablePreferences";
+import { useTablePreferences } from "../layers/dms-ui/app/build/composables/table-view/useTablePreferences";
+
+// The ids of a table measured in the playground: a long component id, and a
+// page id holding dots.
+const COMPONENT_ID = "content-child-main-child-main-child-languages";
+const PAGE_ID = "modules.lang.manage.workspace";
+const SORTED_ONLY_MAX_BYTES = 50;
+const TYPICAL_MAX_BYTES = 150;
+const TYPICAL_TABLES = 20;
+const VISITED_TABLES = 80;
+const DEFAULT_PAGINATION = { pageIndex: 0, pageSize: 10 };
+const DEFAULT_SORT = [{ id: "createdAt", desc: true }];
+const DEFAULT_VISIBILITY = { name: true, email: true, phone: true };
+
+let stored: Ref<string>;
+let writes: number[];
+
+// `useDmsCookie`: one shared ref per name, every assignment written out.
+const installCookie = (initial: string) => {
+  stored = ref(initial);
+  writes = [];
+  const cookie = computed({
+    get: () => stored.value,
+    set: (next) => {
+      writes.push(preferencesCookieBytes(toRaw(next)));
+      stored.value = next;
+    },
+  });
+  vi.stubGlobal("useDmsCookie", () => cookie);
+};
+
+const cookieBytes = () => preferencesCookieBytes(stored.value);
+const storedTree = () => decodePreferencesTree(stored.value);
+
+const sortByName = (componentId: string, pageId: string) =>
+  useTablePreferences(componentId, pageId).set(
+    "sorting",
+    [{ id: "name", desc: true }],
+    DEFAULT_SORT,
+  );
+
+// Sorted, filtered, 50 rows a page and two columns hidden.
+const visitTypicalTable = (componentId: string, pageId: string) => {
+  const table = useTablePreferences(componentId, pageId);
+  table.set("sorting", [{ id: "name", desc: true }], DEFAULT_SORT);
+  table.set(
+    "columnFilters",
+    [{ accessorKey: "status", mode: "is", value: "active" }],
+    [],
+  );
+  table.set("pagination", { pageIndex: 0, pageSize: 50 }, DEFAULT_PAGINATION);
+  table.set(
+    "columnVisibility",
+    { name: true, email: false, phone: false },
+    DEFAULT_VISIBILITY,
+  );
+};
+
+const tableIds = (index: number): [string, string] => [
+  `${COMPONENT_ID}-${index}`,
+  `${PAGE_ID}.${index}`,
+];
+
+beforeEach(() => {
+  vi.stubGlobal("ref", ref);
+  vi.stubGlobal("readonly", readonly);
+  vi.stubGlobal("computed", computed);
+  vi.stubGlobal("watch", watch);
+  vi.stubGlobal("usePreferences", usePreferences);
+  installCookie("");
+  localStorage.clear();
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("the size of a table's state in the preferences cookie", () => {
+  it("is at most 50 bytes for a table only sorted", () => {
+    const empty = preferencesCookieBytes("");
+    sortByName(COMPONENT_ID, PAGE_ID);
+    expect(cookieBytes() - empty).toBeLessThanOrEqual(SORTED_ONLY_MAX_BYTES);
+  });
+
+  it("is at most 150 bytes for a sorted, filtered, paged table with hidden columns", () => {
+    sortByName("another-table", "another.page");
+    const before = cookieBytes();
+    visitTypicalTable(COMPONENT_ID, PAGE_ID);
+    expect(cookieBytes() - before).toBeLessThanOrEqual(TYPICAL_MAX_BYTES);
+  });
+
+  it("keeps at least 20 typical tables", () => {
+    for (let index = 0; index < TYPICAL_TABLES; index += 1) {
+      visitTypicalTable(...tableIds(index));
+    }
+    expect(cookieBytes()).toBeLessThanOrEqual(MAX_PREFERENCES_COOKIE_BYTES);
+    const tables = storedTree().tables as Record<string, unknown>;
+    expect(Object.keys(tables)).toHaveLength(TYPICAL_TABLES);
+    expect(
+      useTablePreferences(...tableIds(0)).get("sorting", DEFAULT_SORT),
+    ).toEqual([{ id: "name", desc: true }]);
+  });
+});
+
+describe("a table's state in the preferences cookie", () => {
+  it("is read back in its own shape", () => {
+    visitTypicalTable(COMPONENT_ID, PAGE_ID);
+    const table = useTablePreferences(COMPONENT_ID, PAGE_ID);
+    expect(table.get("columnFilters", [])).toEqual([
+      { accessorKey: "status", mode: "is", value: "active" },
+    ]);
+    expect(table.get("pagination", DEFAULT_PAGINATION)).toEqual({
+      pageIndex: 0,
+      pageSize: 50,
+    });
+    expect(table.get("columnVisibility", DEFAULT_VISIBILITY)).toEqual({
+      name: true,
+      email: false,
+      phone: false,
+    });
+  });
+
+  it("does not write a value equal to its default, and forgets one back to it", () => {
+    const table = useTablePreferences(COMPONENT_ID, PAGE_ID);
+    table.set("sorting", DEFAULT_SORT, DEFAULT_SORT);
+    table.set("pagination", DEFAULT_PAGINATION, DEFAULT_PAGINATION);
+    table.set("columnVisibility", DEFAULT_VISIBILITY, DEFAULT_VISIBILITY);
+    expect(stored.value).toBe("");
+
+    table.set("sorting", [{ id: "name", desc: false }], DEFAULT_SORT);
+    expect(stored.value).not.toBe("");
+    table.set("sorting", DEFAULT_SORT, DEFAULT_SORT);
+    expect(storedTree()).toEqual({});
+  });
+
+  it("keeps a pinned filter on its declared value out of the cookie", () => {
+    useTablePreferences(COMPONENT_ID, PAGE_ID).set(
+      "columnFilters",
+      [
+        {
+          accessorKey: "status",
+          mode: "is",
+          value: "open",
+          pinned: true,
+          initialValue: "open",
+        },
+      ],
+      [],
+    );
+    expect(stored.value).toBe("");
+  });
+
+  it("lives under one short key, a dotted page id no longer nesting", () => {
+    sortByName(COMPONENT_ID, PAGE_ID);
+    const id = tablePreferenceId(COMPONENT_ID, PAGE_ID);
+    expect(id).toMatch(/^[0-9a-z]{8}$/);
+    expect(storedTree()).toEqual({ tables: { [id]: { s: "-name" } } });
+  });
+
+  it("keeps the browser-only state out of the cookie, in localStorage", () => {
+    const table = useTablePreferences(COMPONENT_ID, PAGE_ID);
+    table.set("columnOrder", ["email", "name"], []);
+    table.set("columnSizing", { name: 240 }, {});
+    table.set("density", "compact", "default");
+    expect(stored.value).toBe("");
+    const key = `${LOCAL_TABLE_KEY_PREFIX}${tablePreferenceId(COMPONENT_ID, PAGE_ID)}`;
+    expect(JSON.parse(localStorage.getItem(key)!)).toEqual({
+      columnOrder: ["email", "name"],
+      columnSizing: { name: 240 },
+      density: "compact",
+    });
+
+    table.set("density", "default", "default");
+    table.set("columnOrder", [], []);
+    table.set("columnSizing", {}, {});
+    expect(localStorage.getItem(key)).toBeNull();
+  });
+});
+
+describe("the browser-only state of a table", () => {
+  const Density = defineComponent({
+    setup() {
+      const table = useTablePreferences(COMPONENT_ID, PAGE_ID);
+      const density = ref("default");
+      table.restore("density", density);
+      return () => h("span", density.value);
+    },
+  });
+
+  it("is restored once mounted, the server render hydrating as is", async () => {
+    useTablePreferences(COMPONENT_ID, PAGE_ID).set(
+      "density",
+      "compact",
+      "default",
+    );
+    const html = await renderToString(createSSRApp(Density));
+    expect(html).toBe("<span>default</span>");
+
+    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(Density);
+    app.mount(container);
+    await nextTick();
+
+    expect(container.textContent).toBe("compact");
+    const messages = [...warn.mock.calls, ...error.mock.calls].flat();
+    expect(messages.join(" ")).not.toMatch(/hydration/i);
+    app.unmount();
+    warn.mockRestore();
+    error.mockRestore();
+  });
+});
+
+describe("the preferences cookie", () => {
+  it("stays under its budget however many tables are visited, dropping the least recently written", () => {
+    for (let index = 0; index < VISITED_TABLES; index += 1) {
+      visitTypicalTable(...tableIds(index));
+    }
+    expect(Math.max(...writes)).toBeLessThanOrEqual(
+      MAX_PREFERENCES_COOKIE_BYTES,
+    );
+    const last = tableIds(VISITED_TABLES - 1);
+    expect(useTablePreferences(...last).get("sorting", DEFAULT_SORT)).toEqual([
+      { id: "name", desc: true },
+    ]);
+    expect(
+      useTablePreferences(...tableIds(0)).get("sorting", DEFAULT_SORT),
+    ).toEqual(DEFAULT_SORT);
+  });
+
+  it("drops the table states before the remembered periods", () => {
+    const { setPreference, getPreference } = usePreferences();
+    setPreference("periods", { "orders#period": { period: "7d" } });
+    for (let index = 0; index < VISITED_TABLES; index += 1) {
+      visitTypicalTable(...tableIds(index));
+    }
+    expect(getPreference("periods")).toEqual({
+      "orders#period": { period: "7d" },
+    });
+  });
+
+  it("never evicts a module's own key, and refuses a write that cannot fit", () => {
+    const { setPreference, getPreference } = usePreferences();
+    setPreference("dms-lang.workspaceSort", { field: "name", desc: false });
+    for (let index = 0; index < VISITED_TABLES; index += 1) {
+      visitTypicalTable(...tableIds(index));
+    }
+    expect(getPreference("dms-lang.workspaceSort")).toEqual({
+      field: "name",
+      desc: false,
+    });
+
+    const before = stored.value;
+    setPreference("dms-lang.huge", "x".repeat(MAX_PREFERENCES_COOKIE_BYTES));
+    expect(stored.value).toBe(before);
+    expect(getPreference("dms-lang.huge")).toBeUndefined();
+  });
+
+  it("reads a corrupt value as no preferences", () => {
+    installCookie("not*base64{");
+    const { getPreference, setPreference } = usePreferences();
+    expect(getPreference("dms-lang.workspaceSort", "default")).toBe("default");
+    setPreference("dms-lang.workspaceSort", "name");
+    expect(getPreference("dms-lang.workspaceSort")).toBe("name");
+  });
+
+  it("is shared by every caller", () => {
+    const first = usePreferences();
+    const second = usePreferences();
+    first.setPreference("module.theme", "dense");
+    expect(second.getPreference("module.theme")).toBe("dense");
+  });
+
+  it("deletes the user-preferences cookie it replaces, unread", () => {
+    document.cookie = `user-preferences=${encodeURIComponent(
+      JSON.stringify({ tables: { a: { b: { density: "compact" } } } }),
+    )}; path=/`;
+    const { preferences } = usePreferences();
+    expect(document.cookie).not.toMatch(/user-preferences=/);
+    expect(preferences.value).toEqual({});
+  });
+});

package/frontend-vue/tests/row-side-panel.test.ts

@@ -425,19 +425,22 @@ describe("deep link to a row the table does not list", () => {
     const getRow = vi.fn(async () => older);
     expect(
       await resolveDeepLinkedRow("r9", { listed: rows, idOf, getRow }),
-    ).toBe(older);
+    ).toEqual({ row: older, isMissing: false });
     expect(getRow).toHaveBeenCalledWith("r9");
   });
 
   it("takes a listed row as it is, without a request", async () => {
     const getRow = vi.fn(async () => older);
-    expect(
-      await resolveDeepLinkedRow("r2", { listed: rows, idOf, getRow }),
-    ).toBe(rows[1]);
+    const found = await resolveDeepLinkedRow("r2", {
+      listed: rows,
+      idOf,
+      getRow,
+    });
+    expect(found.row).toBe(rows[1]);
     expect(getRow).not.toHaveBeenCalled();
   });
 
-  it("opens nothing for a missing row (404) or without a row route", async () => {
+  it("marks a row its route answers 404 for as missing", async () => {
     const missing = vi.fn(async () => {
       throw Object.assign(new Error("Not Found"), { statusCode: 404 });
     });
@@ -447,11 +450,20 @@ describe("deep link to a row the table does not list", () => {
         idOf,
         getRow: missing,
       }),
-    ).toBeUndefined();
+    ).toEqual({ isMissing: true });
+  });
+
+  it("finds nothing, missing or not, on a refusal or without a row route", async () => {
+    const refused = async () => {
+      throw Object.assign(new Error("Forbidden"), { status: 403 });
+    };
+    expect(
+      await resolveDeepLinkedRow("r9", { listed: rows, idOf, getRow: refused }),
+    ).toEqual({ isMissing: false });
     const noRoute = async () => undefined;
     expect(
       await resolveDeepLinkedRow("r9", { listed: rows, idOf, getRow: noRoute }),
-    ).toBeUndefined();
+    ).toEqual({ row: undefined, isMissing: false });
   });
 
   it("opens the unlisted row without a position, J and K inert", async () => {
@@ -468,6 +480,87 @@ describe("deep link to a row the table does not list", () => {
   });
 });
 
+describe("side panel on a missing row", () => {
+  const notFound = (host: ParentNode) =>
+    query(host, "[data-dms-row-side-panel-not-found]");
+
+  it("says the row is gone under the target's title, with the DMS's words", async () => {
+    window.history.replaceState(null, "", "/requests?record=gone");
+    const { host, targets } = mountPanel();
+    targets.handleMissingRow(panelAction(), "gone");
+    await settle();
+    expect(openPanelId()).toBe(ROW_SIDE_PANEL_ID);
+    expect(title(host)).toBe("Request details");
+    expect(position(host)).toBeUndefined();
+    expect(shownName(host)).toBeUndefined();
+    expect(notFound(host)?.textContent).toContain(
+      "$side_panel.not_found.title",
+    );
+    expect(notFound(host)?.textContent).toContain(
+      "$side_panel.not_found.description",
+    );
+  });
+
+  it("takes the target's own not-found words", async () => {
+    const { host, targets } = mountPanel();
+    targets.handleMissingRow(
+      panelAction({
+        notFound: {
+          title: "$api.request.not_found_title",
+          description: "$api.request.not_found_description",
+        },
+      }),
+      "gone",
+    );
+    await settle();
+    expect(notFound(host)?.textContent).toContain(
+      "$api.request.not_found_title",
+    );
+    expect(notFound(host)?.textContent).toContain(
+      "$api.request.not_found_description",
+    );
+  });
+
+  it("closes from its state, removing the link's ?record=", async () => {
+    window.history.replaceState(null, "", "/requests?record=gone");
+    const { host, targets } = mountPanel();
+    targets.handleMissingRow(panelAction(), "gone");
+    await settle();
+    notFound(host)?.querySelector("button")?.click();
+    await settle();
+    expect(query(host, "[data-dms-side-panel]")).toBeNull();
+    expect(window.location.search).toBe("");
+  });
+
+  it("opens nothing for a drawer action", async () => {
+    const { host, targets } = mountPanel();
+    targets.handleMissingRow(
+      panelAction({ type: "drawer" } as Partial<CustomRowAction["target"]>),
+      "gone",
+    );
+    await settle();
+    expect(query(host, "[data-dms-side-panel]")).toBeNull();
+  });
+});
+
+describe("row side panel title from the row", () => {
+  it("names the open row with the target's rowTitle and its fields", async () => {
+    const { host, targets } = mountPanel();
+    targets.handleCustomRowAction(
+      panelAction({ rowTitle: "{name} ({_id})" }),
+      rows[0],
+    );
+    await settle();
+    expect(title(host)).toBe("First (r1)");
+    expect(
+      query(host, "[data-dms-side-panel]")?.getAttribute("aria-label"),
+    ).toBe("Request details");
+    query(host, "[data-dms-row-side-panel-next]")?.click();
+    await settle();
+    expect(title(host)).toBe("Second (r2)");
+  });
+});
+
 describe("closing the row side panel", () => {
   it("closes from its button, unregistering the panel", async () => {
     const { host, targets } = mountPanel();
@@ -631,11 +724,17 @@ describe("open row highlight", () => {
     )}; return theme;`,
   )(tv, EYEBROW_CLASS, REORDER_HANDLE_CLASS);
 
-  it("tints the open row and its pinned cells", () => {
+  it("tints the open row with the accent and its pinned cells opaquely", () => {
     const ui = theme();
-    expect(ui.row({})).toContain("data-[open=true]:bg-elevated");
+    expect(ui.row({})).toContain("data-[open=true]:bg-primary/10");
     expect(ui.rowCell({ pinned: "left" })).toContain(
-      "group-data-[open=true]:bg-elevated",
+      "group-data-[open=true]:bg-[color-mix(in_srgb,var(--ui-primary)_10%,var(--dms-surface-card))]",
+    );
+  });
+
+  it("draws the accent bar on the open row's first cell", () => {
+    expect(theme().row({})).toContain(
+      "data-[open=true]:[&>td:first-child]:shadow-[inset_2px_0_0_0_var(--ui-primary)]",
     );
   });