@jskit-ai/shell-web 0.1.148 → 0.1.150

package/src/client/components/ShellLayout.vue

@@ -2,6 +2,7 @@
 import {
   computed,
   inject,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   ref,
@@ -9,6 +10,18 @@ import {
 } from "vue";
 import { useDisplay } from "vuetify";
 import { useShellLayoutState } from "../composables/useShellLayoutState.js";
+import {
+  resolveShellDrawerPresentation,
+  resolveShellDrawerToggleLabel
+} from "../support/drawerPresentation.js";
+import {
+  DEFAULT_SHELL_DRAWER_WIDTH,
+  DEFAULT_SHELL_RAIL_WIDTH,
+  SHELL_DRAWER_LABEL_END_GAP,
+  normalizeShellDrawerWidth,
+  normalizeShellRailWidth,
+  resolveContentAwareDrawerWidth
+} from "../support/drawerWidth.js";
 import ShellOutlet from "./ShellOutlet.vue";
 import ShellRouteTransition from "./ShellRouteTransition.vue";
 
@@ -28,6 +41,18 @@ const props = defineProps({
   subtitle: {
     type: String,
     default: ""
+  },
+  desktopDrawerClosedMode: {
+    type: String,
+    default: "rail"
+  },
+  drawerWidth: {
+    type: Number,
+    default: null
+  },
+  railWidth: {
+    type: Number,
+    default: DEFAULT_SHELL_RAIL_WIDTH
   }
 });
 
@@ -47,7 +72,14 @@ const display = useDisplay();
 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;
@@ -63,6 +95,22 @@ const layoutClass = computed(() => {
   return "expanded";
 });
 const isCompactLayout = computed(() => layoutClass.value === "compact");
+const drawerPresentation = computed(() => resolveShellDrawerPresentation({
+  compact: isCompactLayout.value,
+  open: drawerOpen.value,
+  desktopClosedMode: props.desktopDrawerClosedMode
+}));
+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 pullProgress = computed(() =>
   Math.min(100, Math.round((pullDistance.value / PULL_REFRESH_TRIGGER_DISTANCE) * 100))
 );
@@ -79,19 +127,31 @@ const pullRefreshStyle = computed(() => ({
   "--shell-pull-refresh-distance": `${Math.round(Math.min(pullDistance.value, PULL_REFRESH_MAX_DISTANCE))}px`
 }));
 
+watch(
+  drawerOpen,
+  handleDrawerOpenChange
+);
+
 watch(
   isCompactLayout,
-  (compact) => {
-    setDrawerOpen(compact ? false : drawerDefaultOpen.value);
-  },
+  handleLayoutClassChange,
   { immediate: true }
 );
 
-onMounted(() => {
+watch(drawerPresentation, scheduleDrawerWidthMeasurement, { flush: "post" });
+watch(resolvedSurface, 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 });
@@ -100,13 +160,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 });
@@ -115,7 +184,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: SHELL_DRAWER_LABEL_END_GAP + 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)) {
@@ -132,6 +329,12 @@ function handlePullPointerDown(event) {
   };
 }
 
+function handleDrawerVisibilityChange(open) {
+  if (isCompactLayout.value || drawerPresentation.value.closedMode === "hidden" || open === false) {
+    setDrawerOpen(open);
+  }
+}
+
 function handlePullPointerMove(event) {
   if (!activePull || event.pointerId !== activePull.pointerId) {
     return;
@@ -358,8 +561,12 @@ function touchListIncludesActiveTouch(touchList) {
     data-testid="jskit-shell-app-bar"
   >
     <v-app-bar-nav-icon
+      ref="navigationToggle"
       class="shell-layout__nav-toggle"
-      aria-label="Toggle navigation menu"
+      data-testid="jskit-shell-nav-toggle"
+      :aria-label="drawerToggleLabel"
+      :aria-expanded="drawerOpen"
+      aria-controls="jskit-shell-drawer"
       @click="toggleDrawer"
     />
 
@@ -400,17 +607,30 @@ function touchListIncludesActiveTouch(touchList) {
   </div>
 
   <v-navigation-drawer
-    v-model="drawerOpen"
+    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-rail-width="resolvedRailWidth"
+    :style="{ '--shell-drawer-label-end-gap': `${SHELL_DRAWER_LABEL_END_GAP}px` }"
     :temporary="isCompactLayout"
     :permanent="!isCompactLayout"
-    :width="248"
+    :width="resolvedDrawerWidth"
+    :rail="drawerPresentation.rail"
+    :rail-width="resolvedRailWidth"
+    @update:model-value="handleDrawerVisibilityChange"
   >
-    <slot name="menu" :surface="resolvedSurface">
+    <slot name="menu" :surface="resolvedSurface" :rail="drawerPresentation.rail">
       <v-list nav density="comfortable" class="pt-2">
-        <v-list-subheader class="text-uppercase text-caption">{{ resolvedSurfaceLabel }}</v-list-subheader>
+        <v-list-subheader v-if="!drawerPresentation.rail" class="text-uppercase text-caption">
+          {{ resolvedSurfaceLabel }}
+        </v-list-subheader>
         <ShellOutlet
           target="shell-layout:primary-menu"
           default
@@ -495,6 +715,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-drawer-label-end-gap) / 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,16 +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"
-  />
+  <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,16 +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"
-  />
+  <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/drawerPresentation.js

@@ -0,0 +1,58 @@
+const DESKTOP_DRAWER_CLOSED_MODES = Object.freeze(["rail", "hidden"]);
+
+function normalizeDesktopDrawerClosedMode(value = "rail") {
+  const normalized = String(value || "rail").trim().toLowerCase();
+  return DESKTOP_DRAWER_CLOSED_MODES.includes(normalized) ? normalized : "rail";
+}
+
+function resolveShellDrawerPresentation({
+  compact = false,
+  open = false,
+  desktopClosedMode = "rail"
+} = {}) {
+  const closedMode = normalizeDesktopDrawerClosedMode(desktopClosedMode);
+  if (compact) {
+    return Object.freeze({
+      visible: Boolean(open),
+      rail: false,
+      kind: "modal",
+      closedMode
+    });
+  }
+  if (open) {
+    return Object.freeze({
+      visible: true,
+      rail: false,
+      kind: "drawer",
+      closedMode
+    });
+  }
+  if (closedMode === "hidden") {
+    return Object.freeze({
+      visible: false,
+      rail: false,
+      kind: "hidden",
+      closedMode
+    });
+  }
+  return Object.freeze({
+    visible: true,
+    rail: true,
+    kind: "rail",
+    closedMode
+  });
+}
+
+function resolveShellDrawerToggleLabel({ compact = false, open = false } = {}) {
+  if (compact) {
+    return open ? "Close navigation menu" : "Open navigation menu";
+  }
+  return open ? "Collapse navigation drawer" : "Expand navigation drawer";
+}
+
+export {
+  DESKTOP_DRAWER_CLOSED_MODES,
+  normalizeDesktopDrawerClosedMode,
+  resolveShellDrawerPresentation,
+  resolveShellDrawerToggleLabel
+};

package/src/client/support/drawerWidth.js

@@ -0,0 +1,74 @@
+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 SHELL_DRAWER_LABEL_END_GAP = 10;
+
+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 resolveContentAwareDrawerWidth(
+  measurements = [],
+  {
+    endGap = SHELL_DRAWER_LABEL_END_GAP,
+    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);
+  }
+  // Layout boxes expose integer client widths even when the rendered glyph
+  // range is fractional. Round outward so the final glyph is never ellipsized
+  // at the exact end-gap boundary.
+  return clampNumber(Math.ceil(requiredWidth), minimum, maximum);
+}
+
+export {
+  DEFAULT_SHELL_DRAWER_WIDTH,
+  DEFAULT_SHELL_RAIL_WIDTH,
+  MAXIMUM_SHELL_DRAWER_WIDTH,
+  MINIMUM_SHELL_DRAWER_WIDTH,
+  SHELL_DRAWER_LABEL_END_GAP,
+  normalizeShellDrawerWidth,
+  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 };