@jskit-ai/shell-web 0.1.251 → 0.1.252

package/test/bootstrapRuntime.test.js

@@ -134,3 +134,101 @@ test("shell bootstrap runtime refreshes /api/bootstrap on init and applies regis
     consoleowner: true
   });
 });
+
+test("shell bootstrap runtime reports a failing payload handler and keeps refreshing afterwards", async () => {
+  const placementRuntime = createPlacementRuntime({});
+  const calls = [];
+  const handledErrors = [];
+  const reported = [];
+  let failNextApply = true;
+  let failNextResolve = false;
+  const handlers = createBootstrapPayloadHandlerRegistry();
+  handlers.register(Object.freeze({
+    handlerId: "test.bootstrap.flaky",
+    order: 0,
+    resolveBootstrapRequest() {
+      if (failNextResolve) {
+        failNextResolve = false;
+        throw new Error("resolve failed");
+      }
+      return {};
+    },
+    applyBootstrapPayload() {
+      if (failNextApply) {
+        failNextApply = false;
+        throw new Error("apply failed");
+      }
+    },
+    handleBootstrapError({ error, request }) {
+      handledErrors.push({ message: error.message, path: request.path });
+    }
+  }));
+
+  const runtime = createShellBootstrapRuntime({
+    handlers,
+    placementRuntime,
+    requestRecoveryRuntime: {
+      report(error, options) {
+        reported.push({ message: error.message, source: options.source });
+      }
+    },
+    logger: { warn() {}, info() {}, error() {}, debug() {} },
+    fetchImplementation: async (url) => {
+      calls.push(String(url || ""));
+      return {
+        ok: true,
+        async json() {
+          return { ok: true };
+        }
+      };
+    }
+  });
+
+  assert.equal(await runtime.refresh("manual"), null);
+  assert.deepEqual(handledErrors, [{ message: "apply failed", path: "/api/bootstrap" }]);
+  assert.deepEqual(reported, [{ message: "apply failed", source: "shell-web.bootstrap" }]);
+
+  failNextResolve = true;
+  assert.equal(await runtime.refresh("manual"), null);
+  assert.deepEqual(handledErrors[1], { message: "resolve failed", path: "/api/bootstrap" });
+
+  assert.deepEqual(await runtime.refresh("manual"), { ok: true });
+  assert.deepEqual(calls, ["/api/bootstrap", "/api/bootstrap"]);
+});
+
+test("shell bootstrap runtime queue recovers after a refresh rejects", async () => {
+  const handlers = createBootstrapPayloadHandlerRegistry();
+  let failErrorHandler = true;
+  handlers.register(Object.freeze({
+    handlerId: "test.bootstrap.error-handler",
+    order: 0,
+    applyBootstrapPayload() {},
+    handleBootstrapError() {
+      if (failErrorHandler) {
+        failErrorHandler = false;
+        throw new Error("error handler failed");
+      }
+    }
+  }));
+  let fail = true;
+  const runtime = createShellBootstrapRuntime({
+    handlers,
+    placementRuntime: createPlacementRuntime({}),
+    logger: { warn() {}, info() {}, error() {}, debug() {} },
+    fetchImplementation: async () => {
+      if (fail) {
+        fail = false;
+        return { ok: false, status: 503 };
+      }
+      return {
+        ok: true,
+        async json() {
+          return { recovered: true };
+        }
+      };
+    }
+  });
+
+  await assert.rejects(runtime.refresh("manual"), /error handler failed/);
+  assert.deepEqual(await runtime.refresh("manual"), { recovered: true });
+});

package/test/errorActions.test.js

@@ -6,6 +6,7 @@ import { compileScript, parse } from "@vue/compiler-sfc";
 import { createRenderer, defineComponent, h, nextTick } from "vue";
 import { createPinia } from "pinia";
 import { createErrorRuntime } from "../src/client/error/runtime.js";
+import { SHELL_WEB_ERROR_RUNTIME_KEY } from "../src/client/error/inject.js";
 import { createDefaultMaterialErrorPresenters } from "../src/client/error/presenters.js";
 import { createErrorPresentationStore } from "../src/client/error/store.js";
 import { useShellErrorPresentationStore } from "../src/client/stores/useShellErrorPresentationStore.js";
@@ -48,7 +49,7 @@ function fixture(t) {
   const pinia = createPinia();
   app.use(pinia);
   useShellErrorPresentationStore(pinia).attachRuntimeStore(store);
-  app.provide("jskit.shell-web.runtime.web-error.client", runtime);
+  app.provide(SHELL_WEB_ERROR_RUNTIME_KEY, runtime);
   for (const name of ["VSnackbar", "VDialog", "VCard", "VCardTitle", "VCardText", "VCardActions", "VSpacer", "VAlert", "VBtn"]) {
     app.component(name, defineComponent({ setup: (_props, { slots }) => () =>
       h(name, {}, [slots.default?.(), slots.actions?.()]) }));

package/test/errorRuntime.test.js

@@ -231,3 +231,33 @@ test("error runtime throws when no presenter supports channel", () => {
     /No error presenter supports channel "dialog"/,
   );
 });
+
+test("error runtime honours an explicit persist on any channel and defaults by channel otherwise", async () => {
+  const { createErrorPresentationStore } = await import("../src/client/error/store.js");
+  const { createDefaultMaterialErrorPresenters } = await import("../src/client/error/presenters.js");
+  const store = createErrorPresentationStore({ now: () => 1000 });
+  const runtime = createErrorRuntime({
+    presenters: createDefaultMaterialErrorPresenters({ store }),
+    moduleDefaultPresenterId: "material.snackbar"
+  });
+
+  const persistentSnackbar = runtime.report({ message: "Keep me", channel: "snackbar", persist: true });
+  const transientSnackbar = runtime.report({ message: "Drop me", channel: "snackbar" });
+  const defaultBanner = runtime.report({ message: "Offline", intent: "app-recoverable" });
+  const transientDialog = runtime.report({ message: "Heads up", channel: "dialog", persist: false });
+
+  assert.equal(persistentSnackbar.decision.persist, true);
+  assert.equal(transientSnackbar.decision.persist, false);
+  assert.equal(defaultBanner.decision.persist, true);
+  assert.equal(transientDialog.decision.persist, false);
+  const { channels } = store.getState();
+  assert.deepEqual(channels.snackbar.map((entry) => [entry.message, entry.persist]), [["Keep me", true], ["Drop me", false]]);
+  assert.deepEqual(channels.banner.map((entry) => [entry.message, entry.persist]), [["Offline", true]]);
+  assert.deepEqual(channels.dialog.map((entry) => [entry.message, entry.persist]), [["Heads up", false]]);
+});
+
+test("default error policy decides only channel and severity", () => {
+  const policy = createDefaultErrorPolicy({ defaultSeverity: "warning" });
+
+  assert.deepEqual(policy({ message: "Saved?", action: { label: "Retry" } }), { channel: "snackbar", severity: "warning" });
+});

package/test/linkResolver.test.js

@@ -1,6 +1,7 @@
 import assert from "node:assert/strict";
 import test from "node:test";
-import { resolveShellLinkPath } from "../src/client/navigation/linkResolver.js";
+import { createApp } from "vue";
+import { resolveShellLinkPath, useShellLinkResolver } from "../src/client/navigation/linkResolver.js";
 
 function createPlacementContext() {
   return {
@@ -110,3 +111,24 @@ test("resolveShellLinkPath uses deterministic surface fallback when context is m
 
   assert.equal(to, "/admin/contacts/5");
 });
+
+test("resolveShellLinkPath uses the first value of a repeated route param", () => {
+  const to = resolveShellLinkPath({
+    context: createPlacementContext(),
+    surface: "app",
+    params: {
+      workspaceSlug: [" acme ", "other"]
+    },
+    relativePath: "/projects"
+  });
+
+  assert.equal(to, "/w/acme/projects");
+});
+
+test("useShellLinkResolver exposes only surface-relative resolve", () => {
+  const app = createApp({ render: () => null });
+  const resolver = app.runWithContext(() => useShellLinkResolver({ surface: "console" }));
+
+  assert.deepEqual(Object.keys(resolver), ["resolve"]);
+  assert.equal(resolver.resolve("/reports"), "/console/reports");
+});

package/test/menuLinkTarget.test.js

@@ -0,0 +1,77 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { resolveMenuLinkTarget } from "../src/client/support/menuLinkTarget.js";
+
+function createPlacementContext() {
+  return {
+    surfaceConfig: {
+      defaultSurfaceId: "home",
+      enabledSurfaceIds: ["home", "app"],
+      surfacesById: {
+        home: {
+          id: "home",
+          pagesRoot: "home",
+          routeBase: "/home",
+          enabled: true,
+          requiresWorkspace: false
+        },
+        app: {
+          id: "app",
+          pagesRoot: "w/[workspaceSlug]",
+          routeBase: "/w/:workspaceSlug",
+          enabled: true,
+          requiresWorkspace: true
+        }
+      }
+    }
+  };
+}
+
+test("menu link target returns an explicit absolute target without resolving the target surface", () => {
+  assert.equal(
+    resolveMenuLinkTarget({
+      to: "/w/acme/x",
+      surface: "app",
+      currentSurfaceId: "home",
+      placementContext: createPlacementContext(),
+      routeParams: {}
+    }),
+    "/w/acme/x"
+  );
+});
+
+test("menu link target resolves suffixes for missing and relative targets", () => {
+  const placementContext = createPlacementContext();
+  assert.equal(
+    resolveMenuLinkTarget({
+      surface: "app",
+      currentSurfaceId: "home",
+      placementContext,
+      scopedSuffix: "/projects",
+      routeParams: { workspaceSlug: "acme" }
+    }),
+    "/w/acme/projects"
+  );
+  assert.equal(
+    resolveMenuLinkTarget({
+      to: "./settings",
+      currentSurfaceId: "home",
+      placementContext,
+      unscopedSuffix: "/settings"
+    }),
+    "/home/settings"
+  );
+});
+
+test("menu link target still requires surface params when it must build the path", () => {
+  assert.throws(
+    () => resolveMenuLinkTarget({
+      surface: "app",
+      currentSurfaceId: "home",
+      placementContext: createPlacementContext(),
+      scopedSuffix: "/projects",
+      routeParams: {}
+    }),
+    /Missing required surface route params/
+  );
+});

package/test/routeSwipeGesture.test.js

@@ -0,0 +1,49 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createRouteSwipeGesture } from "../src/client/support/routeSwipeGesture.js";
+
+function createClock() {
+  const clock = { time: 0, now: () => clock.time };
+  return clock;
+}
+
+test("route swipe gesture navigates on a fast horizontal swipe", () => {
+  const clock = createClock();
+  const gesture = createRouteSwipeGesture({ now: clock.now });
+  gesture.start({ pointerId: 1, clientX: 200, clientY: 100 });
+  clock.time = 50;
+  assert.deepEqual(gesture.move({ pointerId: 1, clientX: 185, clientY: 102 }), { claim: true, offset: 0 });
+  clock.time = 100;
+  assert.deepEqual(gesture.move({ pointerId: 1, clientX: 150, clientY: 104 }), { claim: true, offset: 1 });
+  assert.equal(gesture.end({ pointerId: 1, clientX: 150, clientY: 104 }), 0);
+});
+
+test("route swipe gesture resolves the direction on pointer end", () => {
+  const clock = createClock();
+  const gesture = createRouteSwipeGesture({ now: clock.now });
+  gesture.start({ pointerId: 1, clientX: 100, clientY: 100 });
+  clock.time = 100;
+  assert.equal(gesture.end({ pointerId: 1, clientX: 140, clientY: 100 }), -1);
+  assert.equal(gesture.end({ pointerId: 1, clientX: 140, clientY: 100 }), 0);
+});
+
+test("route swipe gesture stays dropped after vertical drift even when the finger turns sideways", () => {
+  const clock = createClock();
+  const gesture = createRouteSwipeGesture({ now: clock.now });
+  gesture.start({ pointerId: 1, clientX: 200, clientY: 100 });
+  clock.time = 40;
+  assert.deepEqual(gesture.move({ pointerId: 1, clientX: 200, clientY: 140 }), { claim: false, offset: 0 });
+  clock.time = 120;
+  assert.deepEqual(gesture.move({ pointerId: 1, clientX: 140, clientY: 110 }), { claim: false, offset: 0 });
+  assert.equal(gesture.end({ pointerId: 1, clientX: 140, clientY: 110 }), 0);
+});
+
+test("route swipe gesture ignores other pointers and cancelled pointers", () => {
+  const clock = createClock();
+  const gesture = createRouteSwipeGesture({ now: clock.now });
+  gesture.start({ pointerId: 1, clientX: 200, clientY: 100 });
+  clock.time = 100;
+  assert.deepEqual(gesture.move({ pointerId: 2, clientX: 100, clientY: 100 }), { claim: false, offset: 0 });
+  gesture.cancel({ pointerId: 1 });
+  assert.equal(gesture.end({ pointerId: 1, clientX: 100, clientY: 100 }), 0);
+});

package/test/settingsPlacementContract.test.js

@@ -83,10 +83,17 @@ test("shell-web shell layout registers navigation at the app layout level", asyn
   assert.match(source, /target="shell-layout:supporting-side-panel"/);
   assert.match(source, /data-testid="jskit-shell-supporting-bottom-sheet"/);
   assert.match(source, /data-testid="jskit-shell-supporting-side-panel"/);
-  assert.match(source, /inject\("jskit\.shell-web\.runtime\.web-refresh\.client", null\)/);
-  assert.match(source, /window\.addEventListener\("pointerdown", handlePullPointerDown/);
-  assert.match(source, /window\.addEventListener\("touchmove", handlePullTouchMove/);
-  assert.match(source, /refreshRuntime\.refresh\("pull-to-refresh"\)/);
+  assert.match(source, /inject\(SHELL_WEB_REFRESH_RUNTIME_KEY, null\)/);
+  const refreshRuntimeSource = await readFile(path.join(PACKAGE_DIR, "src", "client", "runtime", "refreshRuntime.js"), "utf8");
+  assert.match(refreshRuntimeSource, /SHELL_WEB_REFRESH_RUNTIME_KEY = "jskit\.shell-web\.runtime\.web-refresh\.client"/);
+  assert.match(source, /useShellPullToRefresh\(\{ enabled: isCompactLayout, refreshRuntime \}\)/);
+  const pullToRefreshSource = await readFile(
+    path.join(PACKAGE_DIR, "src", "client", "composables", "useShellPullToRefresh.js"),
+    "utf8"
+  );
+  assert.match(pullToRefreshSource, /window\.addEventListener\("pointerdown", handlePullPointerDown/);
+  assert.match(pullToRefreshSource, /window\.addEventListener\("touchmove", handlePullTouchMove/);
+  assert.match(pullToRefreshSource, /refreshRuntime\.refresh\("pull-to-refresh"\)/);
   assert.match(source, /data-testid="jskit-shell-pull-refresh"/);
   assert.match(source, /target="shell-layout:primary-menu"[\s\S]*default/);
   assert.doesNotMatch(source, /target="shell-layout:primary-bottom-nav"[\s\S]*default/);
@@ -255,9 +262,10 @@ test("shell-web route transition keeps mobile route motion placement-driven", as
   assert.match(source, /swipeEnabled:\s*\{[\s\S]*default:\s*true/);
   assert.match(source, /window\.addEventListener\("pointerdown", handlePointerDown/);
   assert.match(source, /document\.documentElement\.classList\.toggle\("shell-route-swipe-enabled", enabled\)/);
-  assert.match(source, /navigateBySwipe\(deltaX < 0 \? 1 : -1\)/);
+  assert.match(source, /createRouteSwipeGesture\(\)/);
+  assert.match(source, /const offset = swipeGesture\.end\(event\);[\s\S]*navigateBySwipe\(offset\)/);
   assert.match(source, /router\.push\(nextEntry\.href\)/);
-  assert.match(source, /isSwipeIgnoredTarget/);
+  assert.match(source, /isShellGestureIgnoredTarget\(event\.target\)/);
   assert.match(source, /touch-action:\s*pan-y/);
   assert.match(source, /\.shell-route-transition\s*\{[\s\S]*display:\s*flex/);
   assert.match(source, /\.shell-route-transition\s*\{[\s\S]*min-height:\s*0/);
@@ -571,6 +579,8 @@ test("shell-web pattern home page relies on adaptive navigation instead of dead
   assert.match(source, /--home-surface-panel-padding/);
   assert.doesNotMatch(source, /generated-ui/u);
   assert.match(source, /Service health/);
+  assert.match(source, /<v-skeleton-loader/u);
+  assert.doesNotMatch(source, /loading\.\.\.|v-progress-circular/u);
   assert.match(source, /to="\/home\/settings\/general"/);
   assert.doesNotMatch(source, /Use bottom navigation|Replace this content|Main public surface/);
   assert.doesNotMatch(source, /\/console/);

package/test/shellGestureSupport.test.js

@@ -0,0 +1,46 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { isPrimaryTouchPointer, isShellGestureIgnoredTarget } from "../src/client/support/gestureTargets.js";
+import { resolveShellLayoutClass } from "../src/client/support/shellLayoutClass.js";
+
+function createTarget(matchingSelectors = []) {
+  return {
+    closest(selectorList) {
+      const selectors = selectorList.split(",");
+      return matchingSelectors.some((selector) => selectors.includes(selector)) ? {} : null;
+    }
+  };
+}
+
+test("shell layout class follows the display breakpoint, then the viewport width", () => {
+  assert.equal(resolveShellLayoutClass("xs", 1600), "compact");
+  assert.equal(resolveShellLayoutClass("SM"), "compact");
+  assert.equal(resolveShellLayoutClass("md", 300), "medium");
+  assert.equal(resolveShellLayoutClass("xxl", 300), "expanded");
+  assert.equal(resolveShellLayoutClass("", 599), "compact");
+  assert.equal(resolveShellLayoutClass(undefined, 600), "medium");
+  assert.equal(resolveShellLayoutClass("", 1280), "expanded");
+  assert.equal(resolveShellLayoutClass("", 0), "expanded");
+});
+
+test("shell gestures follow primary touch and pen pointers only", () => {
+  assert.equal(isPrimaryTouchPointer({ isPrimary: true, button: 0, pointerType: "touch" }), true);
+  assert.equal(isPrimaryTouchPointer({ button: 0, pointerType: "pen" }), true);
+  assert.equal(isPrimaryTouchPointer({ isPrimary: true, button: 0, pointerType: "mouse" }), false);
+  assert.equal(isPrimaryTouchPointer({ isPrimary: false, button: 0, pointerType: "touch" }), false);
+  assert.equal(isPrimaryTouchPointer({ isPrimary: true, button: 2, pointerType: "touch" }), false);
+});
+
+test("shell gestures skip interactive targets and honour extra ignore selectors", () => {
+  assert.equal(isShellGestureIgnoredTarget(createTarget(["button"])), true);
+  assert.equal(isShellGestureIgnoredTarget(createTarget(["[data-shell-swipe-ignore]"])), true);
+  assert.equal(isShellGestureIgnoredTarget(createTarget(["[data-shell-pull-refresh-ignore]"])), false);
+  assert.equal(
+    isShellGestureIgnoredTarget(createTarget(["[data-shell-pull-refresh-ignore]"]), {
+      extraSelectors: ["[data-shell-pull-refresh-ignore]"]
+    }),
+    true
+  );
+  assert.equal(isShellGestureIgnoredTarget(createTarget([])), false);
+  assert.equal(isShellGestureIgnoredTarget(null), false);
+});

package/test/surfaceContext.test.js

@@ -3,6 +3,7 @@ import test from "node:test";
 import {
   buildSurfaceConfigContext,
   readPlacementSurfaceConfig,
+  resolveAllowedOriginsFromPlacementContext,
   joinSurfacePath,
   resolveSurfaceIdFromPlacementPathname,
   resolveSurfaceRootPathFromPlacementContext,
@@ -182,3 +183,55 @@ test("resolveSurfaceNavigationTargetFromPlacementContext resolves cross-origin t
     external: false
   });
 });
+
+test("resolveAllowedOriginsFromPlacementContext collects current and surface origins", () => {
+  const originalWindow = globalThis.window;
+  globalThis.window = {
+    location: {
+      origin: "https://current.example.com"
+    }
+  };
+
+  try {
+    const origins = resolveAllowedOriginsFromPlacementContext({
+      surfaceConfig: {
+        surfacesById: {
+          home: { origin: "https://home.example.com" },
+          app: { origin: "https://app.example.com" },
+          duplicate: { origin: "https://home.example.com" },
+          invalid: { origin: "mailto:hello@example.com" }
+        }
+      }
+    });
+
+    assert.deepEqual(origins, [
+      "https://current.example.com",
+      "https://home.example.com",
+      "https://app.example.com"
+    ]);
+  } finally {
+    if (typeof originalWindow === "undefined") {
+      delete globalThis.window;
+    } else {
+      globalThis.window = originalWindow;
+    }
+  }
+});
+
+test("resolveAllowedOriginsFromPlacementContext reads surfaces through the placement surface config", () => {
+  const originalWindow = globalThis.window;
+  delete globalThis.window;
+  try {
+    assert.deepEqual(resolveAllowedOriginsFromPlacementContext(null), []);
+    assert.deepEqual(
+      resolveAllowedOriginsFromPlacementContext({
+        surfaceConfig: { surfacesById: { Admin: { origin: "https://ADMIN.example.com/x" } } }
+      }),
+      ["https://admin.example.com"]
+    );
+  } finally {
+    if (typeof originalWindow !== "undefined") {
+      globalThis.window = originalWindow;
+    }
+  }
+});

package/test/useShellPullToRefresh.test.js

@@ -0,0 +1,123 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createRenderer, defineComponent, nextTick, ref } from "vue";
+import { useShellPullToRefresh } from "../src/client/composables/useShellPullToRefresh.js";
+
+function node(type) {
+  return { type, props: {}, children: [], parent: null, text: "" };
+}
+
+const renderer = createRenderer({
+  createElement: node,
+  createText: () => node("text"),
+  createComment: () => node("comment"),
+  setText() {},
+  setElementText() {},
+  patchProp() {},
+  parentNode: (item) => item.parent,
+  nextSibling: () => null,
+  insert(item, parent) {
+    item.parent = parent;
+    parent.children.push(item);
+  },
+  remove(item) {
+    item.parent?.children.splice(item.parent.children.indexOf(item), 1);
+  }
+});
+
+function installWindow() {
+  const listeners = new Map();
+  globalThis.window = {
+    scrollY: 0,
+    addEventListener(type, handler) {
+      listeners.set(type, handler);
+    },
+    removeEventListener(type, handler) {
+      if (listeners.get(type) === handler) {
+        listeners.delete(type);
+      }
+    }
+  };
+  globalThis.document = { documentElement: { scrollTop: 0 }, body: { scrollTop: 0 } };
+  return {
+    listeners,
+    dispatch(type, event) {
+      listeners.get(type)?.({ preventDefault() {}, cancelable: true, target: { closest: () => null }, ...event });
+    }
+  };
+}
+
+function mountPull({ enabled = true } = {}) {
+  const page = installWindow();
+  const refreshes = [];
+  const refreshRuntime = {
+    async refresh(reason) {
+      refreshes.push(reason);
+    }
+  };
+  let pull = null;
+  const app = renderer.createApp(defineComponent({
+    setup() {
+      pull = useShellPullToRefresh({ enabled: ref(enabled), refreshRuntime });
+      return () => null;
+    }
+  }));
+  app.mount(node("root"));
+  return { app, page, pull, refreshes };
+}
+
+const touchPointer = { isPrimary: true, button: 0, pointerType: "touch", pointerId: 7 };
+
+test("pull to refresh refreshes after a long enough pull and resets", async () => {
+  const { app, page, pull, refreshes } = mountPull();
+
+  page.dispatch("pointerdown", { ...touchPointer, clientX: 100, clientY: 10 });
+  page.dispatch("pointermove", { ...touchPointer, clientX: 102, clientY: 210 });
+  assert.equal(pull.pullDistance.value, 110);
+  assert.equal(pull.pullRefreshLabel.value, "Release to refresh");
+  assert.equal(pull.pullIndicatorVisible.value, true);
+
+  page.dispatch("pointerup", { ...touchPointer });
+  assert.deepEqual(refreshes, ["pull-to-refresh"]);
+  await nextTick();
+  await nextTick();
+  assert.equal(pull.pullRefreshing.value, false);
+  assert.equal(pull.pullDistance.value, 0);
+
+  app.unmount();
+  assert.equal(page.listeners.size, 0);
+});
+
+test("pull to refresh follows the touch after the browser cancels the pointer", () => {
+  const { app, page, pull, refreshes } = mountPull();
+
+  page.dispatch("pointerdown", { ...touchPointer, clientX: 100, clientY: 10 });
+  page.dispatch("pointercancel", { ...touchPointer });
+  page.dispatch("touchmove", { touches: [{ identifier: 1, clientX: 100, clientY: 60 }] });
+  assert.equal(pull.pullDistance.value, 28);
+  assert.equal(pull.pullRefreshLabel.value, "Pull to refresh");
+
+  page.dispatch("touchend", { changedTouches: [{ identifier: 1 }] });
+  assert.deepEqual(refreshes, []);
+  assert.equal(pull.pullDistance.value, 0);
+  app.unmount();
+});
+
+test("pull to refresh stays off outside the compact layout and on ignored targets", () => {
+  const wide = mountPull({ enabled: false });
+  wide.page.dispatch("pointerdown", { ...touchPointer, clientX: 100, clientY: 10 });
+  wide.page.dispatch("pointermove", { ...touchPointer, clientX: 100, clientY: 210 });
+  assert.equal(wide.pull.pullDistance.value, 0);
+  wide.app.unmount();
+
+  const compact = mountPull();
+  compact.page.dispatch("pointerdown", {
+    ...touchPointer,
+    clientX: 100,
+    clientY: 10,
+    target: { closest: (selectors) => (selectors.includes("[data-shell-pull-refresh-ignore]") ? {} : null) }
+  });
+  compact.page.dispatch("pointermove", { ...touchPointer, clientX: 100, clientY: 210 });
+  assert.equal(compact.pull.pullDistance.value, 0);
+  compact.app.unmount();
+});