@ossy/app 3.2.0 → 3.4.0

package/src/shell/LanguageSelect.jsx

@@ -8,14 +8,18 @@ import {
 } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 import { languageCode } from './languageCode.js'
+import { compactShellControlStyle } from './mobileShellFocus.js'
 
 /**
  * Language switcher for app shell header — cycle when two locales, dropdown when more.
  */
-export function LanguageSelect () {
+export function LanguageSelect ({ compact = false }) {
   const router = useRouter()
   const { t } = useLocale()
   const { language, supportedLanguages, getHref } = router
+  const controlStyle = compact
+    ? compactShellControlStyle()
+    : { flexShrink: 0 }
 
   if (!supportedLanguages?.length || supportedLanguages.length <= 1) {
     return null
@@ -32,7 +36,7 @@ export function LanguageSelect () {
         prefix="select"
         href={getHref({ language: other })}
         aria-label={pickerLabel}
-        style={{ flexShrink: 0 }}
+        style={controlStyle}
       >
         {languageCode(language)}
       </Button>
@@ -46,7 +50,7 @@ export function LanguageSelect () {
           prefix="select"
           variant="link"
           aria-label={pickerLabel}
-          style={{ flexShrink: 0 }}
+          style={controlStyle}
         >
           {languageCode(language)}
         </Button>

package/src/shell/MobileShellNav.jsx

@@ -0,0 +1,180 @@
+import React, { useEffect, useId, useRef } from 'react'
+import { Button, Overlay, Slot, useLocale, View } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { metadata as OpenMobileShellNav } from '../shell-registry/open-mobile-shell-nav.action.js'
+import { metadata as CloseMobileShellNav } from '../shell-registry/close-mobile-shell-nav.action.js'
+import {
+  TAB_TRAP_FALLBACK,
+  compactShellControlStyle,
+  listFocusable,
+  mobileShellDrawerSafeAreaStyle,
+  resolveTabTrapTarget,
+  setAppShellBackgroundInert,
+  setMobileShellScrollLock,
+} from './mobileShellFocus.js'
+
+/**
+ * Compact-viewport primary nav: menu control + left drawer hosting `app:sidebar`.
+ * Layouts own open state so custom header slots still get a working mobile navbar.
+ */
+export function MobileShellNav ({
+  open = false,
+  onOpenChange = () => {},
+}) {
+  const router = useRouter()
+  const { t } = useLocale()
+  const panelId = useId()
+  const triggerRef = useRef(null)
+  const closeRef = useRef(null)
+  const panelRef = useRef(null)
+  const wasOpenRef = useRef(false)
+
+  useEffect(() => {
+    onOpenChange(false)
+  }, [router.href, onOpenChange])
+
+  useEffect(() => {
+    if (!open) return undefined
+    const onKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        onOpenChange(false)
+        return
+      }
+      if (event.key !== 'Tab') return
+
+      const panel = panelRef.current
+      const focusable = listFocusable(panel)
+      const next = resolveTabTrapTarget({
+        focusable,
+        activeElement: document.activeElement,
+        containsActive: Boolean(panel?.contains?.(document.activeElement)),
+        shiftKey: event.shiftKey,
+      })
+
+      if (next === TAB_TRAP_FALLBACK) {
+        event.preventDefault()
+        closeRef.current?.focus?.()
+        return
+      }
+
+      if (next) {
+        event.preventDefault()
+        next.focus?.()
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [open, onOpenChange])
+
+  useEffect(() => {
+    if (!open || typeof document === 'undefined') return undefined
+    const lock = setMobileShellScrollLock(document, true)
+    setAppShellBackgroundInert(document, true)
+    return () => {
+      setMobileShellScrollLock(document, false, {
+        previousOverflow: lock?.previousOverflow ?? '',
+      })
+      setAppShellBackgroundInert(document, false)
+    }
+  }, [open])
+
+  // Move focus into the drawer on open; restore it to the menu control on close.
+  useEffect(() => {
+    if (open) {
+      wasOpenRef.current = true
+      closeRef.current?.focus?.()
+      return undefined
+    }
+    if (wasOpenRef.current) {
+      wasOpenRef.current = false
+      // Shell inert is cleared in the scroll-lock effect cleanup before this runs.
+      triggerRef.current?.focus?.()
+    }
+    return undefined
+  }, [open])
+
+  const openLabel = t('app.shell.header.openNav') || 'Open navigation'
+  const closeLabel = t('app.shell.header.closeNav') || 'Close navigation'
+  const navLabel = t('app.shell.header.nav') || 'Primary navigation'
+  const touchTargetStyle = compactShellControlStyle()
+
+  return (
+    <>
+      <Button
+        {...OpenMobileShellNav}
+        ref={triggerRef}
+        type="button"
+        variant="link"
+        label={undefined}
+        prefix={OpenMobileShellNav.prefix ?? 'menu'}
+        aria-label={open ? closeLabel : openLabel}
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        aria-controls={panelId}
+        data-ossy-mobile-shell-nav-trigger
+        onClick={() => onOpenChange(!open)}
+        style={touchTargetStyle}
+      />
+      <Overlay
+        isVisible={open}
+        onClose={() => onOpenChange(false)}
+        data-ossy-mobile-shell-nav-overlay
+      >
+        <View
+          ref={panelRef}
+          id={panelId}
+          role="dialog"
+          aria-modal="true"
+          aria-label={navLabel}
+          data-ossy-mobile-shell-nav
+          surface="primary"
+          style={mobileShellDrawerSafeAreaStyle({
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            bottom: 0,
+            width: 'min(20rem, 86vw)',
+            maxWidth: '100%',
+            height: '100%',
+            boxSizing: 'border-box',
+            overflow: 'auto',
+            boxShadow: '4px 0 24px color-mix(in srgb, var(--text-default-color, #000) 22%, transparent)',
+            display: 'flex',
+            flexDirection: 'column',
+            // Theme primary is glass; over Overlay's dark scrim it reads as a muddy top bar.
+            // Use solid color.primary so drawer chrome stays opaque and readable.
+            background: 'var(--color-primary)',
+            backdropFilter: 'none',
+            WebkitBackdropFilter: 'none',
+          })}
+        >
+          <View
+            layout="row"
+            style={{
+              justifyContent: 'flex-end',
+              alignItems: 'center',
+              flexShrink: 0,
+              padding: 'var(--space-s)',
+            }}
+          >
+            <Button
+              {...CloseMobileShellNav}
+              ref={closeRef}
+              type="button"
+              variant="link"
+              label={undefined}
+              prefix={CloseMobileShellNav.prefix ?? 'close'}
+              aria-label={closeLabel}
+              data-ossy-mobile-shell-nav-close
+              onClick={() => onOpenChange(false)}
+              style={touchTargetStyle}
+            />
+          </View>
+          <View style={{ flex: '1 1 auto', minHeight: 0, overflow: 'auto' }}>
+            <Slot view="app:sidebar" presentation="drawer" />
+          </View>
+        </View>
+      </Overlay>
+    </>
+  )
+}

package/src/shell/PageViewTracker.jsx

@@ -0,0 +1,45 @@
+import { useEffect } from 'react'
+import { useRouter } from '@ossy/router-react'
+import { useSdk } from '@ossy/sdk-react'
+import { GetWorkspace } from '@ossy/workspaces'
+import { CreatePageView } from '@ossy/resources'
+
+/** Survives Strict Mode remounts so the same navigation is not double-counted. */
+let lastRecordedKey = null
+let lastRecordedAt = 0
+const DEDUPE_MS = 1500
+
+/**
+ * Emit a page-view resource on client navigations so analytics can aggregate traffic.
+ * No UI — mount once under the app shell / router.
+ */
+export function PageViewTracker () {
+  const router = useRouter()
+  const sdk = useSdk()
+  const { data: workspace } = sdk.read(GetWorkspace)
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    if (!workspace?.id) return
+
+    const path = window.location.pathname || '/'
+    const section = window.location.hash
+      ? window.location.hash.replace('#', '')
+      : undefined
+    const key = `${workspace.id}:${path}:${section || ''}:${router.language || ''}`
+    const now = Date.now()
+    if (lastRecordedKey === key && now - lastRecordedAt < DEDUPE_MS) return
+    lastRecordedKey = key
+    lastRecordedAt = now
+
+    sdk.invoke(CreatePageView, {
+      path,
+      section,
+      language: router.language,
+      referrer: typeof document !== 'undefined' ? (document.referrer || undefined) : undefined,
+      eventAt: now,
+    }).catch(() => {})
+  }, [sdk, router.href, router.language, workspace?.id])
+
+  return null
+}

package/src/shell/ShellHeaderRow.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { View, Slot } from '@ossy/design-system'
+import { MobileShellNav } from './MobileShellNav.jsx'
+import {
+  shouldShowMobileShellNav,
+  shouldShowShellHeaderRow,
+} from './shellChrome.js'
+
+/**
+ * Shared header chrome for default/workspace layouts.
+ * Owns the compact mobile navbar so custom `app:header` slots still get a menu.
+ */
+export function ShellHeaderRow ({
+  compact = false,
+  showSidebar = false,
+  showHeader = false,
+  mobileNavOpen = false,
+  onMobileNavOpenChange = () => {},
+}) {
+  if (!shouldShowShellHeaderRow({ compact, showSidebar, showHeader })) {
+    return null
+  }
+
+  const showMobileNav = shouldShowMobileShellNav({ compact, showSidebar })
+
+  return (
+    <View
+      data-region="header"
+      layout="row"
+      style={{
+        alignItems: 'center',
+        gap: compact ? 'var(--space-xs)' : 'var(--space-s)',
+        minWidth: 0,
+      }}
+    >
+      {showMobileNav && (
+        <MobileShellNav
+          open={mobileNavOpen}
+          onOpenChange={onMobileNavOpenChange}
+        />
+      )}
+      {showHeader && (
+        <View style={{ flex: '1 1 auto', minWidth: 0 }}>
+          <Slot view="app:header" />
+        </View>
+      )}
+    </View>
+  )
+}

package/src/shell/ThemeSelect.jsx

@@ -8,6 +8,7 @@ import {
   useTheme,
 } from '@ossy/design-system'
 import { patchUserAppSettings } from './patchUserAppSettings.js'
+import { compactShellControlStyle } from './mobileShellFocus.js'
 
 const THEME_ICON_BY_NAME = {
   light: 'sun',
@@ -36,6 +37,9 @@ function themeIcon (name) {
 export function ThemeSelect ({ compact = false }) {
   const { themes, activeTheme, setTheme } = useTheme()
   const { t } = useLocale()
+  const controlStyle = compact
+    ? compactShellControlStyle()
+    : { flexShrink: 0 }
 
   const saveTheme = useCallback((themeName) => {
     setTheme(themeName)
@@ -63,7 +67,7 @@ export function ThemeSelect ({ compact = false }) {
         prefix={themeIcon(activeTheme)}
         onClick={cycleTheme}
         aria-label={ariaLabel}
-        style={{ flexShrink: 0 }}
+        style={controlStyle}
       >
         {compact ? null : activeLabel}
       </Button>
@@ -77,7 +81,7 @@ export function ThemeSelect ({ compact = false }) {
           prefix={compact ? themeIcon(activeTheme) : 'select'}
           variant="link"
           aria-label={ariaLabel}
-          style={{ flexShrink: 0 }}
+          style={controlStyle}
         >
           {compact ? null : activeLabel}
         </Button>

package/src/shell/index.js

@@ -5,9 +5,36 @@ export * from './ThemeEditor.jsx'
 export { patchUserAppSettings } from './patchUserAppSettings.js'
 export { useShellWorkspace } from './useShellWorkspace.js'
 export { WorkspaceAppSettingsSync } from './WorkspaceAppSettingsSync.jsx'
+export { PageViewTracker } from './PageViewTracker.jsx'
 export { resolveEndpoints } from './resolveEndpoints.js'
 export { resolveWorkspaceServices } from './resolveWorkspaceServices.js'
-export { useCompactShellLayout } from './useCompactShellLayout.js'
+export {
+  useCompactShellLayout,
+  COMPACT_SHELL_MEDIA_QUERY,
+} from './useCompactShellLayout.js'
+export {
+  shouldShowMobileShellNav,
+  shouldShowShellHeaderRow,
+} from './shellChrome.js'
+export {
+  isDrawerPresentation,
+  resolveSidebarBorderRadius,
+  resolveSidebarSmall,
+  shouldShowSidebarCollapseControl,
+} from './sidebarChrome.js'
+export { MobileShellNav } from './MobileShellNav.jsx'
+export { ShellHeaderRow } from './ShellHeaderRow.jsx'
+export {
+  compactAppShellStyle,
+  mobileShellSafeAreaStyle,
+  mobileShellDrawerSafeAreaStyle,
+  compactShellControlStyle,
+  setAppShellBackgroundInert,
+  setMobileShellScrollLock,
+  MOBILE_SHELL_SCROLL_LOCK_ATTR,
+} from './mobileShellFocus.js'
+export { metadata as OpenMobileShellNav } from '../shell-registry/open-mobile-shell-nav.action.js'
+export { metadata as CloseMobileShellNav } from '../shell-registry/close-mobile-shell-nav.action.js'
 export { buildSidebarNav } from './buildSidebarNav.js'
 export { resolvePackageHomePageId } from './resolvePackageHomePageId.js'
 export { shellSlotUnset, shellSlotViewId, coerceShellSlotSpec } from '../../runtime/merge-shell-slots.js'

package/src/shell/mobileShellFocus.js

@@ -0,0 +1,196 @@
+/** Minimum touch target for compact menu / close controls (WCAG 2.5.5). */
+export const MOBILE_SHELL_TOUCH_TARGET_PX = 44
+
+/** Selector for the layout shell that sits behind the mobile nav drawer portal. */
+export const APP_SHELL_SELECTOR = '[data-ossy-app-shell]'
+
+/** Body attribute while the compact drawer locks document scroll (flow hook). */
+export const MOBILE_SHELL_SCROLL_LOCK_ATTR = 'data-ossy-mobile-shell-scroll-lock'
+
+/**
+ * Notches / home-indicator insets via `env(safe-area-inset-*)`.
+ * Requires document viewport `viewport-fit=cover` (see `DOCUMENT_VIEWPORT_CONTENT`).
+ *
+ * @param {Record<string, unknown>} [extra]
+ * @returns {Record<string, unknown>}
+ */
+export function mobileShellSafeAreaStyle (extra = {}) {
+  return {
+    paddingTop: 'env(safe-area-inset-top, 0px)',
+    paddingRight: 'env(safe-area-inset-right, 0px)',
+    paddingBottom: 'env(safe-area-inset-bottom, 0px)',
+    paddingLeft: 'env(safe-area-inset-left, 0px)',
+    ...extra,
+  }
+}
+
+/**
+ * Notches / home-indicator insets for the compact nav drawer panel.
+ * Applied on the dialog root so close + sidebar content clear the safe area.
+ *
+ * @param {Record<string, unknown>} [extra]
+ * @returns {Record<string, unknown>}
+ */
+export function mobileShellDrawerSafeAreaStyle (extra = {}) {
+  return mobileShellSafeAreaStyle(extra)
+}
+
+/**
+ * Outer padding for compact default/workspace shells (edge-to-edge except safe area).
+ * Desktop shells keep `var(--space-m)`; compact uses safe-area insets only.
+ *
+ * @param {Record<string, unknown>} [extra]
+ * @returns {Record<string, unknown>}
+ */
+export function compactAppShellStyle (extra = {}) {
+  return mobileShellSafeAreaStyle({
+    boxSizing: 'border-box',
+    height: '100%',
+    minWidth: 0,
+    ...extra,
+  })
+}
+
+/**
+ * Inline style for compact shell icon/link controls (menu, close, header chrome).
+ * Keeps hit areas ≥ {@link MOBILE_SHELL_TOUCH_TARGET_PX}.
+ *
+ * @param {Record<string, unknown>} [extra]
+ * @returns {Record<string, unknown>}
+ */
+export function compactShellControlStyle (extra = {}) {
+  return {
+    flexShrink: 0,
+    minWidth: MOBILE_SHELL_TOUCH_TARGET_PX,
+    minHeight: MOBILE_SHELL_TOUCH_TARGET_PX,
+    boxSizing: 'border-box',
+    ...extra,
+  }
+}
+
+/**
+ * Mark (or clear) the app shell behind an open mobile drawer so AT / Tab ignore it.
+ * The drawer itself is portaled outside the shell (`Overlay`), so inert + aria-hidden
+ * on `[data-ossy-app-shell]` does not hide the dialog.
+ *
+ * @param {ParentNode | null | undefined} root Document or test container
+ * @param {boolean} enabled
+ * @returns {Element | null} The shell element when found
+ */
+export function setAppShellBackgroundInert (root, enabled) {
+  const shell = root?.querySelector?.(APP_SHELL_SELECTOR) ?? null
+  if (!shell) return null
+
+  if (enabled) {
+    shell.setAttribute('aria-hidden', 'true')
+    if ('inert' in shell) {
+      shell.inert = true
+    } else {
+      shell.setAttribute('inert', '')
+    }
+  } else {
+    shell.removeAttribute('aria-hidden')
+    if ('inert' in shell) {
+      shell.inert = false
+    }
+    shell.removeAttribute('inert')
+  }
+
+  return shell
+}
+
+/**
+ * Lock (or restore) document body scroll while the compact mobile drawer is open.
+ * Sets {@link MOBILE_SHELL_SCROLL_LOCK_ATTR} so flows can assert scroll-lock without
+ * reading computed styles.
+ *
+ * @param {Document | { body?: HTMLElement | null } | null | undefined} doc
+ * @param {boolean} enabled
+ * @param {{ previousOverflow?: string }} [opts] Pass the overflow returned when enabling
+ *   so cleanup restores the prior inline value.
+ * @returns {{ body: HTMLElement, previousOverflow: string } | null}
+ */
+export function setMobileShellScrollLock (doc, enabled, opts = {}) {
+  const body = doc?.body ?? null
+  if (!body) return null
+
+  if (enabled) {
+    const previousOverflow = body.style?.overflow ?? ''
+    if (body.style) body.style.overflow = 'hidden'
+    body.setAttribute?.(MOBILE_SHELL_SCROLL_LOCK_ATTR, '')
+    return { body, previousOverflow }
+  }
+
+  if (body.style) {
+    body.style.overflow = opts.previousOverflow ?? ''
+  }
+  body.removeAttribute?.(MOBILE_SHELL_SCROLL_LOCK_ATTR)
+  return { body, previousOverflow: opts.previousOverflow ?? '' }
+}
+
+export const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',')
+
+/** Sentinel: trap has no focusable nodes; caller should focus its fallback control. */
+export const TAB_TRAP_FALLBACK = Object.freeze({ fallback: true })
+
+/**
+ * List Tab-reachable elements inside a drawer root.
+ * Skips `aria-hidden` nodes and elements that are not visible.
+ *
+ * @param {{ querySelectorAll?: Function } | null | undefined} root
+ * @returns {Element[]}
+ */
+export function listFocusable (root) {
+  if (!root?.querySelectorAll) return []
+  return [...root.querySelectorAll(FOCUSABLE_SELECTOR)].filter((el) => {
+    if (el.getAttribute?.('aria-hidden') === 'true') return false
+    if (typeof el.checkVisibility === 'function') {
+      return el.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true })
+    }
+    const active = typeof document !== 'undefined' ? document.activeElement : null
+    return el.offsetParent !== null || el === active
+  })
+}
+
+/**
+ * Resolve the next focus target for Tab / Shift+Tab inside an open drawer.
+ *
+ * @param {{
+ *   focusable: unknown[],
+ *   activeElement: unknown,
+ *   containsActive: boolean,
+ *   shiftKey: boolean,
+ * }} opts
+ * @returns {null | typeof TAB_TRAP_FALLBACK | unknown}
+ *   - `TAB_TRAP_FALLBACK` when there are no focusable nodes
+ *   - an element to focus (and preventDefault) when wrapping
+ *   - `null` to leave default Tab behavior alone
+ */
+export function resolveTabTrapTarget ({
+  focusable,
+  activeElement,
+  containsActive,
+  shiftKey,
+}) {
+  if (!Array.isArray(focusable) || focusable.length === 0) {
+    return TAB_TRAP_FALLBACK
+  }
+
+  const first = focusable[0]
+  const last = focusable[focusable.length - 1]
+
+  if (shiftKey) {
+    if (!containsActive || activeElement === first) return last
+    return null
+  }
+
+  if (!containsActive || activeElement === last) return first
+  return null
+}

package/src/shell/shellChrome.js

@@ -0,0 +1,24 @@
+/** Matches Cloud theme compact typography (`theme.media['(max-width: 900px)']`). */
+export const COMPACT_SHELL_MEDIA_QUERY = '(max-width: 900px)'
+
+/**
+ * Whether layouts should render the header row on the current viewport.
+ * Compact chrome hides the in-grid sidebar, so a menu control must remain
+ * reachable even when the `app:header` slot is intentionally unset.
+ *
+ * @param {{ compact: boolean, showSidebar: boolean, showHeader: boolean }} opts
+ * @returns {boolean}
+ */
+export function shouldShowShellHeaderRow ({ compact, showSidebar, showHeader }) {
+  return Boolean(showHeader || (compact && showSidebar))
+}
+
+/**
+ * Whether the mobile navbar (menu + drawer) should render.
+ *
+ * @param {{ compact: boolean, showSidebar: boolean }} opts
+ * @returns {boolean}
+ */
+export function shouldShowMobileShellNav ({ compact, showSidebar }) {
+  return Boolean(compact && showSidebar)
+}

package/src/shell/sidebarChrome.js

@@ -0,0 +1,60 @@
+/**
+ * Pure chrome rules for default / primary sidebars when hosted in-grid vs
+ * inside the compact mobile nav drawer (`presentation="drawer"`).
+ */
+
+/**
+ * @param {unknown} presentation
+ * @returns {boolean}
+ */
+export function isDrawerPresentation (presentation) {
+  return presentation === 'drawer'
+}
+
+/**
+ * Drawer chrome must stay expanded (labeled); otherwise honor compact /
+ * collapsed / explicit `small`.
+ *
+ * @param {{
+ *   presentation?: unknown,
+ *   compactViewport?: boolean,
+ *   sidebarCollapsed?: boolean,
+ *   smallProp?: boolean,
+ * }} opts
+ * @returns {boolean}
+ */
+export function resolveSidebarSmall ({
+  presentation,
+  compactViewport = false,
+  sidebarCollapsed = false,
+  smallProp = false,
+}) {
+  if (isDrawerPresentation(presentation)) return false
+  return Boolean(compactViewport || sidebarCollapsed || smallProp)
+}
+
+/**
+ * Collapse control is desktop in-grid only — never in the mobile drawer or
+ * on compact viewports (drawer owns open/close).
+ *
+ * @param {{ presentation?: unknown, compactViewport?: boolean }} opts
+ * @returns {boolean}
+ */
+export function shouldShowSidebarCollapseControl ({
+  presentation,
+  compactViewport = false,
+}) {
+  return !isDrawerPresentation(presentation) && !compactViewport
+}
+
+/**
+ * Square panel in the drawer; rounded rail when in-grid.
+ *
+ * @param {unknown} presentation
+ * @returns {0 | string}
+ */
+export function resolveSidebarBorderRadius (presentation) {
+  return isDrawerPresentation(presentation)
+    ? 0
+    : 'var(--space-l) var(--space-s) var(--space-s) var(--space-l)'
+}

package/src/shell/useCompactShellLayout.js

@@ -1,18 +1,18 @@
 import { useSyncExternalStore } from 'react'
+import { COMPACT_SHELL_MEDIA_QUERY } from './shellChrome.js'
 
-/** Viewports at or below this width use compact chrome (icon rail, tighter padding). */
-const COMPACT_MEDIA_QUERY = '(max-width: 900px)'
+export { COMPACT_SHELL_MEDIA_QUERY }
 
 function subscribe (onStoreChange) {
   if (typeof window === 'undefined') return () => {}
-  const mq = window.matchMedia(COMPACT_MEDIA_QUERY)
+  const mq = window.matchMedia(COMPACT_SHELL_MEDIA_QUERY)
   mq.addEventListener('change', onStoreChange)
   return () => mq.removeEventListener('change', onStoreChange)
 }
 
 function getSnapshot () {
   if (typeof window === 'undefined') return false
-  return window.matchMedia(COMPACT_MEDIA_QUERY).matches
+  return window.matchMedia(COMPACT_SHELL_MEDIA_QUERY).matches
 }
 
 function getServerSnapshot () {