@jskit-ai/shell-web 0.1.149 → 0.1.151

package/src/client/components/ShellLayout.vue

@@ -2,6 +2,7 @@
 import {
   computed,
   inject,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   ref,
@@ -13,6 +14,15 @@ import {
   resolveShellDrawerPresentation,
   resolveShellDrawerToggleLabel
 } from "../support/drawerPresentation.js";
+import {
+  DEFAULT_SHELL_DRAWER_WIDTH,
+  DEFAULT_SHELL_NAVIGATION_ITEM_SPACING,
+  DEFAULT_SHELL_RAIL_WIDTH,
+  normalizeShellDrawerWidth,
+  normalizeShellNavigationItemSpacing,
+  normalizeShellRailWidth,
+  resolveContentAwareDrawerWidth
+} from "../support/drawerWidth.js";
 import ShellOutlet from "./ShellOutlet.vue";
 import ShellRouteTransition from "./ShellRouteTransition.vue";
 
@@ -36,6 +46,18 @@ const props = defineProps({
   desktopDrawerClosedMode: {
     type: String,
     default: "rail"
+  },
+  drawerWidth: {
+    type: Number,
+    default: null
+  },
+  railWidth: {
+    type: Number,
+    default: DEFAULT_SHELL_RAIL_WIDTH
+  },
+  navigationItemSpacing: {
+    type: Number,
+    default: DEFAULT_SHELL_NAVIGATION_ITEM_SPACING
   }
 });
 
@@ -56,7 +78,13 @@ const refreshRuntime = inject("jskit.shell-web.runtime.web-refresh.client", null
 const pullDistance = ref(0);
 const pullRefreshing = ref(false);
 const wideDrawerOpen = ref(Boolean(drawerDefaultOpen.value));
+const navigationToggle = ref(null);
+const navigationDrawer = ref(null);
+const measuredDrawerWidth = ref(DEFAULT_SHELL_DRAWER_WIDTH);
 let activePull = null;
+let drawerContentObserver = null;
+let drawerMeasurementFrame = null;
+let shellMounted = false;
 
 const PULL_REFRESH_TRIGGER_DISTANCE = 72;
 const PULL_REFRESH_MAX_DISTANCE = 112;
@@ -81,6 +109,16 @@ const drawerToggleLabel = computed(() => resolveShellDrawerToggleLabel({
   compact: isCompactLayout.value,
   open: drawerOpen.value
 }));
+const resolvedDrawerWidth = computed(() => {
+  if (props.drawerWidth !== null && props.drawerWidth !== undefined) {
+    return normalizeShellDrawerWidth(props.drawerWidth);
+  }
+  return normalizeShellDrawerWidth(measuredDrawerWidth.value);
+});
+const resolvedRailWidth = computed(() => normalizeShellRailWidth(props.railWidth));
+const resolvedNavigationItemSpacing = computed(() =>
+  normalizeShellNavigationItemSpacing(props.navigationItemSpacing)
+);
 const pullProgress = computed(() =>
   Math.min(100, Math.round((pullDistance.value / PULL_REFRESH_TRIGGER_DISTANCE) * 100))
 );
@@ -99,26 +137,30 @@ const pullRefreshStyle = computed(() => ({
 
 watch(
   drawerOpen,
-  (open) => {
-    if (!isCompactLayout.value) {
-      wideDrawerOpen.value = Boolean(open);
-    }
-  }
+  handleDrawerOpenChange
 );
 
 watch(
   isCompactLayout,
-  (compact) => {
-    setDrawerOpen(compact ? false : wideDrawerOpen.value);
-  },
+  handleLayoutClassChange,
   { immediate: true }
 );
 
-onMounted(() => {
+watch(drawerPresentation, scheduleDrawerWidthMeasurement, { flush: "post" });
+watch(resolvedSurface, scheduleDrawerWidthMeasurement, { flush: "post" });
+watch(resolvedNavigationItemSpacing, scheduleDrawerWidthMeasurement, { flush: "post" });
+
+onMounted(attachShellListeners);
+onBeforeUnmount(detachShellListeners);
+
+function attachShellListeners() {
+  shellMounted = true;
   if (typeof window !== "object") {
     return;
   }
 
+  window.addEventListener("keydown", handleShellKeydown);
+  window.addEventListener("resize", scheduleDrawerWidthMeasurement, { passive: true });
   window.addEventListener("pointerdown", handlePullPointerDown, { capture: true, passive: true });
   window.addEventListener("pointermove", handlePullPointerMove, { capture: true, passive: false });
   window.addEventListener("pointerup", handlePullPointerEnd, { capture: true, passive: true });
@@ -127,13 +169,22 @@ onMounted(() => {
   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 (document?.fonts) {
+    void document.fonts.ready.then(scheduleDrawerWidthMeasurement);
+    document.fonts.addEventListener?.("loadingdone", scheduleDrawerWidthMeasurement);
+  }
+  void nextTick().then(initializeDrawerMeasurement);
+}
+
+function detachShellListeners() {
+  shellMounted = false;
   if (typeof window !== "object") {
     return;
   }
 
+  window.removeEventListener("keydown", handleShellKeydown);
+  window.removeEventListener("resize", scheduleDrawerWidthMeasurement);
   window.removeEventListener("pointerdown", handlePullPointerDown, { capture: true });
   window.removeEventListener("pointermove", handlePullPointerMove, { capture: true });
   window.removeEventListener("pointerup", handlePullPointerEnd, { capture: true });
@@ -142,7 +193,135 @@ onBeforeUnmount(() => {
   window.removeEventListener("touchmove", handlePullTouchMove, { capture: true });
   window.removeEventListener("touchend", handlePullTouchEnd, { capture: true });
   window.removeEventListener("touchcancel", handlePullTouchCancel, { capture: true });
-});
+  document?.fonts?.removeEventListener?.("loadingdone", scheduleDrawerWidthMeasurement);
+  drawerContentObserver?.disconnect();
+  drawerContentObserver = null;
+  if (drawerMeasurementFrame !== null) {
+    window.cancelAnimationFrame(drawerMeasurementFrame);
+    drawerMeasurementFrame = null;
+  }
+}
+
+function handleDrawerOpenChange(open) {
+  if (!isCompactLayout.value) {
+    wideDrawerOpen.value = Boolean(open);
+  }
+}
+
+function handleLayoutClassChange(compact) {
+  setDrawerOpen(compact ? false : wideDrawerOpen.value);
+}
+
+function handleShellKeydown(event) {
+  if (
+    event?.defaultPrevented ||
+    event?.key !== "Escape" ||
+    !isCompactLayout.value ||
+    !drawerOpen.value
+  ) {
+    return;
+  }
+
+  event.preventDefault();
+  setDrawerOpen(false);
+  void nextTick().then(focusNavigationToggle);
+}
+
+function focusNavigationToggle() {
+  const toggleElement = navigationToggle.value?.$el || navigationToggle.value;
+  toggleElement?.focus?.({ preventScroll: true });
+}
+
+function initializeDrawerMeasurement() {
+  const drawerElement = resolveNavigationDrawerElement();
+  const drawerContent = drawerElement?.querySelector?.(".v-navigation-drawer__content") || drawerElement;
+  if (typeof MutationObserver === "function" && drawerContent) {
+    drawerContentObserver?.disconnect();
+    drawerContentObserver = new MutationObserver(scheduleDrawerWidthMeasurement);
+    drawerContentObserver.observe(drawerContent, {
+      childList: true,
+      characterData: true,
+      subtree: true
+    });
+  }
+  scheduleDrawerWidthMeasurement();
+}
+
+function resolveNavigationDrawerElement() {
+  const exposedElement = navigationDrawer.value?.$el || navigationDrawer.value || null;
+  if (typeof exposedElement?.getBoundingClientRect === "function") {
+    return exposedElement;
+  }
+  if (typeof document === "object") {
+    return document.getElementById("jskit-shell-drawer");
+  }
+  return null;
+}
+
+function scheduleDrawerWidthMeasurement() {
+  if (
+    !shellMounted ||
+    props.drawerWidth !== null && props.drawerWidth !== undefined ||
+    !drawerPresentation.value.visible ||
+    drawerPresentation.value.rail ||
+    typeof window !== "object"
+  ) {
+    return;
+  }
+
+  if (drawerMeasurementFrame !== null) {
+    window.cancelAnimationFrame(drawerMeasurementFrame);
+  }
+  drawerMeasurementFrame = window.requestAnimationFrame(measureDrawerContentWidth);
+}
+
+function measureDrawerContentWidth() {
+  drawerMeasurementFrame = null;
+  const drawerElement = resolveNavigationDrawerElement();
+  if (!drawerElement || typeof document !== "object") {
+    return;
+  }
+
+  const drawerRect = drawerElement.getBoundingClientRect();
+  const drawerStyle = window.getComputedStyle(drawerElement);
+  const rightToLeft = drawerStyle.direction === "rtl";
+  const endBorderWidth = Number.parseFloat(
+    rightToLeft ? drawerStyle.borderLeftWidth : drawerStyle.borderRightWidth
+  ) || 0;
+  const measurements = [];
+
+  for (const label of drawerElement.querySelectorAll(".v-list-item-title")) {
+    const labelStyle = window.getComputedStyle(label);
+    if (labelStyle.display === "none" || labelStyle.visibility === "hidden") {
+      continue;
+    }
+    const textRect = measureRenderedText(label);
+    if (!textRect || textRect.width <= 0) {
+      continue;
+    }
+    measurements.push({
+      logicalStart: rightToLeft
+        ? drawerRect.right - textRect.right
+        : textRect.left - drawerRect.left,
+      textWidth: textRect.width
+    });
+  }
+
+  const nextWidth = resolveContentAwareDrawerWidth(measurements, {
+    endGap: resolvedNavigationItemSpacing.value + endBorderWidth
+  });
+  if (Math.abs(nextWidth - measuredDrawerWidth.value) >= 0.25) {
+    measuredDrawerWidth.value = nextWidth;
+  }
+}
+
+function measureRenderedText(element) {
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  const rect = range.getBoundingClientRect();
+  range.detach?.();
+  return rect;
+}
 
 function handlePullPointerDown(event) {
   if (!canStartPullRefresh(event)) {
@@ -391,6 +570,7 @@ function touchListIncludesActiveTouch(touchList) {
     data-testid="jskit-shell-app-bar"
   >
     <v-app-bar-nav-icon
+      ref="navigationToggle"
       class="shell-layout__nav-toggle"
       data-testid="jskit-shell-nav-toggle"
       :aria-label="drawerToggleLabel"
@@ -436,21 +616,33 @@ function touchListIncludesActiveTouch(touchList) {
   </div>
 
   <v-navigation-drawer
+    ref="navigationDrawer"
     id="jskit-shell-drawer"
     :model-value="drawerPresentation.visible"
     border
-    class="bg-surface"
+    class="shell-layout__drawer bg-surface"
     data-testid="jskit-shell-drawer"
+    :data-layout="layoutClass"
     :data-presentation="drawerPresentation.kind"
+    :data-drawer-width-mode="props.drawerWidth === null || props.drawerWidth === undefined ? 'content' : 'fixed'"
+    :data-drawer-width="resolvedDrawerWidth"
+    :data-navigation-item-spacing="resolvedNavigationItemSpacing"
+    :data-rail-width="resolvedRailWidth"
+    :style="{ '--shell-navigation-item-spacing': `${resolvedNavigationItemSpacing}px` }"
     :temporary="isCompactLayout"
     :permanent="!isCompactLayout"
-    :width="248"
+    :width="resolvedDrawerWidth"
     :rail="drawerPresentation.rail"
-    :rail-width="80"
+    :rail-width="resolvedRailWidth"
     @update:model-value="handleDrawerVisibilityChange"
   >
     <slot name="menu" :surface="resolvedSurface" :rail="drawerPresentation.rail">
-      <v-list nav density="comfortable" class="pt-2">
+      <v-list
+        nav
+        density="comfortable"
+        class="pt-2"
+        :prepend-gap="resolvedNavigationItemSpacing"
+      >
         <v-list-subheader v-if="!drawerPresentation.rail" class="text-uppercase text-caption">
           {{ resolvedSurfaceLabel }}
         </v-list-subheader>
@@ -538,6 +730,56 @@ function touchListIncludesActiveTouch(touchList) {
   min-width: 48px;
 }
 
+.shell-layout__drawer :deep(.v-list-item-title) {
+  white-space: nowrap;
+}
+
+.shell-layout__drawer[data-presentation="drawer"] :deep(.v-list--nav),
+.shell-layout__drawer[data-presentation="drawer"] :deep(.v-list-item) {
+  padding-inline-end: calc(var(--shell-navigation-item-spacing) / 2);
+}
+
+.shell-layout__drawer[data-presentation="rail"] :deep(.v-list-item) {
+  grid-template-areas: "prepend";
+  grid-template-columns: minmax(0, 1fr);
+  inline-size: 100%;
+  min-height: 48px;
+  min-width: 48px;
+  padding-inline: 0;
+}
+
+.shell-layout__drawer[data-presentation="rail"] :deep(.v-list-item__prepend) {
+  inline-size: 100%;
+  justify-content: center;
+  min-width: 0;
+}
+
+.shell-layout__drawer[data-presentation="rail"] :deep(.v-list-item__prepend .v-list-item__spacer),
+.shell-layout__drawer[data-presentation="rail"] :deep(.v-list-item__content),
+.shell-layout__drawer[data-presentation="rail"] :deep(.v-list-item__append) {
+  display: none;
+}
+
+.shell-layout__drawer[data-presentation="rail"] :deep(.v-list-item__overlay) {
+  border-radius: 999px;
+  inset-block: 8px;
+  inset-inline: 4px;
+}
+
+.shell-layout__drawer[data-presentation="rail"] :deep(.v-list-item--active > .v-list-item__overlay) {
+  background: color-mix(
+    in srgb,
+    rgb(var(--v-theme-primary)) 18%,
+    rgb(var(--v-theme-surface))
+  );
+  opacity: 1;
+}
+
+.shell-layout__drawer[data-presentation="rail"] :deep(.v-list-item--active .v-icon) {
+  color: rgb(var(--v-theme-primary));
+  opacity: 1;
+}
+
 .shell-layout__top-right {
   max-width: min(45vw, 18rem);
   overflow: hidden;

package/src/client/components/ShellMenuLinkItem.vue

@@ -5,6 +5,8 @@ import {
   useWebPlacementContext
 } from "../placement/index.js";
 import { resolveMenuLinkIcon } from "../lib/menuIcons.js";
+import { activateShellNavigationLinkOnSpace } from "../support/navigationLinkKeyboard.js";
+import ShellNavigationTooltip from "./ShellNavigationTooltip.vue";
 
 const props = defineProps({
   label: {
@@ -59,18 +61,22 @@ const resolvedIcon = computed(() =>
 </script>
 
 <template>
-  <v-list-item
-    v-if="resolvedTarget.href"
-    class="shell-menu-link-item"
-    :title="props.label"
-    :to="resolvedTarget.sameOrigin ? resolvedTarget.href : undefined"
-    :href="resolvedTarget.sameOrigin ? undefined : resolvedTarget.href"
-    :prepend-icon="resolvedIcon || undefined"
-    :disabled="props.disabled"
-    :exact="props.exact"
-    :aria-label="props.label"
-    v-tooltip="props.label"
-  />
+  <ShellNavigationTooltip v-if="resolvedTarget.href" :label="props.label">
+    <template #default="{ activatorProps }">
+      <v-list-item
+        v-bind="activatorProps"
+        class="shell-menu-link-item"
+        :title="props.label"
+        :to="resolvedTarget.sameOrigin ? resolvedTarget.href : undefined"
+        :href="resolvedTarget.sameOrigin ? undefined : resolvedTarget.href"
+        :prepend-icon="resolvedIcon || undefined"
+        :disabled="props.disabled"
+        :exact="props.exact"
+        :aria-label="props.label"
+        @keydown.space="activateShellNavigationLinkOnSpace"
+      />
+    </template>
+  </ShellNavigationTooltip>
 </template>
 
 <style scoped>

package/src/client/components/ShellNavigationTooltip.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { useTheme } from "vuetify";
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: ""
+  }
+});
+
+const theme = useTheme();
+</script>
+
+<template>
+  <v-tooltip
+    :text="props.label"
+    :theme="theme.name.value"
+    location="end"
+    content-class="shell-navigation-tooltip"
+    :open-on-focus="true"
+    :open-on-hover="true"
+  >
+    <template #activator="{ props: activatorProps }">
+      <slot :activator-props="activatorProps" />
+    </template>
+  </v-tooltip>
+</template>
+
+<style>
+.shell-navigation-tooltip {
+  background-color:
+    rgb(var(--v-theme-inverse-surface, var(--v-theme-on-surface))) !important;
+  color:
+    rgb(var(--v-theme-inverse-on-surface, var(--v-theme-surface))) !important;
+  opacity: 1 !important;
+}
+</style>

package/src/client/components/ShellSurfaceAwareMenuLinkItem.vue

@@ -9,6 +9,8 @@ import {
 } from "../placement/index.js";
 import { resolveMenuLinkIcon } from "../lib/menuIcons.js";
 import { resolveMenuLinkTarget } from "../support/menuLinkTarget.js";
+import { activateShellNavigationLinkOnSpace } from "../support/navigationLinkKeyboard.js";
+import ShellNavigationTooltip from "./ShellNavigationTooltip.vue";
 
 const props = defineProps({
   label: {
@@ -104,18 +106,22 @@ const resolvedIcon = computed(() =>
 </script>
 
 <template>
-  <v-list-item
-    v-if="resolvedTarget.href"
-    class="shell-menu-link-item"
-    :title="props.label"
-    :to="resolvedTarget.sameOrigin ? resolvedTarget.href : undefined"
-    :href="resolvedTarget.sameOrigin ? undefined : resolvedTarget.href"
-    :prepend-icon="resolvedIcon || undefined"
-    :disabled="props.disabled"
-    :exact="props.exact"
-    :aria-label="props.label"
-    v-tooltip="props.label"
-  />
+  <ShellNavigationTooltip v-if="resolvedTarget.href" :label="props.label">
+    <template #default="{ activatorProps }">
+      <v-list-item
+        v-bind="activatorProps"
+        class="shell-menu-link-item"
+        :title="props.label"
+        :to="resolvedTarget.sameOrigin ? resolvedTarget.href : undefined"
+        :href="resolvedTarget.sameOrigin ? undefined : resolvedTarget.href"
+        :prepend-icon="resolvedIcon || undefined"
+        :disabled="props.disabled"
+        :exact="props.exact"
+        :aria-label="props.label"
+        @keydown.space="activateShellNavigationLinkOnSpace"
+      />
+    </template>
+  </ShellNavigationTooltip>
 </template>
 
 <style scoped>

package/src/client/support/drawerWidth.js

@@ -0,0 +1,91 @@
+const DEFAULT_SHELL_DRAWER_WIDTH = 248;
+const DEFAULT_SHELL_RAIL_WIDTH = 80;
+const MINIMUM_SHELL_DRAWER_WIDTH = 120;
+const MAXIMUM_SHELL_DRAWER_WIDTH = 360;
+const MINIMUM_SHELL_RAIL_WIDTH = 48;
+const MAXIMUM_SHELL_RAIL_WIDTH = 160;
+const DEFAULT_SHELL_NAVIGATION_ITEM_SPACING = 12;
+const MINIMUM_SHELL_NAVIGATION_ITEM_SPACING = 8;
+const MAXIMUM_SHELL_NAVIGATION_ITEM_SPACING = 24;
+
+function clampNumber(value, minimum, maximum) {
+  return Math.min(maximum, Math.max(minimum, value));
+}
+
+function normalizeShellDrawerWidth(value, fallback = DEFAULT_SHELL_DRAWER_WIDTH) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed) || parsed <= 0) {
+    return fallback;
+  }
+  return clampNumber(
+    parsed,
+    MINIMUM_SHELL_DRAWER_WIDTH,
+    MAXIMUM_SHELL_DRAWER_WIDTH
+  );
+}
+
+function normalizeShellRailWidth(value, fallback = DEFAULT_SHELL_RAIL_WIDTH) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed) || parsed <= 0) {
+    return fallback;
+  }
+  return clampNumber(
+    Math.round(parsed),
+    MINIMUM_SHELL_RAIL_WIDTH,
+    MAXIMUM_SHELL_RAIL_WIDTH
+  );
+}
+
+function normalizeShellNavigationItemSpacing(
+  value,
+  fallback = DEFAULT_SHELL_NAVIGATION_ITEM_SPACING
+) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed) || parsed <= 0) {
+    return fallback;
+  }
+  return clampNumber(
+    Math.round(parsed),
+    MINIMUM_SHELL_NAVIGATION_ITEM_SPACING,
+    MAXIMUM_SHELL_NAVIGATION_ITEM_SPACING
+  );
+}
+
+function resolveContentAwareDrawerWidth(
+  measurements = [],
+  {
+    endGap = DEFAULT_SHELL_NAVIGATION_ITEM_SPACING,
+    minimum = MINIMUM_SHELL_DRAWER_WIDTH,
+    maximum = MAXIMUM_SHELL_DRAWER_WIDTH,
+    fallback = DEFAULT_SHELL_DRAWER_WIDTH
+  } = {}
+) {
+  let requiredWidth = 0;
+  for (const measurement of measurements) {
+    const logicalStart = Number(measurement?.logicalStart);
+    const textWidth = Number(measurement?.textWidth);
+    if (!Number.isFinite(logicalStart) || logicalStart < 0 || !Number.isFinite(textWidth) || textWidth <= 0) {
+      continue;
+    }
+    requiredWidth = Math.max(requiredWidth, logicalStart + textWidth + Number(endGap || 0));
+  }
+
+  if (requiredWidth <= 0) {
+    return normalizeShellDrawerWidth(fallback);
+  }
+  // Preserve subpixel font metrics while rounding outward enough to avoid
+  // clipping the final glyph at the exact spacing boundary.
+  return clampNumber(Math.ceil(requiredWidth * 4) / 4, minimum, maximum);
+}
+
+export {
+  DEFAULT_SHELL_DRAWER_WIDTH,
+  DEFAULT_SHELL_NAVIGATION_ITEM_SPACING,
+  DEFAULT_SHELL_RAIL_WIDTH,
+  MAXIMUM_SHELL_DRAWER_WIDTH,
+  MINIMUM_SHELL_DRAWER_WIDTH,
+  normalizeShellDrawerWidth,
+  normalizeShellNavigationItemSpacing,
+  normalizeShellRailWidth,
+  resolveContentAwareDrawerWidth
+};

package/src/client/support/navigationLinkKeyboard.js

@@ -0,0 +1,10 @@
+function activateShellNavigationLinkOnSpace(event) {
+  if (event?.key !== " " || typeof event.currentTarget?.click !== "function") {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  event.currentTarget.click();
+}
+
+export { activateShellNavigationLinkOnSpace };