@jskit-ai/shell-web 0.1.65 → 0.1.66

package/src/client/components/ShellRouteTransition.vue

@@ -0,0 +1,480 @@
+<script setup>
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch
+} from "vue";
+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
+} from "../placement/inject.js";
+import { resolveRuntimePathname } from "../placement/pathname.js";
+import {
+  readPlacementSurfaceConfig,
+  resolveSurfaceNavigationTargetFromPlacementContext,
+  resolveSurfaceIdFromPlacementPathname
+} from "../placement/surfaceContext.js";
+import {
+  normalizeMenuLinkPathname,
+  resolveMenuLinkTarget
+} from "../support/menuLinkTarget.js";
+
+const props = defineProps({
+  enabled: {
+    type: Boolean,
+    default: true
+  },
+  target: {
+    type: String,
+    default: "shell-layout:primary-bottom-nav"
+  },
+  semanticTarget: {
+    type: String,
+    default: "shell.primary-nav"
+  },
+  swipeEnabled: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const route = useRoute();
+const router = useRouter();
+const display = useDisplay();
+const placementRuntime = useWebPlacementRuntime();
+const { context: placementContext } = useWebPlacementContext();
+const revision = ref(
+  typeof placementRuntime.getRevision === "function" ? placementRuntime.getRevision() : 0
+);
+const transitionDirection = ref("none");
+let unsubscribe = null;
+let activeSwipe = null;
+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;
+  } else {
+    unsubscribe = placementRuntime.subscribe((event) => {
+      const next = Number(event?.revision);
+      revision.value = Number.isInteger(next) ? next : revision.value + 1;
+    });
+  }
+
+  if (typeof window === "object") {
+    window.addEventListener("pointerdown", handlePointerDown, { capture: true, passive: true });
+    window.addEventListener("pointermove", handlePointerMove, { capture: true, passive: false });
+    window.addEventListener("pointerup", handlePointerEnd, { capture: true, passive: true });
+    window.addEventListener("pointercancel", handlePointerCancel, { capture: true, passive: true });
+  }
+
+  stopSwipeClassWatch = watch(
+    swipeNavigationEnabled,
+    (enabled) => {
+      if (typeof document !== "object") {
+        return;
+      }
+      document.documentElement.classList.toggle("shell-route-swipe-enabled", enabled);
+    },
+    { immediate: true }
+  );
+});
+
+onBeforeUnmount(() => {
+  if (typeof unsubscribe === "function") {
+    unsubscribe();
+    unsubscribe = null;
+  }
+  if (typeof stopSwipeClassWatch === "function") {
+    stopSwipeClassWatch();
+    stopSwipeClassWatch = null;
+  }
+  if (typeof document === "object") {
+    document.documentElement.classList.remove("shell-route-swipe-enabled");
+  }
+  if (typeof window === "object") {
+    window.removeEventListener("pointerdown", handlePointerDown, { capture: true });
+    window.removeEventListener("pointermove", handlePointerMove, { capture: true });
+    window.removeEventListener("pointerup", handlePointerEnd, { capture: true });
+    window.removeEventListener("pointercancel", handlePointerCancel, { capture: true });
+  }
+});
+
+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 currentPathname = computed(() =>
+  normalizeComparablePathname(resolveRuntimePathname(route?.path || route?.fullPath || "/"))
+);
+
+const currentSurfaceId = computed(() => {
+  const contextValue = placementContext?.value || null;
+  const surfaceFromPathname = resolveSurfaceIdFromPlacementPathname(contextValue, currentPathname.value);
+  if (surfaceFromPathname) {
+    return surfaceFromPathname;
+  }
+
+  const surfaceConfig = readPlacementSurfaceConfig(contextValue);
+  return surfaceConfig.defaultSurfaceId || "*";
+});
+
+const primaryNavEntries = computed(() => {
+  void revision.value;
+  const contextValue = placementContext?.value || null;
+  const routeParams = route?.params || {};
+
+  return placementRuntime
+    .getPlacements({
+      surface: currentSurfaceId.value,
+      target: props.target,
+      layoutClass: "compact"
+    })
+    .filter((entry) => String(entry.semanticTarget || entry.target || "").trim() === props.semanticTarget)
+    .map((entry, index) => {
+      const entryProps = entry?.props && typeof entry.props === "object" ? entry.props : {};
+      const target = resolveMenuLinkTarget({
+        to: entryProps.to,
+        surface: entryProps.surface,
+        currentSurfaceId: currentSurfaceId.value,
+        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
+          });
+        }
+      });
+      const navigationTarget = resolveSurfaceNavigationTargetFromPlacementContext(contextValue, {
+        path: target,
+        surfaceId: entryProps.surface || currentSurfaceId.value
+      });
+
+      return Object.freeze({
+        id: entry.id,
+        index,
+        exact: entryProps.exact === true,
+        href: navigationTarget.href,
+        pathname: normalizeComparablePathname(navigationTarget.href),
+        sameOrigin: navigationTarget.sameOrigin
+      });
+    })
+    .filter((entry) => entry.pathname && entry.sameOrigin);
+});
+
+const activePrimaryNavIndex = computed(() => {
+  const pathname = currentPathname.value;
+  let bestMatch = null;
+
+  for (const entry of primaryNavEntries.value) {
+    if (!pathMatchesNavigationEntry(pathname, entry)) {
+      continue;
+    }
+    if (!bestMatch || entry.pathname.length > bestMatch.pathname.length) {
+      bestMatch = entry;
+    }
+  }
+
+  return bestMatch ? bestMatch.index : -1;
+});
+
+watch(
+  activePrimaryNavIndex,
+  (nextIndex, previousIndex) => {
+    if (
+      !Number.isInteger(previousIndex) ||
+      previousIndex < 0 ||
+      nextIndex < 0 ||
+      nextIndex === previousIndex
+    ) {
+      transitionDirection.value = "none";
+      return;
+    }
+
+    transitionDirection.value = nextIndex > previousIndex ? "forward" : "reverse";
+  },
+  { flush: "sync" }
+);
+
+const routeTransitionName = computed(() => {
+  if (!props.enabled || resolvedLayoutClass.value !== "compact") {
+    return "";
+  }
+  if (transitionDirection.value === "forward") {
+    return "shell-route-slide-forward";
+  }
+  if (transitionDirection.value === "reverse") {
+    return "shell-route-slide-reverse";
+  }
+  return "";
+});
+
+const routeTransitionKey = computed(() => normalizeComparablePathname(route?.path || route?.fullPath || "/") || "/");
+
+const swipeNavigationEnabled = computed(() =>
+  Boolean(
+    props.enabled &&
+    props.swipeEnabled &&
+    resolvedLayoutClass.value === "compact" &&
+    primaryNavEntries.value.length > 1 &&
+    activePrimaryNavIndex.value >= 0
+  )
+);
+
+function handlePointerDown(event) {
+  if (!swipeNavigationEnabled.value || !isPrimaryPointerEvent(event) || isSwipeIgnoredTarget(event.target)) {
+    activeSwipe = null;
+    return;
+  }
+
+  activeSwipe = {
+    pointerId: event.pointerId,
+    startX: event.clientX,
+    startY: event.clientY,
+    startTime: performance.now(),
+    cancelled: false
+  };
+  try {
+    event.target?.setPointerCapture?.(event.pointerId);
+  } catch {
+    // Synthetic test events and some embedded webviews may not expose an active pointer.
+  }
+}
+
+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) {
+    event.preventDefault();
+  }
+
+  if (isAcceptedSwipe({ deltaX, deltaY, elapsed: Math.max(performance.now() - activeSwipe.startTime, 1) })) {
+    const offset = deltaX < 0 ? 1 : -1;
+    activeSwipe = null;
+    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;
+  }
+
+  navigateBySwipe(deltaX < 0 ? 1 : -1);
+}
+
+function handlePointerCancel(event) {
+  if (activeSwipe && event.pointerId === activeSwipe.pointerId) {
+    activeSwipe = null;
+  }
+}
+
+function navigateBySwipe(offset = 0) {
+  const currentIndex = activePrimaryNavIndex.value;
+  const nextEntry = primaryNavEntries.value[currentIndex + offset];
+  if (!nextEntry?.href || normalizeComparablePathname(nextEntry.href) === currentPathname.value) {
+    return;
+  }
+
+  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) {
+    return "";
+  }
+
+  try {
+    const parsed = new URL(raw, window.location.href);
+    if (parsed.origin !== window.location.origin) {
+      return "";
+    }
+    return normalizePathname(parsed.pathname);
+  } catch {
+    return normalizePathname(normalizeMenuLinkPathname(raw));
+  }
+}
+
+function pathMatchesNavigationEntry(pathname = "", entry = {}) {
+  const target = String(entry.pathname || "").trim();
+  if (!target) {
+    return false;
+  }
+  if (entry.exact || target === "/") {
+    return pathname === target;
+  }
+  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>
+  <div class="shell-route-transition">
+    <Transition :name="routeTransitionName" :css="Boolean(routeTransitionName)">
+      <div :key="routeTransitionKey" class="shell-route-transition__pane">
+        <slot />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.shell-route-transition {
+  --shell-route-transition-distance: 100%;
+  --shell-route-transition-opacity: 1;
+  overflow-x: clip;
+  position: relative;
+}
+
+:global(.shell-route-swipe-enabled) {
+  touch-action: pan-y;
+}
+
+.shell-route-transition__pane {
+  background: rgb(var(--v-theme-background));
+  width: 100%;
+}
+
+.shell-route-slide-forward-enter-active,
+.shell-route-slide-forward-leave-active,
+.shell-route-slide-reverse-enter-active,
+.shell-route-slide-reverse-leave-active {
+  transition:
+    transform 320ms cubic-bezier(0.2, 0, 0, 1),
+    opacity 120ms linear;
+}
+
+.shell-route-slide-forward-leave-active,
+.shell-route-slide-reverse-leave-active {
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+}
+
+.shell-route-slide-forward-enter-from {
+  opacity: var(--shell-route-transition-opacity);
+  transform: translateX(var(--shell-route-transition-distance));
+}
+
+.shell-route-slide-forward-leave-to {
+  opacity: var(--shell-route-transition-opacity);
+  transform: translateX(calc(var(--shell-route-transition-distance) * -1));
+}
+
+.shell-route-slide-reverse-enter-from {
+  opacity: var(--shell-route-transition-opacity);
+  transform: translateX(calc(var(--shell-route-transition-distance) * -1));
+}
+
+.shell-route-slide-reverse-leave-to {
+  opacity: var(--shell-route-transition-opacity);
+  transform: translateX(var(--shell-route-transition-distance));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shell-route-slide-forward-enter-active,
+  .shell-route-slide-forward-leave-active,
+  .shell-route-slide-reverse-enter-active,
+  .shell-route-slide-reverse-leave-active {
+    transition-duration: 1ms;
+  }
+
+  .shell-route-slide-forward-enter-from,
+  .shell-route-slide-forward-leave-to,
+  .shell-route-slide-reverse-enter-from,
+  .shell-route-slide-reverse-leave-to {
+    transform: none;
+  }
+}
+</style>

package/src/client/components/ShellTabLinkItem.vue

@@ -38,6 +38,10 @@ const props = defineProps({
   disabled: {
     type: Boolean,
     default: false
+  },
+  exact: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -101,19 +105,31 @@ const resolvedIcon = computed(() =>
 </script>
 
 <template>
-  <v-list-item
+  <v-btn
     v-if="resolvedTarget.href"
-    class="tab-link-item"
+    class="tab-link-item text-none"
     :to="resolvedTarget.sameOrigin ? resolvedTarget.href : undefined"
     :href="resolvedTarget.sameOrigin ? undefined : resolvedTarget.href"
-    :prepend-icon="resolvedIcon || undefined"
-    :disabled="disabled"
-    :title="label || 'Tab'"
-  />
+    :disabled="props.disabled"
+    :exact="props.exact"
+    min-width="72"
+    stacked
+  >
+    <v-icon v-if="resolvedIcon" :icon="resolvedIcon" />
+    <span class="tab-link-item__label">{{ props.label || "Tab" }}</span>
+  </v-btn>
 </template>
 
 <style scoped>
 .tab-link-item {
   flex: 0 0 auto;
+  min-height: 48px;
+}
+
+.tab-link-item__label {
+  max-width: 5.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </style>

package/src/client/composables/useShellLayoutState.js

@@ -25,7 +25,12 @@ function toSurfaceLabel(surfaceId = "") {
 
 function useShellLayoutState(props = {}) {
   const shellLayoutStore = useShellLayoutStore();
-  const { drawerDefaultOpen, drawerOpen } = storeToRefs(shellLayoutStore);
+  const {
+    drawerDefaultOpen,
+    drawerOpen,
+    supportingContentOpen,
+    supportingContentTitle
+  } = storeToRefs(shellLayoutStore);
   let route = null;
   try {
     route = useRoute();
@@ -83,7 +88,13 @@ function useShellLayoutState(props = {}) {
   return Object.freeze({
     drawerDefaultOpen,
     drawerOpen,
+    supportingContentOpen,
+    supportingContentTitle,
     setDrawerDefaultOpen: shellLayoutStore.setDrawerDefaultOpen,
+    setDrawerOpen: shellLayoutStore.setDrawerOpen,
+    setSupportingContentOpen: shellLayoutStore.setSupportingContentOpen,
+    openSupportingContent: shellLayoutStore.openSupportingContent,
+    closeSupportingContent: shellLayoutStore.closeSupportingContent,
     toggleDrawer,
     resolvedSurface,
     resolvedSurfaceLabel

package/src/client/error/normalize.js

@@ -5,6 +5,7 @@ import {
 
 const ERROR_CHANNELS = Object.freeze(["snackbar", "banner", "dialog", "silent"]);
 const ERROR_SEVERITIES = Object.freeze(["info", "success", "warning", "error", "critical"]);
+const ERROR_INTENTS = Object.freeze(["resource-load", "action-feedback", "app-recoverable", "blocking"]);
 
 function normalizeText(value, fallback = "") {
   return normalizeKernelText(value, {
@@ -34,6 +35,20 @@ function normalizeSeverity(value, fallback = "error") {
   return "error";
 }
 
+function normalizeErrorIntent(value, fallback = "") {
+  const normalized = normalizeText(value).toLowerCase();
+  if (ERROR_INTENTS.includes(normalized)) {
+    return normalized;
+  }
+
+  const normalizedFallback = normalizeText(fallback).toLowerCase();
+  if (ERROR_INTENTS.includes(normalizedFallback)) {
+    return normalizedFallback;
+  }
+
+  return "";
+}
+
 function normalizeNonNegativeInteger(value, fallback = 0) {
   const numericValue = Number(value);
   if (!Number.isFinite(numericValue)) {
@@ -67,10 +82,12 @@ function normalizeAction(value) {
 export {
   ERROR_CHANNELS,
   ERROR_SEVERITIES,
+  ERROR_INTENTS,
   isRecord,
   normalizeText,
   normalizeChannel,
   normalizeSeverity,
+  normalizeErrorIntent,
   normalizeNonNegativeInteger,
   normalizeAction
 };

package/src/client/error/policy.js

@@ -1,33 +1,47 @@
 import {
   normalizeAction,
   normalizeChannel,
+  normalizeErrorIntent,
   normalizeSeverity,
   normalizeText
 } from "./normalize.js";
 
 function createDefaultErrorPolicy({
   defaultChannel = "snackbar",
-  unauthorizedChannel = "banner",
-  serverErrorChannel = "dialog",
+  resourceLoadChannel = "silent",
+  actionFeedbackChannel = "snackbar",
+  appRecoverableChannel = "banner",
+  blockingChannel = "dialog",
   defaultSeverity = "error"
 } = {}) {
   const normalizedDefaultChannel = normalizeChannel(defaultChannel, "snackbar") || "snackbar";
-  const normalizedUnauthorizedChannel = normalizeChannel(unauthorizedChannel, "banner") || "banner";
-  const normalizedServerErrorChannel = normalizeChannel(serverErrorChannel, "dialog") || "dialog";
+  const normalizedResourceLoadChannel = normalizeChannel(resourceLoadChannel, "silent") || "silent";
+  const normalizedActionFeedbackChannel = normalizeChannel(actionFeedbackChannel, "snackbar") || "snackbar";
+  const normalizedAppRecoverableChannel = normalizeChannel(appRecoverableChannel, "banner") || "banner";
+  const normalizedBlockingChannel = normalizeChannel(blockingChannel, "dialog") || "dialog";
   const normalizedDefaultSeverity = normalizeSeverity(defaultSeverity, "error");
 
   return function defaultErrorPolicy(event = {}) {
-    const status = Number(event.status || 0);
     const explicitChannel = normalizeChannel(event.channel);
+    const intent = normalizeErrorIntent(event.intent || (event.blocking === true ? "blocking" : ""));
 
     let channel = explicitChannel;
     if (!channel) {
-      if (event.blocking === true || status >= 500) {
-        channel = normalizedServerErrorChannel;
-      } else if (status === 401 || status === 403) {
-        channel = normalizedUnauthorizedChannel;
-      } else {
-        channel = normalizedDefaultChannel;
+      switch (intent) {
+        case "resource-load":
+          channel = normalizedResourceLoadChannel;
+          break;
+        case "action-feedback":
+          channel = normalizedActionFeedbackChannel;
+          break;
+        case "app-recoverable":
+          channel = normalizedAppRecoverableChannel;
+          break;
+        case "blocking":
+          channel = normalizedBlockingChannel;
+          break;
+        default:
+          channel = normalizedDefaultChannel;
       }
     }
 

package/src/client/error/runtime.js

@@ -2,6 +2,7 @@ import {
   isRecord,
   normalizeAction,
   normalizeChannel,
+  normalizeErrorIntent,
   normalizeNonNegativeInteger,
   normalizeSeverity,
   normalizeText
@@ -43,6 +44,7 @@ function normalizeErrorEvent(rawEvent = {}) {
     source: normalizeText(source.source, "app"),
     message: normalizeText(userMessage || runtimeMessage, "Request failed."),
     userMessage,
+    intent: normalizeErrorIntent(source.intent || source.kind),
     severity: normalizeSeverity(source.severity, "error"),
     channel: normalizeChannel(source.channel),
     presenterId: normalizeText(source.presenterId),

package/src/client/index.js

@@ -9,6 +9,7 @@ export {
 export { default as ShellLayout } from "./components/ShellLayout.vue";
 export { default as ShellOutlet } from "./components/ShellOutlet.vue";
 export { default as ShellOutletMenuWidget } from "./components/ShellOutletMenuWidget.vue";
+export { default as ShellRouteTransition } from "./components/ShellRouteTransition.vue";
 export { default as ShellErrorHost } from "./components/ShellErrorHost.vue";
 export { default as ShellMenuLinkItem } from "./components/ShellMenuLinkItem.vue";
 export { default as ShellSurfaceAwareMenuLinkItem } from "./components/ShellSurfaceAwareMenuLinkItem.vue";