panelui-native 0.80.0 → 0.82.0

package/lib/module/components/panelside/index.js

@@ -78,17 +78,23 @@
  * accessibility setting on, every spring here resolves instantly to its target
  * rather than travelling.
  */
-import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Platform, Pressable, ScrollView, StyleSheet, TextInput, useWindowDimensions, View } from 'react-native';
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Keyboard, Platform, Pressable, ScrollView, StyleSheet, TextInput, useWindowDimensions, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedProps, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { LinearGradient } from 'expo-linear-gradient';
-import { EllipsisIcon, IconColorProvider, MenuIcon, SearchIcon, XIcon } from "../../icons/index.js";
+import { HugeiconsIcon } from '@hugeicons/react-native';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
+import Menu01Icon from '@hugeicons/core-free-icons/Menu01Icon';
+import MoreHorizontalIcon from '@hugeicons/core-free-icons/MoreHorizontalIcon';
+import Search01Icon from '@hugeicons/core-free-icons/Search01Icon';
+import { IconColorProvider, useIconColor } from "../../icons/index.js";
 import { BottomSheet, bottomSheetDetentHeight } from "../bottom-sheet/index.js";
 import { Button } from "../button/index.js";
+import { Menu } from "../menu/index.js";
 import { Tabs } from "../tabs/index.js";
 import { getNativeUI } from "../../native/index.js";
 import { AnimatedPressable } from "../../primitives/animated-pressable.js";
@@ -242,6 +248,53 @@ const clamp = (value, min, max) => {
   return Math.min(Math.max(value, min), max);
 };
 
+/**
+ * The stroke weight the panel's glyphs are drawn at.
+ *
+ * A shade heavier than the icon set's own default. The panel sits over a
+ * dimmed screen and its rows are quiet by design, so a hairline glyph goes
+ * soft against them at the sizes used here.
+ */
+const GLYPH_STROKE = 1.8;
+
+/**
+ * What a glyph is drawn in when nothing has said. The same neutral the rest of
+ * the chrome falls back to — visible against either theme, and never the thing
+ * that decides how a panel looks, since every surface here provides a colour.
+ */
+const GLYPH_FALLBACK = '#737373';
+
+/**
+ * Floor for a row's action menu.
+ *
+ * Wide enough for a verb and its glyph with the label doing the growing. Left
+ * to size itself, a menu takes its width from the one thing in each row that
+ * is not flexible — the glyph — and comes up as a column of icons.
+ */
+const ACTIONS_MIN_WIDTH = 220;
+
+/**
+ * One of the panel's own glyphs.
+ *
+ * It exists to keep the colour contract the rest of the library has: an icon
+ * takes an explicit colour, then the one an enclosing surface is providing,
+ * and only then falls back. The drawing component underneath knows nothing
+ * about that inheritance and needs the resolved value handed to it.
+ */
+function Glyph({
+  icon,
+  size = 20,
+  color
+}) {
+  const inherited = useIconColor();
+  return /*#__PURE__*/_jsx(HugeiconsIcon, {
+    icon: icon,
+    size: size,
+    color: color ?? inherited ?? GLYPH_FALLBACK,
+    strokeWidth: GLYPH_STROKE
+  });
+}
+
 /**
  * What a header or a footer paints behind itself.
  *
@@ -251,6 +304,8 @@ const clamp = (value, min, max) => {
  * that is a row of the layout rather than something floating over one.
  */
 
+/** How the panel's small round controls are drawn: a fill, or a ring. */
+
 const itemVariants = tv({
   // No width: in a group it stretches on its own, and pinning it to full width
   // would stop it sharing a footer row with anything else. `shrink` because
@@ -293,7 +348,8 @@ const ctaVariants = tv({
     },
     size: {
       default: 'h-11 gap-2 px-6',
-      lg: 'h-13 gap-2.5 px-7'
+      lg: 'h-13 gap-2.5 px-7',
+      xl: 'h-14 gap-3 px-8'
     }
   },
   defaultVariants: {
@@ -322,8 +378,17 @@ export function usePanelside() {
     progress,
     docked,
     searchOpen,
-    setSearchOpen
+    setSearchOpen,
+    route,
+    navigate
   } = usePanelsideContext('usePanelside');
+
+  // `navigate` closes the panel. The root cannot do it there without making
+  // its own `setOpen` a dependency of the callback every row holds.
+  const go = useCallback(next => {
+    navigate(next);
+    setOpen(false);
+  }, [navigate, setOpen]);
   return {
     open,
     setOpen,
@@ -331,7 +396,9 @@ export function usePanelside() {
     progress,
     docked,
     searchOpen,
-    setSearchOpen
+    setSearchOpen,
+    route,
+    navigate: go
   };
 }
 
@@ -359,6 +426,9 @@ function PanelsideRoot({
   scale,
   radius,
   dim,
+  route: controlledRoute,
+  defaultRoute = '',
+  onRouteChange,
   className
 }) {
   const {
@@ -369,6 +439,19 @@ function PanelsideRoot({
   const controlled = controlledOpen !== undefined;
   const open = controlled ? controlledOpen : uncontrolledOpen;
   const [searchOpen, setSearchOpen] = useState(false);
+  const [uncontrolledRoute, setUncontrolledRoute] = useState(defaultRoute);
+  const route = controlledRoute ?? uncontrolledRoute;
+
+  /*
+   * Navigating closes the panel, and does so here rather than at each call
+   * site. The thing you just moved to would otherwise be behind the thing you
+   * moved from, which is the one arrangement no app wants — and a row that has
+   * to be told to close is a row every app writes the same three lines for.
+   */
+  const navigate = useCallback(next => {
+    if (controlledRoute === undefined) setUncontrolledRoute(next);
+    onRouteChange?.(next);
+  }, [controlledRoute, onRouteChange]);
 
   /*
    * Measured rather than taken from the window, because Panelside does not
@@ -505,8 +588,10 @@ function PanelsideRoot({
     radius,
     dim,
     searchOpen,
-    setSearchOpen
-  }), [dim, dismissible, docked, mode, open, progress, radius, scale, searchOpen, setOpen, toggle, width]);
+    setSearchOpen,
+    route,
+    navigate
+  }), [dim, dismissible, docked, mode, navigate, open, progress, radius, route, scale, searchOpen, setOpen, toggle, width]);
   return /*#__PURE__*/_jsx(PanelsideContext.Provider, {
     value: context,
     children: /*#__PURE__*/_jsx(View, {
@@ -669,7 +754,8 @@ function PanelsideSearch({
   const muted = typeof placeholderTint === 'string' ? placeholderTint : undefined;
   return /*#__PURE__*/_jsxs(View, {
     className: cn('h-10 flex-row items-center gap-2 rounded-xl bg-secondary px-3', containerClassName),
-    children: [/*#__PURE__*/_jsx(SearchIcon, {
+    children: [/*#__PURE__*/_jsx(Glyph, {
+      icon: Search01Icon,
       size: 16,
       color: muted
     }), /*#__PURE__*/_jsx(TextInput, {
@@ -785,15 +871,29 @@ function PanelsideItem({
   className,
   icon,
   label,
-  active = false,
+  to,
+  closeOnNavigate = true,
+  active: activeProp,
   badge,
   disabled = false,
   size = 'default',
+  onPress,
   children,
   ...props
 }) {
+  const panel = useContext(PanelsideContext);
   const restTint = useCSSVariable('--color-muted-foreground');
   const activeTint = useCSSVariable('--color-foreground');
+
+  // A row outside a `<Panelside>` still works — the parts are usable on their
+  // own — it simply has no route to match against.
+  const active = activeProp ?? (to !== undefined && panel?.route === to);
+  const press = useCallback(event => {
+    onPress?.(event);
+    if (to === undefined || !panel) return;
+    panel.navigate(to);
+    if (closeOnNavigate) panel.setOpen(false);
+  }, [closeOnNavigate, onPress, panel, to]);
   const tint = active ? typeof activeTint === 'string' ? activeTint : undefined : typeof restTint === 'string' ? restTint : undefined;
   const context = useMemo(() => ({
     active,
@@ -808,8 +908,16 @@ function PanelsideItem({
    * that, and a written-out `Panelside.ItemLabel` supplies it too — so the
    * spacer is only for the row that has neither, which is a row of nothing but
    * an icon and a badge.
+   *
+   * And only where there is something to push. A row of nothing but an icon
+   * has no trailing content, and a spacer in it is not inert: laid out against
+   * the width available rather than against the row's own contents, it expands,
+   * takes the space with it, and squeezes whatever shares the line — which is
+   * how an icon-only row in a footer beside a compose button cropped that
+   * button's label and left its own icon short of the trailing edge.
    */
   const filled = label !== undefined || children !== undefined;
+  const trailing = badge !== undefined && badge !== null;
   return /*#__PURE__*/_jsx(PanelsideItemContext.Provider, {
     value: context,
     children: /*#__PURE__*/_jsxs(AnimatedPressable, {
@@ -827,12 +935,13 @@ function PanelsideItem({
       },
       accessibilityLabel: label,
       pressScale: 0.985,
+      onPress: to !== undefined || onPress ? press : undefined,
       ...props,
       children: [icon ? /*#__PURE__*/_jsx(PanelsideItemIcon, {
         children: icon
       }) : null, label !== undefined ? /*#__PURE__*/_jsx(PanelsideItemLabel, {
         children: label
-      }) : null, filled ? null : /*#__PURE__*/_jsx(View, {
+      }) : null, filled || !trailing ? null : /*#__PURE__*/_jsx(View, {
         className: "flex-1"
       }), badge !== undefined && badge !== null ? /*#__PURE__*/_jsx(PanelsideItemBadge, {
         children: badge
@@ -923,6 +1032,7 @@ function PanelsideAction({
   className,
   label = 'More options',
   children,
+  onPress,
   ...props
 }) {
   const tint = useCSSVariable('--color-muted-foreground');
@@ -934,14 +1044,71 @@ function PanelsideAction({
     // The glyph is small and sits next to a row-sized target, so it takes
     // the difference back as slop rather than as layout.
     ,
-    hitSlop: 8,
+    hitSlop: 8
+    // The row underneath is pressable and usually navigates. A press that
+    // reached both would open the menu and leave the thing it is about.
+    ,
+    onPress: event => {
+      event.stopPropagation();
+      onPress?.(event);
+    },
     ...props,
-    children: children ?? /*#__PURE__*/_jsx(EllipsisIcon, {
+    children: children ?? /*#__PURE__*/_jsx(Glyph, {
+      icon: MoreHorizontalIcon,
       size: 18,
       color: color
     })
   });
 }
+/**
+ * A row's actions, behind an overflow button at the end of it.
+ *
+ * ```tsx
+ * <Panelside.Item label={chat.title} to={chat.id}>
+ *   <Panelside.ItemActions>
+ *     <Menu.Item onSelect={rename}>Rename</Menu.Item>
+ *     <Menu.Separator />
+ *     <Menu.Item variant="destructive" onSelect={remove}>Delete</Menu.Item>
+ *   </Panelside.ItemActions>
+ * </Panelside.Item>
+ * ```
+ *
+ * The panel is anchored to the button rather than presented from the bottom of
+ * the screen, so it lines up with the row it belongs to and the list it came
+ * from stays readable behind it. It is also narrow: the panel it opens in is a
+ * fraction of the screen, and a sheet covering that to offer four verbs costs
+ * more than it says.
+ *
+ * Pressing the button does not press the row. A row that navigates would
+ * otherwise navigate away from the thing the menu is about.
+ */
+function PanelsideItemActions({
+  className,
+  label = 'More options',
+  icon,
+  placement = 'bottom',
+  align = 'end',
+  minWidth = ACTIONS_MIN_WIDTH,
+  contentProps,
+  children
+}) {
+  return /*#__PURE__*/_jsxs(Menu, {
+    children: [/*#__PURE__*/_jsx(Menu.Trigger, {
+      children: /*#__PURE__*/_jsx(PanelsideAction, {
+        className: className,
+        label: label,
+        children: icon
+      })
+    }), /*#__PURE__*/_jsx(Menu.Content, {
+      placement: placement,
+      align: align,
+      width: "content-fit",
+      minWidth: minWidth,
+      ...contentProps,
+      children: children
+    })]
+  });
+}
 function PanelsideFooter({
   className,
   floating = true,
@@ -1016,6 +1183,9 @@ const styles = StyleSheet.create({
     bottom: 0,
     left: 0,
     right: 0
+  },
+  hidden: {
+    display: 'none'
   }
 });
 function PanelsideCta({
@@ -1048,7 +1218,7 @@ function PanelsideCta({
       // The platform sizes a native button from its label, so a height means
       // nothing here — the step is asked for as a control size instead.
       ,
-      size: size === 'lg' ? 'lg' : 'md',
+      size: size === 'default' ? 'md' : size,
       variant: variant,
       accessibilityLabel: label
       // Pressable allows `null` for disabled; Button does not.
@@ -1210,6 +1380,92 @@ function PanelsideScene({
     }) : null]
   });
 }
+/**
+ * The pages the panel navigates between.
+ *
+ * Put it inside `Panelside.Scene` and give each page a `value` that a row's
+ * `to` matches. Nothing is wired between the two: the row sets the panel's
+ * route, and the page whose value equals it is the one shown.
+ *
+ * ```tsx
+ * <Panelside.Scene>
+ *   <Panelside.Pages>
+ *     <Panelside.Page value="inbox"><Inbox /></Panelside.Page>
+ *     <Panelside.Page value="drafts"><Drafts /></Panelside.Page>
+ *   </Panelside.Pages>
+ * </Panelside.Scene>
+ * ```
+ *
+ * A page is mounted the first time it is visited and stays mounted after
+ * that, hidden rather than removed. Going back to one is then a style change
+ * rather than a mount: its list does not rebuild, its scroll position is where
+ * you left it, and whatever it was fetching is already there. A page whose
+ * contents go stale — or whose data is large enough that keeping it is worse
+ * than fetching it again — takes `keepAlive={false}`.
+ */
+function PanelsidePages({
+  className,
+  children,
+  ...props
+}) {
+  const {
+    route
+  } = usePanelsideContext('Panelside.Pages');
+
+  /*
+   * Which pages have ever been the route.
+   *
+   * A `Set` in state rather than a ref: mounting a page for the first time has
+   * to be a render, and the ref would not cause one. It only ever grows, and
+   * only by one entry per page, so the identity change per first visit costs
+   * nothing after the pages have all been seen once.
+   */
+  const [visited, setVisited] = useState(() => [route]);
+  useEffect(() => {
+    setVisited(current => current.includes(route) ? current : [...current, route]);
+  }, [route]);
+  return /*#__PURE__*/_jsx(View, {
+    className: cn('flex-1', className),
+    ...props,
+    children: Children.map(children, child => {
+      if (! /*#__PURE__*/isValidElement(child) || child.type !== PanelsidePage) {
+        return child;
+      }
+      const {
+        value,
+        keepAlive = true
+      } = child.props;
+      const current = value === route;
+      if (!current && (!keepAlive || !visited.includes(value))) return null;
+      return /*#__PURE__*/cloneElement(child, {
+        hidden: !current
+      });
+    })
+  });
+}
+/** One page. Only meaningful inside `Panelside.Pages`. */
+function PanelsidePage({
+  className,
+  value,
+  keepAlive,
+  hidden = false,
+  children,
+  style,
+  ...props
+}) {
+  // `display: none` rather than unmounting, and rather than opacity: it takes
+  // the page out of layout entirely, so a hidden page costs no measurement,
+  // while its component tree — and everything it is holding — stays.
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityElementsHidden: hidden,
+    importantForAccessibility: hidden ? 'no-hide-descendants' : 'auto',
+    pointerEvents: hidden ? 'none' : 'auto',
+    style: [hidden ? styles.hidden : null, style],
+    className: cn('flex-1', className),
+    ...props,
+    children: textChildren(children)
+  });
+}
 function PanelsideTrigger({
   className,
   label = 'Open navigation panel',
@@ -1245,7 +1501,8 @@ function PanelsideTrigger({
     className: cn('h-10 w-10 items-center justify-center rounded-full', className),
     accessibilityRole: "button",
     accessibilityLabel: label,
-    children: /*#__PURE__*/_jsx(MenuIcon, {
+    children: /*#__PURE__*/_jsx(Glyph, {
+      icon: Menu01Icon,
       size: 20,
       color: color
     })
@@ -1283,6 +1540,7 @@ function PanelsideTrigger({
 function PanelsideSearchTrigger({
   className,
   label = 'Search',
+  variant = 'filled',
   children,
   native = false,
   glass = false,
@@ -1298,7 +1556,8 @@ function PanelsideSearchTrigger({
     onPress?.(event);
     setSearchOpen(true);
   }, [onPress, setSearchOpen]);
-  const glyph = children ?? /*#__PURE__*/_jsx(SearchIcon, {
+  const glyph = children ?? /*#__PURE__*/_jsx(Glyph, {
+    icon: Search01Icon,
     size: 18,
     color: native ? color : undefined
   });
@@ -1316,11 +1575,12 @@ function PanelsideSearchTrigger({
   return /*#__PURE__*/_jsx(AnimatedPressable, {
     ...props,
     onPress: open,
-    className: cn(
-    // Filled rather than outlined. It sits on the panel's own surface with
-    // nothing else on that row, so an outline at this size reads as an
-    // empty circle before it reads as a control.
-    'h-10 w-10 items-center justify-center rounded-full bg-secondary', className),
+    className: cn('h-10 w-10 items-center justify-center rounded-full',
+    // Filled by default. It sits on the panel's own surface with nothing
+    // else on that row, so an outline at this size reads as an empty
+    // circle before it reads as a control — which stops being true the
+    // moment the rest of the screen's controls are outlined as well.
+    variant === 'outline' ? 'border border-border' : 'bg-secondary', className),
     accessibilityRole: "button",
     accessibilityLabel: label,
     children: /*#__PURE__*/_jsx(IconColorProvider, {
@@ -1377,6 +1637,9 @@ function PanelsideSearchSheet({
   keyboardGap = 10,
   showClose = true,
   closeLabel = 'Close search',
+  closeVariant = 'filled',
+  closeNative = false,
+  closeGlass = false,
   children
 }) {
   const {
@@ -1394,7 +1657,20 @@ function PanelsideSearchSheet({
   const open = openProp ?? searchOpen;
   const query = value ?? uncontrolledQuery;
   const activeTab = tab ?? uncontrolledTab;
+
+  /*
+   * Closing takes the keyboard with it, wherever the close came from — the
+   * button, a drag on the sheet, or the system back gesture.
+   *
+   * Leaving it to the field's own blur is too late. The field blurs when
+   * `open` goes false, but the sheet is already on its way out by then: the
+   * styled one unmounts its portal after the exit animation, and the platform
+   * one keeps its content mounted and only stops presenting it. Either way the
+   * blur lands on a field nothing can see, and the keyboard stays up until the
+   * system notices for itself, some seconds later, that nothing is focused.
+   */
   const setOpen = useCallback(next => {
+    if (!next) Keyboard.dismiss();
     if (openProp === undefined) setSearchOpen(next);
     onOpenChange?.(next);
   }, [onOpenChange, openProp, setSearchOpen]);
@@ -1461,12 +1737,25 @@ function PanelsideSearchSheet({
           },
           children: [showClose ? /*#__PURE__*/_jsx(View, {
             className: "flex-row px-4 pb-1",
-            children: /*#__PURE__*/_jsx(AnimatedPressable, {
+            children: closeNative ? /*#__PURE__*/_jsx(Button, {
+              native: true,
+              glass: closeGlass,
+              size: "icon",
+              variant: "ghost",
+              accessibilityLabel: closeLabel,
+              onPress: close,
+              children: /*#__PURE__*/_jsx(Glyph, {
+                icon: Cancel01Icon,
+                size: 17,
+                color: glyph
+              })
+            }) : /*#__PURE__*/_jsx(AnimatedPressable, {
               onPress: close,
               accessibilityRole: "button",
               accessibilityLabel: closeLabel,
-              className: "h-9 w-9 items-center justify-center rounded-full bg-secondary",
-              children: /*#__PURE__*/_jsx(XIcon, {
+              className: cn('h-9 w-9 items-center justify-center rounded-full', closeVariant === 'outline' ? 'border border-border' : 'bg-secondary'),
+              children: /*#__PURE__*/_jsx(Glyph, {
+                icon: Cancel01Icon,
                 size: 17,
                 color: glyph
               })
@@ -1489,6 +1778,8 @@ function PanelsideSearchSheet({
  */
 function PanelsideSearchTabs({
   className,
+  align = 'center',
+  listClassName,
   children
 }) {
   const {
@@ -1502,6 +1793,7 @@ function PanelsideSearchTabs({
     defaultValue: tab,
     className: cn('px-4 pt-1', className),
     children: /*#__PURE__*/_jsx(Tabs.List, {
+      className: cn(align === 'center' && 'justify-center', listClassName),
       children: children
     })
   });
@@ -1512,12 +1804,19 @@ function PanelsideSearchTab({
   icon,
   children
 }) {
-  return /*#__PURE__*/_jsx(Tabs.Trigger, {
-    value: value,
-    icon: icon,
-    className: className,
-    children: children
-  });
+  return (
+    /*#__PURE__*/
+    // A step of padding above the tab row's own. This row is the only control
+    // on a surface that is otherwise a list and a field, and a closed tab here
+    // is a glyph with nothing else to be aimed at by — so it is sized to be
+    // hit rather than to the density a row of labelled tabs can afford.
+    _jsx(Tabs.Trigger, {
+      value: value,
+      icon: icon,
+      className: cn('px-4 py-3', className),
+      children: children
+    })
+  );
 }
 /**
  * The scrolling middle of the search sheet.
@@ -1634,8 +1933,9 @@ function PanelsideSearchField({
     bottomInset: bottomInset,
     className: "w-full px-4 pb-1",
     children: /*#__PURE__*/_jsxs(View, {
-      className: cn('h-12 w-full flex-row items-center gap-2 rounded-full bg-secondary px-4', containerClassName),
-      children: [/*#__PURE__*/_jsx(SearchIcon, {
+      className: cn('h-12 w-full flex-row items-center gap-2 rounded-full border border-border bg-surface px-4 shadow-lg', containerClassName),
+      children: [/*#__PURE__*/_jsx(Glyph, {
+        icon: Search01Icon,
         size: 17,
         color: muted
       }), /*#__PURE__*/_jsx(TextInput, {
@@ -1658,7 +1958,8 @@ function PanelsideSearchField({
         accessibilityRole: "button",
         accessibilityLabel: "Clear search",
         className: "h-5 w-5 items-center justify-center rounded-full bg-muted",
-        children: /*#__PURE__*/_jsx(XIcon, {
+        children: /*#__PURE__*/_jsx(Glyph, {
+          icon: Cancel01Icon,
           size: 12,
           color: muted
         })
@@ -1677,9 +1978,12 @@ PanelsideItemIcon.displayName = 'Panelside.ItemIcon';
 PanelsideItemLabel.displayName = 'Panelside.ItemLabel';
 PanelsideItemBadge.displayName = 'Panelside.ItemBadge';
 PanelsideAction.displayName = 'Panelside.Action';
+PanelsideItemActions.displayName = 'Panelside.ItemActions';
 PanelsideFooter.displayName = 'Panelside.Footer';
 PanelsideCta.displayName = 'Panelside.Cta';
 PanelsideScene.displayName = 'Panelside.Scene';
+PanelsidePages.displayName = 'Panelside.Pages';
+PanelsidePage.displayName = 'Panelside.Page';
 PanelsideTrigger.displayName = 'Panelside.Trigger';
 PanelsideSearchTrigger.displayName = 'Panelside.SearchTrigger';
 PanelsideSearchSheet.displayName = 'Panelside.SearchSheet';
@@ -1700,9 +2004,12 @@ export const Panelside = Object.assign(PanelsideRoot, {
   ItemLabel: PanelsideItemLabel,
   ItemBadge: PanelsideItemBadge,
   Action: PanelsideAction,
+  ItemActions: PanelsideItemActions,
   Footer: PanelsideFooter,
   Cta: PanelsideCta,
   Scene: PanelsideScene,
+  Pages: PanelsidePages,
+  Page: PanelsidePage,
   Trigger: PanelsideTrigger,
   SearchTrigger: PanelsideSearchTrigger,
   SearchSheet: PanelsideSearchSheet,