@jskit-ai/shell-web 0.1.250 → 0.1.252

package/src/client/components/ShellRouteTransition.vue

@@ -9,7 +9,6 @@ import {
 import { useRoute, useRouter } from "vue-router";
 import { useDisplay } from "vuetify";
 import { normalizePathname } from "@jskit-ai/kernel/shared";
-import { resolveShellLinkPath } from "../navigation/linkResolver.js";
 import {
   useWebPlacementContext,
   useWebPlacementRuntime
@@ -25,6 +24,9 @@ import {
   resolveMenuLinkTarget
 } from "../support/menuLinkTarget.js";
 import { resolveShellRouteTransitionKey } from "../support/routeTransitionKey.js";
+import { createRouteSwipeGesture } from "../support/routeSwipeGesture.js";
+import { isPrimaryTouchPointer, isShellGestureIgnoredTarget } from "../support/gestureTargets.js";
+import { readViewportWidth, resolveShellLayoutClass } from "../support/shellLayoutClass.js";
 
 const props = defineProps({
   enabled: {
@@ -55,13 +57,9 @@ const revision = ref(
 );
 const transitionDirection = ref("none");
 let unsubscribe = null;
-let activeSwipe = null;
+const swipeGesture = createRouteSwipeGesture();
 let stopSwipeClassWatch = null;
 
-const SWIPE_MIN_DISTANCE = 36;
-const SWIPE_MAX_VERTICAL_DRIFT = 120;
-const SWIPE_MIN_VELOCITY = 0.08;
-
 onMounted(() => {
   if (typeof placementRuntime.subscribe !== "function") {
     unsubscribe = null;
@@ -111,16 +109,7 @@ onBeforeUnmount(() => {
   }
 });
 
-const resolvedLayoutClass = computed(() => {
-  const displayName = String(display?.name?.value || "").trim().toLowerCase();
-  if (displayName === "xs" || displayName === "sm") {
-    return "compact";
-  }
-  if (displayName === "md") {
-    return "medium";
-  }
-  return "expanded";
-});
+const resolvedLayoutClass = computed(() => resolveShellLayoutClass(display?.name?.value, readViewportWidth()));
 
 const currentPathname = computed(() =>
   normalizeComparablePathname(resolveRuntimePathname(route?.path || route?.fullPath || "/"))
@@ -158,16 +147,7 @@ const primaryNavEntries = computed(() => {
         placementContext: contextValue,
         scopedSuffix: entryProps.scopedSuffix,
         unscopedSuffix: entryProps.unscopedSuffix,
-        routeParams,
-        resolvePagePath(relativePath, options = {}) {
-          return resolveShellLinkPath({
-            context: contextValue,
-            surface: options.surface,
-            relativePath,
-            params: routeParams,
-            strictParams: options.strictParams !== false
-          });
-        }
+        routeParams
       });
       const navigationTarget = resolveSurfaceNavigationTargetFromPlacementContext(contextValue, {
         path: target,
@@ -259,18 +239,12 @@ const swipeNavigationEnabled = computed(() =>
 );
 
 function handlePointerDown(event) {
-  if (!swipeNavigationEnabled.value || !isPrimaryPointerEvent(event) || isSwipeIgnoredTarget(event.target)) {
-    activeSwipe = null;
+  if (!swipeNavigationEnabled.value || !isPrimaryTouchPointer(event) || isShellGestureIgnoredTarget(event.target)) {
+    swipeGesture.reset();
     return;
   }
 
-  activeSwipe = {
-    pointerId: event.pointerId,
-    startX: event.clientX,
-    startY: event.clientY,
-    startTime: performance.now(),
-    cancelled: false
-  };
+  swipeGesture.start(event);
   try {
     event.target?.setPointerCapture?.(event.pointerId);
   } catch {
@@ -279,60 +253,24 @@ function handlePointerDown(event) {
 }
 
 function handlePointerMove(event) {
-  if (!activeSwipe || event.pointerId !== activeSwipe.pointerId) {
-    return;
-  }
-
-  const deltaX = event.clientX - activeSwipe.startX;
-  const deltaY = event.clientY - activeSwipe.startY;
-  const absX = Math.abs(deltaX);
-  const absY = Math.abs(deltaY);
-
-  if (absY > SWIPE_MAX_VERTICAL_DRIFT || (absY > 28 && absY > absX * 1.3)) {
-    activeSwipe.cancelled = true;
-    return;
-  }
-
-  if (absX > 10 && absX > absY) {
+  const { claim, offset } = swipeGesture.move(event);
+  if (claim) {
     event.preventDefault();
   }
-
-  if (isAcceptedSwipe({ deltaX, deltaY, elapsed: Math.max(performance.now() - activeSwipe.startTime, 1) })) {
-    const offset = deltaX < 0 ? 1 : -1;
-    activeSwipe = null;
+  if (offset) {
     navigateBySwipe(offset);
   }
 }
 
 function handlePointerEnd(event) {
-  if (!activeSwipe || event.pointerId !== activeSwipe.pointerId) {
-    return;
-  }
-
-  const swipe = activeSwipe;
-  activeSwipe = null;
-
-  if (swipe.cancelled || !swipeNavigationEnabled.value) {
-    return;
-  }
-
-  const deltaX = event.clientX - swipe.startX;
-  const deltaY = event.clientY - swipe.startY;
-  const elapsed = Math.max(performance.now() - swipe.startTime, 1);
-  const absX = Math.abs(deltaX);
-  const velocity = absX / elapsed;
-
-  if (!isAcceptedSwipe({ deltaX, deltaY, elapsed, velocity })) {
-    return;
+  const offset = swipeGesture.end(event);
+  if (offset && swipeNavigationEnabled.value) {
+    navigateBySwipe(offset);
   }
-
-  navigateBySwipe(deltaX < 0 ? 1 : -1);
 }
 
 function handlePointerCancel(event) {
-  if (activeSwipe && event.pointerId === activeSwipe.pointerId) {
-    activeSwipe = null;
-  }
+  swipeGesture.cancel(event);
 }
 
 function navigateBySwipe(offset = 0) {
@@ -345,18 +283,6 @@ function navigateBySwipe(offset = 0) {
   void router.push(nextEntry.href).catch(() => {});
 }
 
-function isAcceptedSwipe({ deltaX = 0, deltaY = 0, elapsed = 1, velocity = null } = {}) {
-  const absX = Math.abs(deltaX);
-  const absY = Math.abs(deltaY);
-  const resolvedVelocity = velocity == null ? absX / Math.max(elapsed, 1) : velocity;
-  return Boolean(
-    absX >= SWIPE_MIN_DISTANCE &&
-    absY <= SWIPE_MAX_VERTICAL_DRIFT &&
-    absX > absY &&
-    resolvedVelocity >= SWIPE_MIN_VELOCITY
-  );
-}
-
 function normalizeComparablePathname(value = "") {
   const raw = String(value || "").trim();
   if (!raw) {
@@ -384,30 +310,6 @@ function pathMatchesNavigationEntry(pathname = "", entry = {}) {
   }
   return pathname === target || pathname.startsWith(`${target}/`);
 }
-
-function isPrimaryPointerEvent(event) {
-  return event?.isPrimary !== false && event?.button === 0 && event?.pointerType !== "mouse";
-}
-
-function isSwipeIgnoredTarget(target) {
-  return Boolean(
-    target?.closest?.(
-      [
-        "a",
-        "button",
-        "input",
-        "select",
-        "textarea",
-        "summary",
-        "[role='button']",
-        "[role='link']",
-        "[role='slider']",
-        "[contenteditable='true']",
-        "[data-shell-swipe-ignore]"
-      ].join(",")
-    )
-  );
-}
 </script>
 
 <template>

package/src/client/components/ShellSurfaceAwareMenuLinkItem.vue

@@ -1,108 +1,13 @@
 <script setup>
-import { computed } from "vue";
-import { useRoute } from "vue-router";
-import { resolveShellLinkPath } from "../navigation/linkResolver.js";
 import {
-  resolveSurfaceIdFromPlacementPathname,
-  resolveSurfaceNavigationTargetFromPlacementContext,
-  useWebPlacementContext
-} from "../placement/index.js";
-import { resolveMenuLinkIcon } from "../lib/menuIcons.js";
-import { resolveMenuLinkTarget } from "../support/menuLinkTarget.js";
+  shellNavigationLinkProps,
+  useShellNavigationLink
+} from "../composables/useShellNavigationLink.js";
 import { activateShellNavigationLinkOnSpace } from "../support/navigationLinkKeyboard.js";
 import ShellNavigationTooltip from "./ShellNavigationTooltip.vue";
 
-const props = defineProps({
-  label: {
-    type: String,
-    default: ""
-  },
-  to: {
-    type: String,
-    default: ""
-  },
-  icon: {
-    type: String,
-    default: ""
-  },
-  surface: {
-    type: String,
-    default: ""
-  },
-  scopedSuffix: {
-    type: String,
-    default: "/"
-  },
-  unscopedSuffix: {
-    type: String,
-    default: "/"
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  exact: {
-    type: Boolean,
-    default: false
-  }
-});
-
-const route = useRoute();
-const { context: placementContext } = useWebPlacementContext();
-
-const currentSurfaceId = computed(() => {
-  return resolveSurfaceIdFromPlacementPathname(
-    placementContext.value,
-    String(route?.path || route?.fullPath || "").trim()
-  );
-});
-
-const resolvedTo = computed(() => {
-  return resolveMenuLinkTarget({
-    to: props.to,
-    surface: props.surface,
-    currentSurfaceId: currentSurfaceId.value,
-    placementContext: placementContext.value,
-    scopedSuffix: props.scopedSuffix,
-    unscopedSuffix: props.unscopedSuffix,
-    routeParams: route.params || {},
-    resolvePagePath(relativePath, options = {}) {
-      return resolveShellLinkPath({
-        context: placementContext.value,
-        surface: options.surface,
-        relativePath,
-        params: route.params || {},
-        strictParams: options.strictParams !== false
-      });
-    }
-  });
-});
-
-const resolvedTarget = computed(() => {
-  const target = String(resolvedTo.value || "").trim();
-  if (!target) {
-    return {
-      href: "",
-      sameOrigin: true
-    };
-  }
-
-  const navigationTarget = resolveSurfaceNavigationTargetFromPlacementContext(placementContext.value, {
-    path: target
-  });
-  return {
-    href: navigationTarget.href,
-    sameOrigin: navigationTarget.sameOrigin
-  };
-});
-
-const resolvedIcon = computed(() =>
-  resolveMenuLinkIcon({
-    icon: props.icon,
-    label: props.label,
-    to: resolvedTarget.value.href || resolvedTo.value
-  })
-);
+const props = defineProps(shellNavigationLinkProps);
+const { resolvedTarget, resolvedIcon } = useShellNavigationLink(props);
 </script>
 
 <template>

package/src/client/components/ShellTabLinkItem.vue

@@ -1,107 +1,11 @@
 <script setup>
-import { computed } from "vue";
-import { useRoute } from "vue-router";
-import { resolveShellLinkPath } from "../navigation/linkResolver.js";
 import {
-  resolveSurfaceIdFromPlacementPathname,
-  resolveSurfaceNavigationTargetFromPlacementContext,
-  useWebPlacementContext
-} from "../placement/index.js";
-import { resolveMenuLinkIcon } from "../lib/menuIcons.js";
-import { resolveMenuLinkTarget } from "../support/menuLinkTarget.js";
-
-const props = defineProps({
-  label: {
-    type: String,
-    default: ""
-  },
-  to: {
-    type: String,
-    default: ""
-  },
-  icon: {
-    type: String,
-    default: ""
-  },
-  surface: {
-    type: String,
-    default: ""
-  },
-  scopedSuffix: {
-    type: String,
-    default: "/"
-  },
-  unscopedSuffix: {
-    type: String,
-    default: "/"
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  exact: {
-    type: Boolean,
-    default: false
-  }
-});
-
-const route = useRoute();
-const { context: placementContext } = useWebPlacementContext();
-
-const currentSurfaceId = computed(() => {
-  return resolveSurfaceIdFromPlacementPathname(
-    placementContext.value,
-    String(route?.path || route?.fullPath || "").trim()
-  );
-});
-
-const resolvedTo = computed(() => {
-  return resolveMenuLinkTarget({
-    to: props.to,
-    surface: props.surface,
-    currentSurfaceId: currentSurfaceId.value,
-    placementContext: placementContext.value,
-    scopedSuffix: props.scopedSuffix,
-    unscopedSuffix: props.unscopedSuffix,
-    routeParams: route.params || {},
-    resolvePagePath(relativePath, options = {}) {
-      return resolveShellLinkPath({
-        context: placementContext.value,
-        surface: options.surface,
-        relativePath,
-        params: route.params || {},
-        strictParams: options.strictParams !== false
-      });
-    }
-  });
-});
-
-const resolvedTarget = computed(() => {
-  const target = String(resolvedTo.value || "").trim();
-  if (!target) {
-    return {
-      href: "",
-      sameOrigin: true
-    };
-  }
-
-  const navigationTarget = resolveSurfaceNavigationTargetFromPlacementContext(placementContext.value, {
-    path: target
-  });
-  return {
-    href: navigationTarget.href,
-    sameOrigin: navigationTarget.sameOrigin
-  };
-});
-
-const resolvedIcon = computed(() =>
-  resolveMenuLinkIcon({
-    icon: props.icon,
-    label: props.label,
-    to: resolvedTarget.value.href || resolvedTo.value
-  })
-);
+  shellNavigationLinkProps,
+  useShellNavigationLink
+} from "../composables/useShellNavigationLink.js";
 
+const props = defineProps(shellNavigationLinkProps);
+const { resolvedTarget, resolvedIcon } = useShellNavigationLink(props);
 </script>
 
 <template>

package/src/client/composables/useShellNavigationLink.js

@@ -0,0 +1,85 @@
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import {
+  resolveSurfaceIdFromPlacementPathname,
+  useWebPlacementContext
+} from "../placement/index.js";
+import { resolveMenuLinkIcon } from "../lib/menuIcons.js";
+import { resolveMenuLinkHref, resolveMenuLinkTarget } from "../support/menuLinkTarget.js";
+
+const shellNavigationLinkProps = Object.freeze({
+  label: {
+    type: String,
+    default: ""
+  },
+  to: {
+    type: String,
+    default: ""
+  },
+  icon: {
+    type: String,
+    default: ""
+  },
+  surface: {
+    type: String,
+    default: ""
+  },
+  scopedSuffix: {
+    type: String,
+    default: "/"
+  },
+  unscopedSuffix: {
+    type: String,
+    default: "/"
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  exact: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// Surface-aware link resolution shared by the shell menu and tab link items.
+function useShellNavigationLink(props) {
+  const route = useRoute();
+  const { context: placementContext } = useWebPlacementContext();
+
+  const resolvedTo = computed(() => {
+    const currentSurfaceId = resolveSurfaceIdFromPlacementPathname(
+      placementContext.value,
+      String(route?.path || route?.fullPath || "").trim()
+    );
+    return resolveMenuLinkTarget({
+      to: props.to,
+      surface: props.surface,
+      currentSurfaceId,
+      placementContext: placementContext.value,
+      scopedSuffix: props.scopedSuffix,
+      unscopedSuffix: props.unscopedSuffix,
+      routeParams: route.params || {}
+    });
+  });
+
+  const resolvedTarget = computed(() => resolveMenuLinkHref(placementContext.value, resolvedTo.value));
+
+  const resolvedIcon = computed(() =>
+    resolveMenuLinkIcon({
+      icon: props.icon,
+      label: props.label,
+      to: resolvedTarget.value.href || resolvedTo.value
+    })
+  );
+
+  return {
+    resolvedTarget,
+    resolvedIcon
+  };
+}
+
+export {
+  shellNavigationLinkProps,
+  useShellNavigationLink
+};