@gogitcms/design-system 0.15.0-next.3

package/src/__tests__/Onboarding.test.tsx

@@ -0,0 +1,287 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { render, fireEvent, screen, waitFor, act } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { Text } from "../components/Text";
+import {
+  OnboardingProvider,
+  placeCard,
+  useOnboarding,
+  useOnboardingTarget,
+  type OnboardingFlow,
+  type OnboardingProgress,
+} from "../components/Onboarding";
+
+const flow: OnboardingFlow = {
+  id: "dashboard",
+  version: 1,
+  title: "Dashboard tour",
+  steps: [
+    { id: "welcome", title: "Welcome", body: "This is the overview." },
+    { id: "stats", title: "Your numbers", body: "What is connected.", target: "stats" },
+    { id: "team", title: "Your team", body: "Who can edit.", target: "team" },
+  ],
+};
+
+function Screen() {
+  const stats = useOnboardingTarget("stats");
+  const team = useOnboardingTarget("team");
+  const { restart, statusFor } = useOnboarding();
+  return (
+    <View>
+      <View ref={stats.ref as any} testID="stats-panel" />
+      <View ref={team.ref as any} testID="team-panel" />
+      <Text testID="dash-status">{statusFor("dashboard")}</Text>
+      <Pressable testID="replay" onPress={() => restart("dashboard")} />
+    </View>
+  );
+}
+
+function wrap(props: Partial<React.ComponentProps<typeof OnboardingProvider>> = {}) {
+  return (
+    <ThemeProvider>
+      <OnboardingProvider flows={[flow]} activeFlow="dashboard" progress={{}} {...props}>
+        <Screen />
+      </OnboardingProvider>
+    </ThemeProvider>
+  );
+}
+
+test("a flow nobody has seen starts itself and shows the first step", async () => {
+  render(wrap());
+  await waitFor(() => expect(screen.getByTestId("onboarding-card")).toBeInTheDocument());
+  expect(screen.getByTestId("onboarding-card")).toHaveTextContent("Welcome");
+  expect(screen.getByTestId("onboarding-card")).toHaveTextContent("Dashboard tour · 1/3");
+});
+
+test("progress that has not loaded yet suppresses auto-start", () => {
+  // `undefined` is "still fetching" — replaying a finished tour because the
+  // round-trip was slow is the failure this guards.
+  render(wrap({ progress: undefined }));
+  expect(screen.queryByTestId("onboarding-card")).not.toBeInTheDocument();
+});
+
+test("a completed flow at the current version does not run again", () => {
+  const progress: Record<string, OnboardingProgress> = {
+    dashboard: { status: "completed", stepIndex: 2, version: 1 },
+  };
+  render(wrap({ progress }));
+  expect(screen.queryByTestId("onboarding-card")).not.toBeInTheDocument();
+});
+
+test("a bumped flow version re-offers a completed tour", async () => {
+  const progress: Record<string, OnboardingProgress> = {
+    dashboard: { status: "completed", stepIndex: 2, version: 1 },
+  };
+  render(wrap({ flows: [{ ...flow, version: 2 }], progress }));
+  await waitFor(() => expect(screen.getByTestId("onboarding-card")).toBeInTheDocument());
+});
+
+test("an in-progress flow resumes where it stopped", async () => {
+  const progress: Record<string, OnboardingProgress> = {
+    dashboard: { status: "in_progress", stepIndex: 1, version: 1 },
+  };
+  render(wrap({ progress }));
+  await waitFor(() => expect(screen.getByTestId("onboarding-card")).toHaveTextContent("Your numbers"));
+});
+
+test("ready=false holds the tour until the screen's data has landed", async () => {
+  const { rerender } = render(wrap({ ready: false }));
+  expect(screen.queryByTestId("onboarding-card")).not.toBeInTheDocument();
+  rerender(wrap({ ready: true }));
+  await waitFor(() => expect(screen.getByTestId("onboarding-card")).toBeInTheDocument());
+});
+
+test("enabled=false turns the framework off entirely", () => {
+  render(wrap({ enabled: false }));
+  expect(screen.queryByTestId("onboarding-overlay")).not.toBeInTheDocument();
+});
+
+test("next and back walk the steps and record every position", async () => {
+  const onProgress = jest.fn();
+  render(wrap({ onProgress }));
+  await waitFor(() => expect(screen.getByTestId("onboarding-card")).toBeInTheDocument());
+  expect(onProgress).toHaveBeenLastCalledWith("dashboard", {
+    status: "in_progress",
+    stepIndex: 0,
+    version: 1,
+  });
+
+  // The first step has nowhere to go back to, so it offers Skip instead.
+  expect(screen.queryByTestId("onboarding-back")).not.toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("onboarding-next"));
+  expect(screen.getByTestId("onboarding-card")).toHaveTextContent("Your numbers");
+  expect(onProgress).toHaveBeenLastCalledWith("dashboard", {
+    status: "in_progress",
+    stepIndex: 1,
+    version: 1,
+  });
+
+  fireEvent.click(screen.getByTestId("onboarding-back"));
+  expect(screen.getByTestId("onboarding-card")).toHaveTextContent("Welcome");
+  expect(onProgress).toHaveBeenLastCalledWith("dashboard", {
+    status: "in_progress",
+    stepIndex: 0,
+    version: 1,
+  });
+});
+
+test("finishing the last step records completion and closes the tour", async () => {
+  const onProgress = jest.fn();
+  render(wrap({ onProgress }));
+  await waitFor(() => expect(screen.getByTestId("onboarding-card")).toBeInTheDocument());
+
+  fireEvent.click(screen.getByTestId("onboarding-next"));
+  fireEvent.click(screen.getByTestId("onboarding-next"));
+  expect(screen.getByTestId("onboarding-card")).toHaveTextContent("Your team");
+
+  fireEvent.click(screen.getByTestId("onboarding-next"));
+  expect(onProgress).toHaveBeenLastCalledWith("dashboard", {
+    status: "completed",
+    stepIndex: 2,
+    version: 1,
+  });
+  expect(screen.queryByTestId("onboarding-card")).not.toBeInTheDocument();
+  expect(screen.getByTestId("dash-status")).toHaveTextContent("completed");
+});
+
+test("skipping records where the user gave up, and does not re-run", async () => {
+  const onProgress = jest.fn();
+  render(wrap({ onProgress }));
+  await waitFor(() => expect(screen.getByTestId("onboarding-card")).toBeInTheDocument());
+  fireEvent.click(screen.getByTestId("onboarding-next"));
+  fireEvent.click(screen.getByTestId("onboarding-close"));
+
+  expect(onProgress).toHaveBeenLastCalledWith("dashboard", {
+    status: "skipped",
+    stepIndex: 1,
+    version: 1,
+  });
+  // The optimistic local record is what stops the auto-start effect from
+  // immediately restarting the tour the user just dismissed.
+  expect(screen.queryByTestId("onboarding-card")).not.toBeInTheDocument();
+});
+
+test("a host can replay a finished tour from the top", async () => {
+  const progress: Record<string, OnboardingProgress> = {
+    dashboard: { status: "completed", stepIndex: 2, version: 1 },
+  };
+  render(wrap({ progress }));
+  expect(screen.queryByTestId("onboarding-card")).not.toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("replay"));
+  await waitFor(() => expect(screen.getByTestId("onboarding-card")).toHaveTextContent("Welcome"));
+});
+
+test("leaving the screen ends the tour without recording a dismissal", async () => {
+  const onProgress = jest.fn();
+  const { rerender } = render(wrap({ onProgress }));
+  await waitFor(() => expect(screen.getByTestId("onboarding-card")).toBeInTheDocument());
+  onProgress.mockClear();
+
+  rerender(wrap({ onProgress, activeFlow: "team" }));
+  expect(screen.queryByTestId("onboarding-card")).not.toBeInTheDocument();
+  expect(onProgress).not.toHaveBeenCalled();
+});
+
+test("Escape skips and the arrow keys step through", async () => {
+  const onProgress = jest.fn();
+  render(wrap({ onProgress }));
+  await waitFor(() => expect(screen.getByTestId("onboarding-card")).toBeInTheDocument());
+
+  fireEvent.keyDown(document, { key: "ArrowRight" });
+  expect(screen.getByTestId("onboarding-card")).toHaveTextContent("Your numbers");
+  fireEvent.keyDown(document, { key: "ArrowLeft" });
+  expect(screen.getByTestId("onboarding-card")).toHaveTextContent("Welcome");
+
+  fireEvent.keyDown(document, { key: "Escape" });
+  expect(screen.queryByTestId("onboarding-card")).not.toBeInTheDocument();
+  expect(onProgress).toHaveBeenLastCalledWith("dashboard", {
+    status: "skipped",
+    stepIndex: 0,
+    version: 1,
+  });
+});
+
+describe("the spotlight", () => {
+  const original = Element.prototype.getBoundingClientRect;
+  beforeEach(() => {
+    // jsdom lays nothing out, so every rect is zero and every step would fall
+    // back to a centered card. Stubbing one gives the anchored path something
+    // to measure.
+    Element.prototype.getBoundingClientRect = function () {
+      return { x: 100, y: 200, left: 100, top: 200, width: 300, height: 80, right: 400, bottom: 280, toJSON() {} } as DOMRect;
+    };
+  });
+  afterEach(() => {
+    Element.prototype.getBoundingClientRect = original;
+  });
+
+  test("a step with a registered target cuts a hole around it", async () => {
+    render(wrap({ progress: { dashboard: { status: "in_progress", stepIndex: 1, version: 1 } } }));
+    await waitFor(() => expect(screen.getByTestId("onboarding-spotlight")).toBeInTheDocument());
+  });
+
+  test("the overlay does not swallow clicks meant for the spotlit control", async () => {
+    // The overlay spans the viewport. If it were hit-testable it would eat the
+    // click on the very control the step points at, and the spotlight would be a
+    // picture of an interactive element rather than the element.
+    // The container is transparent to clicks; the pieces that need them (the
+    // scrim panels, the card) opt back in individually.
+    render(wrap({ progress: { dashboard: { status: "in_progress", stepIndex: 1, version: 1 } } }));
+    await waitFor(() => expect(screen.getByTestId("onboarding-overlay")).toBeInTheDocument());
+    expect(screen.getByTestId("onboarding-overlay")).toHaveStyle({ pointerEvents: "none" });
+    expect(screen.getByTestId("onboarding-card")).toHaveStyle({ pointerEvents: "auto" });
+    // The ring is drawn over the anchor, so it has to be transparent to clicks too.
+    await waitFor(() =>
+      expect(screen.getByTestId("onboarding-spotlight")).toHaveStyle({ pointerEvents: "none" }),
+    );
+  });
+
+  test("a step whose target never mounts still shows, unanchored", async () => {
+    const orphan: OnboardingFlow = {
+      ...flow,
+      steps: [{ id: "gone", title: "Missing", body: "No anchor here.", target: "not-rendered" }],
+    };
+    render(wrap({ flows: [orphan] }));
+    await waitFor(() => expect(screen.getByTestId("onboarding-card")).toHaveTextContent("Missing"));
+    expect(screen.queryByTestId("onboarding-spotlight")).not.toBeInTheDocument();
+  });
+});
+
+describe("placeCard", () => {
+  const view = { vw: 1000, vh: 800, cardW: 340, placement: "auto" as const };
+  const hole = { left: 300, top: 100, width: 200, height: 60 };
+
+  test("prefers below the spotlight", () => {
+    expect(placeCard(hole, { w: 340, h: 180 }, view)).toEqual({ left: 230, top: 172 });
+  });
+
+  test("falls above when there is no room below", () => {
+    const low = { ...hole, top: 700 };
+    // 700 (anchor top) - 12 (gap) - 180 (card height)
+    expect(placeCard(low, { w: 340, h: 180 }, view).top).toBe(508);
+  });
+
+  test("goes to the side when neither above nor below fits", () => {
+    const tall = { left: 40, top: 20, width: 200, height: 760 };
+    const p = placeCard(tall, { w: 340, h: 180 }, view);
+    expect(p.left).toBe(252); // to the right of the anchor
+  });
+
+  test("centers when nothing fits", () => {
+    const huge = { left: 0, top: 0, width: 1000, height: 800 };
+    expect(placeCard(huge, { w: 340, h: 180 }, view)).toEqual({ left: 330, top: 310 });
+  });
+
+  test("centers a step with no anchor at all", () => {
+    expect(placeCard(null, { w: 340, h: 180 }, view)).toEqual({ left: 330, top: 310 });
+  });
+
+  test("clamps a card that would hang off the edge", () => {
+    const edge = { left: 960, top: 100, width: 30, height: 30 };
+    const p = placeCard(edge, { w: 340, h: 180 }, view);
+    expect(p.left).toBe(1000 - 340 - 16);
+  });
+});

package/src/__tests__/cssTokens.test.ts

@@ -0,0 +1,201 @@
+/**
+ * css/tokens.css is the CSS projection of theme.ts, and nothing in the build
+ * forces the two to stay in step — the docs site reads the stylesheet while the
+ * SPAs read the theme object, so a drifted value would show up as two products
+ * quietly disagreeing about what "secondary text" means. These tests re-derive
+ * every shared token from theme.ts and assert the stylesheet still says the same
+ * thing. Change a value in theme.ts and this fails until the CSS follows.
+ */
+import fs from "fs";
+import path from "path";
+import { lightTheme, darkTheme, DESKTOP_BREAKPOINT, makeTheme } from "../theme";
+
+const css = fs.readFileSync(path.join(__dirname, "../../css/tokens.css"), "utf8");
+
+/** The `:root` / `[data-theme="dark"]` block bodies, in source order. */
+function blocks(): { selector: string; body: string }[] {
+  const out: { selector: string; body: string }[] = [];
+  const re = /([^{}]+)\{([^}]*)\}/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(css))) {
+    out.push({ selector: m[1].trim().replace(/\s+/g, " "), body: m[2] });
+  }
+  return out;
+}
+
+/**
+ * Resolves a custom property the way the cascade would for `mode`: later
+ * declarations win, and a dark-scoped block only applies in dark mode.
+ */
+function token(name: string, mode: "light" | "dark" = "light"): string | undefined {
+  let value: string | undefined;
+  for (const { selector, body } of blocks()) {
+    const isDarkScope = selector.includes('[data-theme="dark"]');
+    const isLightScope = selector.includes(":root");
+    const applies = mode === "dark" ? isDarkScope || isLightScope : isLightScope && !selector.startsWith("[");
+    if (!applies) continue;
+    const m = new RegExp(`(?:^|;|\\n)\\s*${name.replace(/-/g, "\\-")}\\s*:\\s*([^;]+)`).exec(body);
+    if (m) value = m[1].trim();
+  }
+  return value;
+}
+
+/** Follows `var(--x)` chains until a literal value is reached. */
+function resolve(name: string, mode: "light" | "dark" = "light"): string | undefined {
+  let v = token(name, mode);
+  for (let i = 0; i < 8 && v?.startsWith("var("); i++) {
+    v = token(v.slice(4, -1).trim(), mode);
+  }
+  return v;
+}
+
+describe("ink ramp", () => {
+  for (const mode of ["light", "dark"] as const) {
+    const theme = makeTheme(mode);
+    it(`matches theme.ts in ${mode} mode`, () => {
+      for (const [step, hex] of Object.entries(theme.ink)) {
+        expect([`--ink-${step}`, resolve(`--ink-${step}`, mode)]).toEqual([`--ink-${step}`, hex]);
+      }
+    });
+  }
+});
+
+describe("semantic color aliases", () => {
+  // theme.ts key -> CSS custom property. Only the roles both platforms use.
+  const map: Record<string, string> = {
+    textPrimary: "--text-primary",
+    textSecondary: "--text-secondary",
+    textTertiary: "--text-tertiary",
+    textDisabled: "--text-disabled",
+    textInverted: "--text-inverted",
+    surfacePage: "--surface-page",
+    surfaceRaised: "--surface-raised",
+    surfaceTopBar: "--surface-topbar",
+    surfaceSunken: "--surface-sunken",
+    surfaceHover: "--surface-hover",
+    surfaceActive: "--surface-active",
+    surfaceInverted: "--surface-inverted",
+    borderSubtle: "--border-subtle",
+    borderDefault: "--border-default",
+    borderHover: "--border-hover",
+    borderStrong: "--border-strong",
+    borderFocus: "--border-focus",
+    borderActive: "--border-active",
+    diffAddFg: "--diff-add-fg",
+    diffAddBg: "--diff-add-bg",
+    diffDelFg: "--diff-del-fg",
+    diffDelBg: "--diff-del-bg",
+  };
+
+  for (const mode of ["light", "dark"] as const) {
+    const theme = mode === "dark" ? darkTheme : lightTheme;
+    it(`matches theme.ts in ${mode} mode`, () => {
+      for (const [key, prop] of Object.entries(map)) {
+        const want = (theme.color as Record<string, string>)[key];
+        expect([prop, resolve(prop, mode)]).toEqual([prop, want]);
+      }
+    });
+  }
+
+  it("declares the aliases inside the dark scope too", () => {
+    // A :root-only alias would keep resolving against the light ramp whenever
+    // [data-theme] sits on a nested container rather than <html>, which is how
+    // the dark top bar over a light page is built.
+    const darkAliasBlock = blocks().find(
+      (b) => b.selector.includes('[data-theme="dark"]') && b.body.includes("--text-primary:"),
+    );
+    expect(darkAliasBlock).toBeDefined();
+  });
+});
+
+describe("scales", () => {
+  it("has the type scale from theme.ts", () => {
+    const map: Record<string, keyof typeof lightTheme.type> = {
+      "--fs-display": "display",
+      "--fs-h1": "h1",
+      "--fs-h2": "h2",
+      "--fs-h3": "h3",
+      "--fs-body": "body",
+      "--fs-body-lg": "bodyLg",
+      "--fs-sm": "sm",
+      "--fs-xs": "xs",
+      "--fs-mono": "mono",
+      "--fs-mono-sm": "monoSm",
+    };
+    for (const [prop, key] of Object.entries(map)) {
+      expect([prop, resolve(prop)]).toEqual([prop, `${lightTheme.type[key].size}px`]);
+      const linePro = prop.replace("--fs-", "--lh-");
+      expect([linePro, resolve(linePro)]).toEqual([linePro, `${lightTheme.type[key].line}px`]);
+    }
+  });
+
+  it("has the font weights from theme.ts", () => {
+    for (const [key, weight] of Object.entries(lightTheme.weight)) {
+      const prop = `--fw-${key}`;
+      expect([prop, resolve(prop)]).toEqual([prop, weight]);
+    }
+  });
+
+  it("has the letter spacing from theme.ts", () => {
+    for (const [key, px] of Object.entries(lightTheme.letterSpacing)) {
+      const prop = `--ls-${key}`;
+      const want = px === 0 ? "0" : `${px}px`;
+      expect([prop, resolve(prop)]).toEqual([prop, want]);
+    }
+  });
+
+  it("has the 4px spacing grid from theme.ts", () => {
+    for (const n of [0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24]) {
+      const prop = `--space-${n}`;
+      const want = n === 0 ? "0" : `${lightTheme.space(n)}px`;
+      expect([prop, resolve(prop)]).toEqual([prop, want]);
+    }
+  });
+
+  it("has the radii from theme.ts", () => {
+    for (const [key, px] of Object.entries(lightTheme.radius)) {
+      const prop = `--radius-${key}`;
+      expect([prop, resolve(prop)]).toEqual([prop, `${px}px`]);
+    }
+  });
+
+  it("has the control heights from theme.ts", () => {
+    for (const [key, px] of Object.entries(lightTheme.control)) {
+      const prop = `--control-${key}`;
+      expect([prop, resolve(prop)]).toEqual([prop, `${px}px`]);
+    }
+  });
+
+  it("has the layout dims from theme.ts", () => {
+    const map: Record<string, keyof typeof lightTheme.layout> = {
+      "--sidebar-w": "sidebar",
+      "--column-w": "column",
+      "--topbar-h": "topbar",
+      "--container": "container",
+    };
+    for (const [prop, key] of Object.entries(map)) {
+      expect([prop, resolve(prop)]).toEqual([prop, `${lightTheme.layout[key]}px`]);
+    }
+  });
+
+  it("has the durations from theme.ts", () => {
+    for (const [key, ms] of Object.entries(lightTheme.duration)) {
+      const prop = `--dur-${key}`;
+      expect([prop, resolve(prop)]).toEqual([prop, `${ms}ms`]);
+    }
+  });
+
+  it("has the desktop breakpoint from theme.ts", () => {
+    expect(resolve("--desktop-breakpoint")).toBe(`${DESKTOP_BREAKPOINT}px`);
+  });
+});
+
+describe("font stacks", () => {
+  it("matches the web stacks theme.ts selects", () => {
+    // theme.ts resolves Platform.select to the web branch under jest's
+    // react-native-web mapping, so these are the exact strings the SPAs use.
+    const normalize = (s: string) => s.replace(/['"]/g, "").replace(/\s+/g, " ").trim();
+    expect(normalize(resolve("--font-sans")!)).toBe(normalize(lightTheme.font.sans));
+    expect(normalize(resolve("--font-mono")!)).toBe(normalize(lightTheme.font.mono));
+  });
+});

package/src/__tests__/fieldComponents.test.ts

@@ -0,0 +1,43 @@
+import { componentAllowed, defaultComponent, resolveComponent } from "../fieldComponents";
+
+// Mirror of packages/importer/schema/components_test.go — the Go file is the
+// source of truth; these pin the TS mirror to the same behavior.
+
+test("built-in components stay type-restricted", () => {
+  expect(componentAllowed("string", "slug")).toBe(true);
+  expect(componentAllowed("boolean", "slug")).toBe(false);
+  expect(componentAllowed("string", "nope")).toBe(false);
+});
+
+test("plugin: components are whitelisted for every type", () => {
+  for (const type of ["string", "boolean", "integer", "float", "array", "object"]) {
+    expect(componentAllowed(type, "plugin:color")).toBe(true);
+  }
+  // The bare prefix names nothing.
+  expect(componentAllowed("string", "plugin:")).toBe(false);
+});
+
+test("defaults are unaffected by the plugin whitelist", () => {
+  expect(defaultComponent("string")).toBe("input");
+  expect(resolveComponent({ type: "string" })).toBe("input");
+  expect(resolveComponent({ type: "string", component: "textarea" })).toBe("textarea");
+});
+
+// resolveComponent picks a *built-in* control. It is only ever consulted after
+// the host has declined to render a plugin (createPluginRenderField returns
+// undefined when the plugin is absent or refused the type), so returning the
+// plugin's own name would name a control nothing implements — which fell
+// through to the single-line input.
+test("a plugin component falls back to the type's default control", () => {
+  expect(resolveComponent({ type: "string", component: "plugin:color" })).toBe("input");
+  expect(resolveComponent({ type: "array", component: "plugin:tags" })).toBe("list");
+  expect(resolveComponent({ type: "boolean", component: "plugin:toggle" })).toBe("checkbox");
+});
+
+// A field bound to the file body is a whole document's prose. Whatever the
+// plugin would have done with it, the fallback has to be multi-line.
+test("a body-source field falls back to the multiline control", () => {
+  expect(resolveComponent({ type: "string", component: "plugin:mdx", source: "body" })).toBe("textarea");
+  // `component: body` is a built-in and keeps rendering its own editor.
+  expect(resolveComponent({ type: "string", component: "body", source: "body" })).toBe("body");
+});

package/src/__tests__/reorder.test.ts

@@ -0,0 +1,58 @@
+import { clamp, reorder, slotAtX } from "../components/reorder";
+
+describe("clamp", () => {
+  test("bounds a value into range", () => {
+    expect(clamp(5, 0, 10)).toBe(5);
+    expect(clamp(-3, 0, 10)).toBe(0);
+    expect(clamp(42, 0, 10)).toBe(10);
+  });
+});
+
+describe("reorder", () => {
+  const ids = ["a", "b", "c", "d"];
+
+  test("moves an item later in the list", () => {
+    // Drop "a" into the gap after "c" (slot 3 in original coords).
+    expect(reorder(ids, "a", 3)).toEqual(["b", "c", "a", "d"]);
+  });
+
+  test("moves an item earlier in the list", () => {
+    expect(reorder(ids, "d", 1)).toEqual(["a", "d", "b", "c"]);
+  });
+
+  test("dropping into the same position is a no-op ordering", () => {
+    expect(reorder(ids, "b", 1)).toEqual(["a", "b", "c", "d"]);
+    expect(reorder(ids, "b", 2)).toEqual(["a", "b", "c", "d"]);
+  });
+
+  test("slot past the end appends", () => {
+    expect(reorder(ids, "a", 4)).toEqual(["b", "c", "d", "a"]);
+  });
+
+  test("unknown id returns the input unchanged", () => {
+    expect(reorder(ids, "z", 0)).toBe(ids);
+  });
+});
+
+describe("slotAtX", () => {
+  const widths = [100, 100, 100];
+
+  test("before the first midpoint → slot 0", () => {
+    expect(slotAtX(10, widths)).toBe(0);
+    expect(slotAtX(49, widths)).toBe(0);
+  });
+
+  test("past a column's midpoint advances the slot", () => {
+    expect(slotAtX(60, widths)).toBe(1); // past col 0's midpoint (50)
+    expect(slotAtX(160, widths)).toBe(2); // past col 1's midpoint (150)
+  });
+
+  test("past the last midpoint → final slot", () => {
+    expect(slotAtX(500, widths)).toBe(3);
+  });
+
+  test("handles uneven widths", () => {
+    expect(slotAtX(30, [40, 200])).toBe(1); // past the narrow first column (mid 20)
+    expect(slotAtX(10, [40, 200])).toBe(0);
+  });
+});