@jskit-ai/shell-web 0.1.250 → 0.1.252

package/src/client/composables/useShellPullToRefresh.js

@@ -0,0 +1,260 @@
+import { computed, onBeforeUnmount, onMounted, ref, unref } from "vue";
+import { isPrimaryTouchPointer, isShellGestureIgnoredTarget } from "../support/gestureTargets.js";
+
+const PULL_REFRESH_TRIGGER_DISTANCE = 72;
+const PULL_REFRESH_MAX_DISTANCE = 112;
+const PULL_REFRESH_IGNORED_SELECTORS = Object.freeze(["[data-shell-pull-refresh-ignore]"]);
+
+function isAtPageTop() {
+  if (typeof window !== "object" || typeof document !== "object") {
+    return false;
+  }
+
+  const documentScrollTop = Number(document.documentElement?.scrollTop || 0);
+  const bodyScrollTop = Number(document.body?.scrollTop || 0);
+  return Math.max(Number(window.scrollY || 0), documentScrollTop, bodyScrollTop) <= 0;
+}
+
+// Compact-layout pull-to-refresh. Pointer events start the gesture where the
+// browser supports them; touch events carry it on after the browser cancels the
+// pointer to scroll, and start it where pointer events are missing.
+function useShellPullToRefresh({ enabled, refreshRuntime = null } = {}) {
+  const pullDistance = ref(0);
+  const pullRefreshing = ref(false);
+  let activePull = null;
+
+  const pullProgress = computed(() =>
+    Math.min(100, Math.round((pullDistance.value / PULL_REFRESH_TRIGGER_DISTANCE) * 100))
+  );
+  const pullIndicatorVisible = computed(() =>
+    Boolean(unref(enabled) && (pullDistance.value > 0 || pullRefreshing.value))
+  );
+  const pullRefreshLabel = computed(() => {
+    if (pullRefreshing.value) {
+      return "Refreshing";
+    }
+    return pullProgress.value >= 100 ? "Release to refresh" : "Pull to refresh";
+  });
+  const pullRefreshStyle = computed(() => ({
+    "--shell-pull-refresh-distance": `${Math.round(Math.min(pullDistance.value, PULL_REFRESH_MAX_DISTANCE))}px`
+  }));
+
+  onMounted(() => {
+    if (typeof window !== "object") {
+      return;
+    }
+    window.addEventListener("pointerdown", handlePullPointerDown, { capture: true, passive: true });
+    window.addEventListener("pointermove", handlePullPointerMove, { capture: true, passive: false });
+    window.addEventListener("pointerup", handlePullPointerEnd, { capture: true, passive: true });
+    window.addEventListener("pointercancel", handlePullPointerCancel, { capture: true, passive: true });
+    window.addEventListener("touchstart", handlePullTouchStart, { capture: true, passive: true });
+    window.addEventListener("touchmove", handlePullTouchMove, { capture: true, passive: false });
+    window.addEventListener("touchend", handlePullTouchEnd, { capture: true, passive: true });
+    window.addEventListener("touchcancel", handlePullTouchCancel, { capture: true, passive: true });
+  });
+
+  onBeforeUnmount(() => {
+    if (typeof window !== "object") {
+      return;
+    }
+    window.removeEventListener("pointerdown", handlePullPointerDown, { capture: true });
+    window.removeEventListener("pointermove", handlePullPointerMove, { capture: true });
+    window.removeEventListener("pointerup", handlePullPointerEnd, { capture: true });
+    window.removeEventListener("pointercancel", handlePullPointerCancel, { capture: true });
+    window.removeEventListener("touchstart", handlePullTouchStart, { capture: true });
+    window.removeEventListener("touchmove", handlePullTouchMove, { capture: true });
+    window.removeEventListener("touchend", handlePullTouchEnd, { capture: true });
+    window.removeEventListener("touchcancel", handlePullTouchCancel, { capture: true });
+  });
+
+  function canRefresh() {
+    return Boolean(refreshRuntime && typeof refreshRuntime.refresh === "function");
+  }
+
+  function canStartFromTarget(target) {
+    return Boolean(
+      unref(enabled) &&
+      canRefresh() &&
+      !pullRefreshing.value &&
+      isAtPageTop() &&
+      !isShellGestureIgnoredTarget(target, { extraSelectors: PULL_REFRESH_IGNORED_SELECTORS })
+    );
+  }
+
+  function handlePullPointerDown(event) {
+    if (!isPrimaryTouchPointer(event) || !canStartFromTarget(event.target)) {
+      activePull = null;
+      return;
+    }
+
+    activePull = {
+      pointerId: event.pointerId,
+      touchIdentifier: null,
+      startX: event.clientX,
+      startY: event.clientY
+    };
+  }
+
+  function handlePullPointerMove(event) {
+    if (!activePull || event.pointerId !== activePull.pointerId) {
+      return;
+    }
+
+    updatePullGesture(event.clientX, event.clientY, event);
+  }
+
+  function handlePullPointerEnd(event) {
+    if (!activePull || event.pointerId !== activePull.pointerId) {
+      return;
+    }
+
+    finishPullGesture();
+  }
+
+  // The browser cancels the pointer when it takes over scrolling; touch events
+  // keep following the same finger.
+  function handlePullPointerCancel(event) {
+    if (!activePull || event.pointerId !== activePull.pointerId) {
+      return;
+    }
+
+    activePull.pointerId = null;
+  }
+
+  function handlePullTouchStart(event) {
+    if (activePull || event?.touches?.length !== 1 || !canStartFromTarget(event.target)) {
+      return;
+    }
+
+    const touch = event.touches[0];
+    activePull = {
+      pointerId: null,
+      touchIdentifier: touch.identifier,
+      startX: touch.clientX,
+      startY: touch.clientY
+    };
+  }
+
+  function handlePullTouchMove(event) {
+    const touch = findActiveTouch(event.touches);
+    if (!activePull || !touch) {
+      return;
+    }
+
+    updatePullGesture(touch.clientX, touch.clientY, event);
+  }
+
+  function handlePullTouchEnd(event) {
+    if (!activePull || !touchListIncludesActiveTouch(event.changedTouches)) {
+      return;
+    }
+
+    finishPullGesture();
+  }
+
+  function handlePullTouchCancel(event) {
+    if (activePull && touchListIncludesActiveTouch(event.changedTouches)) {
+      cancelPullRefresh();
+    }
+  }
+
+  function updatePullGesture(clientX, clientY, event) {
+    if (!activePull) {
+      return;
+    }
+
+    const deltaX = clientX - activePull.startX;
+    const deltaY = clientY - activePull.startY;
+    const absX = Math.abs(deltaX);
+
+    if (deltaY < -4 || (absX > 24 && absX > deltaY * 1.15)) {
+      cancelPullRefresh();
+      return;
+    }
+
+    if (deltaY <= 6 || !isAtPageTop()) {
+      return;
+    }
+
+    if (event?.cancelable) {
+      event.preventDefault();
+    }
+    pullDistance.value = Math.min(PULL_REFRESH_MAX_DISTANCE, Math.round(deltaY * 0.55));
+  }
+
+  function finishPullGesture() {
+    const shouldRefresh = pullDistance.value >= PULL_REFRESH_TRIGGER_DISTANCE;
+    activePull = null;
+
+    if (!shouldRefresh) {
+      pullDistance.value = 0;
+      return;
+    }
+
+    void refreshFromPullGesture();
+  }
+
+  function cancelPullRefresh() {
+    activePull = null;
+    if (!pullRefreshing.value) {
+      pullDistance.value = 0;
+    }
+  }
+
+  async function refreshFromPullGesture() {
+    if (!canRefresh() || pullRefreshing.value) {
+      pullDistance.value = 0;
+      return;
+    }
+
+    pullRefreshing.value = true;
+    pullDistance.value = PULL_REFRESH_TRIGGER_DISTANCE;
+    try {
+      await refreshRuntime.refresh("pull-to-refresh");
+    } finally {
+      pullRefreshing.value = false;
+      pullDistance.value = 0;
+    }
+  }
+
+  function findActiveTouch(touchList) {
+    if (!activePull || !touchList || touchList.length < 1) {
+      return null;
+    }
+
+    if (activePull.touchIdentifier === null && touchList.length === 1) {
+      return touchList[0];
+    }
+
+    for (const touch of touchList) {
+      if (touch.identifier === activePull.touchIdentifier) {
+        return touch;
+      }
+    }
+
+    return null;
+  }
+
+  function touchListIncludesActiveTouch(touchList) {
+    if (!activePull) {
+      return false;
+    }
+
+    if (activePull.touchIdentifier === null) {
+      return !touchList || touchList.length <= 1;
+    }
+
+    return Boolean(findActiveTouch(touchList));
+  }
+
+  return {
+    pullDistance,
+    pullRefreshing,
+    pullProgress,
+    pullIndicatorVisible,
+    pullRefreshLabel,
+    pullRefreshStyle
+  };
+}
+
+export { useShellPullToRefresh };

package/src/client/error/index.js

@@ -1,3 +1,3 @@
 export { createDefaultErrorPolicy } from "./policy.js";
-export { useShellWebErrorRuntime } from "./inject.js";
+export { SHELL_WEB_ERROR_RUNTIME_KEY, useShellWebErrorRuntime } from "./inject.js";
 export { useShellErrorPresentationStore } from "../stores/useShellErrorPresentationStore.js";

package/src/client/error/inject.js

@@ -2,6 +2,8 @@ import {
   inject
 } from "vue";
 
+const SHELL_WEB_ERROR_RUNTIME_KEY = "jskit.shell-web.runtime.web-error.client";
+
 const EMPTY_ERROR_RUNTIME = Object.freeze({
   report() {
     return Object.freeze({
@@ -49,7 +51,7 @@ const EMPTY_ERROR_RUNTIME = Object.freeze({
 });
 
 function useShellWebErrorRuntime({ required = false } = {}) {
-  const runtime = inject("jskit.shell-web.runtime.web-error.client", null);
+  const runtime = inject(SHELL_WEB_ERROR_RUNTIME_KEY, null);
   if (runtime && typeof runtime.report === "function") {
     return runtime;
   }
@@ -62,6 +64,7 @@ function useShellWebErrorRuntime({ required = false } = {}) {
 }
 
 export {
+  SHELL_WEB_ERROR_RUNTIME_KEY,
   EMPTY_ERROR_RUNTIME,
   useShellWebErrorRuntime
 };

package/src/client/error/policy.js

@@ -1,10 +1,7 @@
 import {
-  normalizeAction,
-  normalizeAdditionalActions,
   normalizeChannel,
   normalizeErrorIntent,
-  normalizeSeverity,
-  normalizeText
+  normalizeSeverity
 } from "./normalize.js";
 
 function createDefaultErrorPolicy({
@@ -46,17 +43,11 @@ function createDefaultErrorPolicy({
       }
     }
 
-    const message = normalizeText(event.userMessage || event.message, "Request failed.");
-
+    // The runtime owns every other default, including message, actions,
+    // presenter, dedupe and persistence.
     return Object.freeze({
       channel,
-      message,
-      severity: normalizeSeverity(event.severity, normalizedDefaultSeverity),
-      presenterId: normalizeText(event.presenterId),
-      action: normalizeAction(event.action),
-      additionalActions: normalizeAdditionalActions(event.additionalActions),
-      persist: channel !== "snackbar",
-      dedupeKey: normalizeText(event.dedupeKey)
+      severity: normalizeSeverity(event.severity, normalizedDefaultSeverity)
     });
   };
 }

package/src/client/error/presenters.js

@@ -3,8 +3,7 @@ import { normalizeText } from "./normalize.js";
 function createStoreBackedPresenter({
   id,
   channel,
-  store,
-  defaultPersist = false
+  store
 } = {}) {
   const normalizedId = normalizeText(id);
   const normalizedChannel = normalizeText(channel).toLowerCase();
@@ -26,7 +25,6 @@ function createStoreBackedPresenter({
     present(payload = {}) {
       return store.present(normalizedChannel, {
         ...payload,
-        persist: typeof payload.persist === "boolean" ? payload.persist : defaultPersist,
         presenterId: normalizedId
       });
     },
@@ -40,8 +38,7 @@ function createMaterialSnackbarPresenter({ store } = {}) {
   return createStoreBackedPresenter({
     id: "material.snackbar",
     channel: "snackbar",
-    store,
-    defaultPersist: false
+    store
   });
 }
 
@@ -49,8 +46,7 @@ function createMaterialBannerPresenter({ store } = {}) {
   return createStoreBackedPresenter({
     id: "material.banner",
     channel: "banner",
-    store,
-    defaultPersist: true
+    store
   });
 }
 
@@ -58,8 +54,7 @@ function createMaterialDialogPresenter({ store } = {}) {
   return createStoreBackedPresenter({
     id: "material.dialog",
     channel: "dialog",
-    store,
-    defaultPersist: true
+    store
   });
 }
 

package/src/client/error/store.js

@@ -80,7 +80,7 @@ function createErrorPresentationStore({
       channel: normalizedChannel,
       message: normalizeText(payload.message, "Request failed."),
       severity: normalizeSeverity(payload.severity, "error"),
-      persist: typeof payload.persist === "boolean" ? payload.persist : normalizedChannel !== "snackbar",
+      persist: payload.persist === true,
       action: normalizeAction(payload.action),
       additionalActions: normalizeAdditionalActions(payload.additionalActions),
       presenterId: normalizeText(payload.presenterId),

package/src/client/navigation/linkResolver.js

@@ -6,26 +6,19 @@ import {
   resolveSurfaceDefinitionFromPlacementContext,
   resolveSurfaceRootPathFromPlacementContext
 } from "../placement/surfaceContext.js";
-
-function normalizeParamsMap(params = null) {
-  if (!params || typeof params !== "object" || Array.isArray(params)) {
-    return {};
-  }
-  return params;
-}
+import { normalizeRouteParams } from "../support/routeParams.js";
 
 function materializeSurfaceRouteBase(routeBaseTemplate = "/", { params = {}, strictParams = true, surface = "" } = {}) {
-  const normalizedParams = normalizeParamsMap(params);
+  const normalizedParams = normalizeRouteParams(params);
   const missingParams = new Set();
   const outputPath = String(routeBaseTemplate || "/").replace(/:([A-Za-z0-9_]+)/g, (_full, rawName) => {
     const paramName = String(rawName || "").trim();
     const paramValue = normalizedParams[paramName];
-    const normalizedValue = String(paramValue ?? "").trim();
-    if (!normalizedValue) {
+    if (!paramValue) {
       missingParams.add(paramName);
       return `:${paramName}`;
     }
-    return encodeURIComponent(normalizedValue);
+    return encodeURIComponent(paramValue);
   });
 
   if (strictParams && missingParams.size > 0) {
@@ -94,23 +87,8 @@ function useShellLinkResolver({ surface = "" } = {}) {
     });
   }
 
-  function toSurface(relativePath = "/", options = {}) {
-    return resolve(relativePath, options);
-  }
-
-  function toWorkspace(relativePath = "/", options = {}) {
-    return resolve(relativePath, options);
-  }
-
-  function toAuto(relativePath = "/", options = {}) {
-    return resolve(relativePath, options);
-  }
-
   return Object.freeze({
-    resolve,
-    toSurface,
-    toWorkspace,
-    toAuto
+    resolve
   });
 }
 

package/src/client/navigation/usePaths.js

@@ -4,6 +4,7 @@ import { resolveScopedApiBasePath } from "@jskit-ai/kernel/shared/surface";
 import { resolveSurfaceDefinitionFromPlacementContext } from "../placement/index.js";
 import { useShellLinkResolver } from "./linkResolver.js";
 import { useSurfaceRouteContext } from "./useSurfaceRouteContext.js";
+import { normalizeRouteParams } from "../support/routeParams.js";
 
 function normalizePathSuffix(value = "") {
   const raw = normalizeText(unref(value));
@@ -32,27 +33,6 @@ function resolveDefaultSurfaceIdFromPlacementContext(placementContext = null) {
   return resolveSurfaceId(placementContext?.surfaceConfig?.defaultSurfaceId, "");
 }
 
-function normalizeRouteParams(params = null) {
-  if (!params || typeof params !== "object" || Array.isArray(params)) {
-    return {};
-  }
-
-  const output = {};
-  for (const [rawKey, rawValue] of Object.entries(params)) {
-    const key = normalizeText(rawKey);
-    if (!key) {
-      continue;
-    }
-
-    const value = Array.isArray(rawValue) ? rawValue[0] : rawValue;
-    const normalizedValue = normalizeText(value);
-    if (normalizedValue) {
-      output[key] = normalizedValue;
-    }
-  }
-  return output;
-}
-
 function resolveRouteParams(baseParams = {}, overrideParams = null) {
   return {
     ...normalizeRouteParams(baseParams),

package/src/client/placement/index.js

@@ -8,6 +8,7 @@ export {
 } from "./validators.js";
 
 export {
+  SHELL_WEB_PLACEMENT_RUNTIME_KEY,
   useWebPlacementContext
 } from "./inject.js";
 
@@ -17,6 +18,7 @@ export {
 
 export {
   readPlacementSurfaceConfig,
+  resolveAllowedOriginsFromPlacementContext,
   resolveSurfaceDefinitionFromPlacementContext,
   joinSurfacePath,
   resolveSurfaceIdFromPlacementPathname,

package/src/client/placement/inject.js

@@ -5,6 +5,8 @@ import {
   shallowRef
 } from "vue";
 
+const SHELL_WEB_PLACEMENT_RUNTIME_KEY = "jskit.shell-web.runtime.web-placement.client";
+
 const EMPTY_WEB_PLACEMENT_RUNTIME = Object.freeze({
   getContext() {
     return Object.freeze({});
@@ -36,7 +38,7 @@ const EMPTY_WEB_PLACEMENT_CONTEXT = Object.freeze({
 });
 
 function useWebPlacementRuntime({ required = false } = {}) {
-  const runtime = inject("jskit.shell-web.runtime.web-placement.client", null);
+  const runtime = inject(SHELL_WEB_PLACEMENT_RUNTIME_KEY, null);
   if (runtime && typeof runtime.getPlacements === "function") {
     return runtime;
   }
@@ -96,6 +98,7 @@ function useWebPlacementContext({ required = false } = {}) {
 }
 
 export {
+  SHELL_WEB_PLACEMENT_RUNTIME_KEY,
   EMPTY_WEB_PLACEMENT_RUNTIME,
   EMPTY_WEB_PLACEMENT_CONTEXT,
   useWebPlacementRuntime,

package/src/client/placement/runtime.js

@@ -2,6 +2,7 @@ import { DEFAULT_DEBUG_DEPTH, explodePayload } from "./debug.js";
 import { createListenerSubscription } from "@jskit-ai/kernel/shared/support/listenerSet";
 import { isRecord } from "@jskit-ai/kernel/shared/support/normalize";
 import {
+  WEB_PLACEMENT_SURFACE_ANY,
   normalizePlacementLayoutClass,
   normalizePlacementTopologyDefinition
 } from "@jskit-ai/kernel/shared/support/shellLayoutTargets";
@@ -24,7 +25,6 @@ function ensureArray(value) {
 
 const PLACEMENT_DEBUG_PREFIX = "[placement-debug]";
 const PLACEMENT_DEBUG_FLAG = "__JSKIT_PLACEMENT_DEBUG__";
-const WEB_PLACEMENT_SURFACE_ANY = "*";
 const NOOP = () => {};
 
 function isPlacementDebugEnabled() {
@@ -480,9 +480,7 @@ function createWebPlacementRuntime({ components, contextContributors = [], logge
       if (!renderablePlacement) {
         continue;
       }
-      const placementSurfaces = Array.isArray(renderablePlacement.surfaces)
-        ? renderablePlacement.surfaces
-        : [WEB_PLACEMENT_SURFACE_ANY];
+      const placementSurfaces = renderablePlacement.surfaces;
 
       if (!matchesSurface(placementSurfaces, normalizedSurface)) {
         debugLog("getPlacements:skip-surfaces", {

package/src/client/placement/surfaceContext.js

@@ -7,6 +7,7 @@ import {
 import { isRecord } from "@jskit-ai/kernel/shared/support/normalize";
 import { normalizePathname } from "@jskit-ai/kernel/shared/surface/paths";
 import { isExternalLinkTarget, splitPathQueryHash } from "@jskit-ai/kernel/shared/support/linkPath";
+import { resolveAllowedOriginsFromSurfaceDefinitions } from "@jskit-ai/kernel/shared/support/returnToPath";
 
 const EMPTY_SURFACE_CONFIG = Object.freeze({
   tenancyMode: "",
@@ -119,6 +120,14 @@ function readPlacementSurfaceConfig(contextValue = null) {
   return normalizeSurfaceConfig(contextRecord.surfaceConfig);
 }
 
+// Origins a return-to URL may point at: this page plus every surface origin.
+function resolveAllowedOriginsFromPlacementContext(contextValue = null) {
+  const seedOrigins = typeof window === "object" && window?.location?.origin ? [window.location.origin] : [];
+  return resolveAllowedOriginsFromSurfaceDefinitions(readPlacementSurfaceConfig(contextValue).surfacesById, {
+    seedOrigins
+  });
+}
+
 function resolveSurfaceDefinitionFromPlacementContext(contextValue = null, surfaceId = "") {
   const surfaceConfig = readPlacementSurfaceConfig(contextValue);
   const normalizedSurfaceId = normalizeSurfaceId(surfaceId);
@@ -253,14 +262,7 @@ function createPlacementSurfacePathHelpers(surfaceConfig = EMPTY_SURFACE_CONFIG)
 
   return createSurfacePathHelpers({
     defaultSurfaceId: resolvedDefaultSurfaceId,
-    normalizeSurfaceId,
-    resolveSurfaceRouteBase(surfaceId) {
-      const normalizedSurfaceId = normalizeSurfaceId(surfaceId);
-      return String(surfacesById[normalizedSurfaceId]?.routeBase || "/").trim() || "/";
-    },
-    listSurfaceDefinitions() {
-      return Object.values(surfacesById);
-    }
+    surfaceDefinitions: Object.values(surfacesById)
   });
 }
 
@@ -280,6 +282,7 @@ export {
   EMPTY_SURFACE_CONFIG,
   buildSurfaceConfigContext,
   readPlacementSurfaceConfig,
+  resolveAllowedOriginsFromPlacementContext,
   resolveSurfaceDefinitionFromPlacementContext,
   joinSurfacePath,
   resolveSurfaceIdFromPlacementPathname,