@multiplatform.one/components 7.79.0 → 7.81.0

package/src/ContextMenu/index.tsx

@@ -22,11 +22,11 @@ import { IconSlot } from "@multiplatform.one/theme";
  * Sheet at ≤640 via FloatingPanel's overlay family pivot.
  */
 
+import { MenuCheckColumn } from "../CheckGlyph/MenuCheckColumn";
 import {
   transitionProps,
   hairline,
   keyboardFocusRingProps,
-  useMenuRowCheckInk,
   menuRowChecked,
   menuRowFrame,
   useResolvedKnobs,
@@ -49,7 +49,6 @@ import {
   type RefObject,
 } from "react";
 
-import { CheckIcon } from "@phosphor-icons/react";
 import { FloatingPanel } from "@multiplatform.one/forms";
 import type { GetProps, TamaguiElement } from "tamagui";
 import {
@@ -257,16 +256,15 @@ function ContextMenuRoot({
         contentPadding="none"
         triggerSizing={triggerSizing}
         {...freeOverlay}
-        // LC-112 (FZ-8480 Round 37): a bar button's menu opens ON the button
-        // at every width and draws the button again in place as an X, so
-        // pressing the button's spot closes the menu.
+        // LC-112 (FZ-8665 Round 45): a bar button's menu opens ON the button
+        // at every width, and its rows start at its top edge.
         {...(anchor === "trigger"
           ? {
               compactFace: "menu" as const,
               anchorMode: "cover-trigger" as const,
               coverAlign: "auto" as const,
               triggerEcho: false,
-              iconEcho: "menu" as const,
+              iconCover: true,
             }
           : null)}
       >
@@ -618,7 +616,6 @@ export interface ContextMenuCheckboxItemProps extends Omit<ContextMenuItemProps,
 
 const ContextMenuCheckboxItem = forwardRef<TamaguiElement, ContextMenuCheckboxItemProps>(
   function ContextMenuCheckboxItem({ checked, onCheckedChange, onSelect, ...props }, ref) {
-    const checkInk = useMenuRowCheckInk();
     return (
       <ContextMenuItemBody
         ref={ref}
@@ -630,21 +627,7 @@ const ContextMenuCheckboxItem = forwardRef<TamaguiElement, ContextMenuCheckboxIt
           onCheckedChange?.(!checked);
           onSelect?.();
         }}
-        trailing={
-          <View
-            width={18}
-            flexShrink={0}
-            alignItems="center"
-            justifyContent="center"
-            opacity={checked ? 1 : 0}
-            data-mp-check="trailing"
-            {...(isWeb && checkInk
-              ? ({ style: { color: checkInk } } as Record<string, unknown>)
-              : {})}
-          >
-            <IconSlot icon={<CheckIcon size={14} weight="bold" color={checkInk} />} />
-          </View>
-        }
+        trailing={<MenuCheckColumn checked={checked} iconRow={props.icon != null} />}
         {...props}
       />
     );

package/src/DropdownMenu/DropdownMenu.avatarTrigger.spec.tsx

@@ -1,9 +1,8 @@
 /**
  * FZ-8220, LC-112, LC-262: an avatar trigger is an icon trigger. The account
  * menu opens on it (FZ-8438) with no text echo row, the avatar alone or inside
- * the press boxes an app wraps around it, and draws the avatar again in its
- * own spot as an X in the avatar's circle, where a press closes the menu
- * (FZ-8480 Round 37).
+ * the press boxes an app wraps around it. It covers the avatar and repeats
+ * nothing: no X, and the rows start at the panel's top edge (FZ-8665 Round 45).
  */
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { waitFor } from "@testing-library/react";
@@ -62,7 +61,7 @@ describe("DropdownMenu avatar trigger (FZ-8220)", () => {
     expect(identity?.textContent).toContain("clayrisser@gmail.com");
   });
 
-  it("draws the avatar again in place as an X at phone width, a menu and not a sheet (FZ-8480)", async () => {
+  it("covers the avatar at phone width, a menu and not a sheet, with no X (FZ-8665)", async () => {
     const width = window.innerWidth;
     Object.defineProperty(window, "innerWidth", { configurable: true, writable: true, value: 390 });
     try {
@@ -81,11 +80,9 @@ describe("DropdownMenu avatar trigger (FZ-8220)", () => {
         expect(found?.querySelector('[role="menu"]')).toBeTruthy();
         return found as HTMLElement;
       });
-      const echo = panel.querySelector<HTMLElement>('[data-testid="floating-panel-icon-echo"]');
-      expect(echo?.getAttribute("aria-label")).toBe("Close");
-      // The avatar turns into an X: no initials, an X glyph.
-      expect(echo?.textContent).toBe("");
-      expect(echo?.querySelector("svg")).toBeTruthy();
+      expect(panel.querySelector('[aria-label="Close"]')).toBeNull();
+      // The avatar's initials stay on the page, under the panel.
+      expect(panel.textContent).not.toContain("CR");
     } finally {
       Object.defineProperty(window, "innerWidth", {
         configurable: true,

package/src/DropdownMenu/index.tsx

@@ -21,12 +21,12 @@ import { IconSlot } from "@multiplatform.one/theme";
  * `onCheckedChange` and `onSelect`.
  */
 
+import { MenuCheckColumn } from "../CheckGlyph/MenuCheckColumn";
 import {
   transitionProps,
   Surface,
   hairline,
   keyboardFocusRingProps,
-  useMenuRowCheckInk,
   menuRowChecked,
   menuRowFrame,
   useResolvedKnobs,
@@ -53,7 +53,6 @@ import {
   type RefObject,
 } from "react";
 
-import { CheckIcon } from "@phosphor-icons/react";
 import { FloatingPanel, type PanelWidth } from "@multiplatform.one/forms";
 import type { GetProps, SizeTokens, TamaguiElement } from "tamagui";
 import {
@@ -457,9 +456,9 @@ function DropdownMenuRoot({
           anchorMode={resolvedAnchorMode}
           triggerEcho={!iconTrigger}
           coverAlign={iconTrigger ? "auto" : "start"}
-          // LC-112 (FZ-8480 Round 37): the menu covers its button and draws
-          // it again in place as an X that closes the menu.
-          iconEcho={iconTrigger ? "menu" : undefined}
+          // LC-112 (FZ-8665 Round 45): the menu covers its button, and its
+          // rows start at its top edge.
+          iconCover={iconTrigger}
           triggerRow={triggerRow}
           contentPadding="none"
           triggerSizing={triggerSizing}
@@ -906,7 +905,6 @@ export interface DropdownMenuCheckboxItemProps extends Omit<DropdownMenuItemProp
 
 const DropdownMenuCheckboxItem = forwardRef<TamaguiElement, DropdownMenuCheckboxItemProps>(
   function DropdownMenuCheckboxItem({ checked, onCheckedChange, onSelect, ...props }, ref) {
-    const checkInk = useMenuRowCheckInk();
     return (
       <DropdownMenuItemBody
         ref={ref}
@@ -918,18 +916,7 @@ const DropdownMenuCheckboxItem = forwardRef<TamaguiElement, DropdownMenuCheckbox
           onCheckedChange?.(!checked);
           onSelect?.();
         }}
-        trailing={
-          <View
-            width={18}
-            flexShrink={0}
-            alignItems="center"
-            justifyContent="center"
-            opacity={checked ? 1 : 0}
-            data-mp-check="trailing"
-          >
-            <IconSlot icon={<CheckIcon size={14} weight="bold" color={checkInk} />} />
-          </View>
-        }
+        trailing={<MenuCheckColumn checked={checked} iconRow={props.icon != null} />}
         {...props}
       />
     );

package/src/Popover.coverTrigger.spec.tsx

@@ -97,7 +97,7 @@ describe("Popover cover-trigger adapter", () => {
     fireEvent.click(result.getByRole("button", { name: "Apply filters" }));
     await waitFor(() => expect(result.queryByTestId("floating-panel-viewport")).toBeNull());
   });
-  it("an icon trigger's panel covers the button and draws it again as an X that closes it (FZ-8480)", async () => {
+  it("an icon trigger's panel covers the button with no X, a press outside closing it (FZ-8665)", async () => {
     const result = renderWithProviders(
       <Popover anchorMode="cover-trigger">
         <Popover.Trigger asChild>
@@ -112,8 +112,8 @@ describe("Popover cover-trigger adapter", () => {
     const panel = await result.findByTestId("floating-panel-viewport");
     expect(within(panel).queryByRole("button", { name: "Add node" })).toBeNull();
     expect(panel.querySelector("[data-fp-trigger-row]")).toBeNull();
-    const close = within(panel).getByRole("button", { name: "Close" });
-    fireEvent.click(close);
+    expect(within(panel).queryByRole("button", { name: "Close" })).toBeNull();
+    fireEvent.click(document.body);
     await waitFor(() => expect(result.queryByTestId("floating-panel-viewport")).toBeNull());
   });
 });

package/src/Popover.tsx

@@ -143,9 +143,9 @@ const CoverPopover = forwardRef<Popover, PopoverProps>(function CoverPopover(
     }
   }, [content.length, unsupportedContent]);
   const trigger = triggerPart?.props.children ?? triggerRow;
-  // LC-112 (FZ-8480): a glyph trigger (the "+") is covered by its panel and
-  // drawn again in its spot as an X that closes it, the iOS + to X morph. The
-  // panel stays a panel at phone width, sized by its content.
+  // LC-112 (FZ-8665): a glyph trigger (the "+") is covered by its panel, and a
+  // press outside closes it. The panel stays a panel at phone width, sized by
+  // its content.
   const iconTrigger = triggerRow == null && isIconTrigger(trigger);
   const decorated = isValidElement(trigger)
     ? cloneElement(trigger as ReactElement<Record<string, unknown>>, {
@@ -168,7 +168,7 @@ const CoverPopover = forwardRef<Popover, PopoverProps>(function CoverPopover(
         {...(iconTrigger
           ? {
               triggerEcho: false,
-              iconEcho: "close" as const,
+              iconCover: true,
               coverAlign: "auto" as const,
               compactFace: "menu" as const,
               widthMode: "fit-content" as const,
@@ -220,7 +220,7 @@ export const Popover = withStaticProperties(PopoverRoot, {
   Trigger: TamaguiPopover.Trigger,
   Content: StackedPopoverContent,
   Close: PopoverClose,
-  /** A panel's title row; over a + panel it shares the X's line (LC-112). */
+  /** A panel's title row, on the panel's padding (LC-112). */
   Header: PanelHeader,
   Anchor: TamaguiPopover.Anchor,
   Adapt: TamaguiPopover.Adapt,

package/src/SchemeToggle/SchemeToggle.spec.tsx

@@ -1,4 +1,4 @@
-import { CircleHalfIcon, MoonIcon, SunIcon, XIcon } from "@phosphor-icons/react";
+import { CircleHalfIcon, MoonIcon, SunIcon } from "@phosphor-icons/react";
 import { fireEvent, render, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
@@ -43,7 +43,7 @@ describe("SchemeToggle (FZ-8158)", () => {
     expect(set).toHaveBeenCalledWith("system");
   });
 
-  it("opens its menu on the button and draws the button again in place as an X, a press there closing it (FZ-8480)", async () => {
+  it("opens its menu on the button with no X, a press outside closing it (FZ-8665)", async () => {
     const { useUserScheme } = preference("dark", "dark");
     const { getByRole } = renderWithProviders(<SchemeToggle useUserScheme={useUserScheme} />);
     const live = getByRole("button", { name: "Appearance: Dark" });
@@ -53,15 +53,9 @@ describe("SchemeToggle (FZ-8158)", () => {
       expect(found?.querySelector('[role="menu"]')).toBeTruthy();
       return found as HTMLElement;
     });
-    const echo = panel.querySelector<HTMLElement>('[data-testid="floating-panel-icon-echo"]');
-    expect(echo?.getAttribute("aria-label")).toBe("Close");
-    const pathOf = (node: ParentNode | null | undefined) =>
-      node?.querySelector("svg path")?.getAttribute("d");
-    const x = render(<XIcon weight="bold" />);
-    expect(pathOf(echo)).toBe(pathOf(x.container));
-    expect(pathOf(echo)).not.toBe(pathOf(live));
-    x.unmount();
-    fireEvent.click(echo as HTMLElement);
+    expect(panel.querySelector('[aria-label="Close"]')).toBeNull();
+    expect(panel.querySelector(`[aria-label="${live.getAttribute("aria-label")}"]`)).toBeNull();
+    fireEvent.click(document.body);
     await waitFor(() => expect(document.querySelector('[role="menu"]')).toBeFalsy());
   });
 

package/src/SchemeToggle/SchemeToggle.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { XStack } from "tamagui";
+import { SchemeToggle } from "./index";
+
+const meta: Meta<typeof SchemeToggle> = {
+  title: "Components/SchemeToggle",
+  component: SchemeToggle,
+  parameters: { status: { type: "beta" } },
+};
+
+export default meta;
+type Story = StoryObj<typeof SchemeToggle>;
+
+/** A tap flips light and dark; a right-click (long-press on native) opens System, Light and Dark. */
+export const Default: Story = {
+  render: () => (
+    <XStack padding="$4" justifyContent="flex-end">
+      <SchemeToggle />
+    </XStack>
+  ),
+};

package/src/SchemeToggle/index.tsx

@@ -1,6 +1,7 @@
 import { CircleHalfIcon, MoonIcon, SunIcon } from "@phosphor-icons/react";
 import { IconButton, type IconButtonProps } from "@multiplatform.one/forms";
 import {
+  menuRowIconGlyph,
   useSchemePreference,
   type SchemePreference,
   type ThemeScheme,
@@ -60,7 +61,7 @@ export function SchemeToggle({
         const Glyph = schemeGlyphs[value];
         return {
           label: name(value),
-          icon: <Glyph size={18} weight="bold" />,
+          icon: <Glyph size={menuRowIconGlyph.size} weight={menuRowIconGlyph.weight} />,
           checked: scheme.setting === value,
           onSelect: () => scheme.set(value),
         };

package/src/SheetModal/index.native.tsx

@@ -28,6 +28,7 @@ import {
   useResolvedKnobs,
   type MotionStop,
   nativeAnimationConfig as animationConfig,
+  overlayScrim,
 } from "@multiplatform.one/theme";
 import {
   useCallback,
@@ -424,7 +425,7 @@ export function SheetModal({
             accessibilityRole="button"
             accessibilityLabel={t("Close")}
           >
-            <View flex={1} backgroundColor="$shadow6" />
+            <View flex={1} backgroundColor={overlayScrim} />
           </Pressable>
           <Animated.View
             onLayout={(e) => {

package/src/SheetModal/index.tsx

@@ -9,7 +9,7 @@
  * on device). Dismissal: overlay tap / snap-to-bottom / Escape (LC-21).
  */
 
-import { transitionProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import { overlayScrim, transitionProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import { OverlayStackProvider, useOverlayZIndex } from "@multiplatform.one/forms";
 import { useEffect, useId, useRef, type ReactNode } from "react";
 import { isWeb, Sheet, View, useWindowDimensions } from "tamagui";
@@ -128,7 +128,7 @@ export function SheetModal({
       portalProps={{ zIndex: sheetZIndex }}
     >
       <Sheet.Overlay
-        backgroundColor="$shadow6"
+        backgroundColor={overlayScrim}
         {...transitionProps(knobProps.motion.scrim)}
         enterStyle={{ opacity: 0 }}
         exitStyle={{ opacity: 0 }}
@@ -160,6 +160,9 @@ export function SheetModal({
           : null)}
         borderBottomLeftRadius={0}
         borderBottomRightRadius={0}
+        borderLeftWidth={0}
+        borderRightWidth={0}
+        borderBottomWidth={0}
         overflow="hidden"
         {...frameRingReset}
       >

package/src/TreeSelect/index.tsx

@@ -11,11 +11,11 @@ import {
   panelViewportPadding,
   useOverlayZIndex,
 } from "@multiplatform.one/forms";
+import { CheckGlyph } from "../CheckGlyph";
 import {
   CaretDownIcon,
   CaretLeftIcon,
   CaretRightIcon,
-  CheckIcon,
   FileIcon,
   FolderIcon,
   FolderOpenIcon,
@@ -27,7 +27,6 @@ import {
   ensureKeyboardModalityTracking,
   keyboardFocusRingProps,
   listHeightForRows,
-  useMenuRowCheckInk,
   menuRowChecked,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
@@ -110,7 +109,6 @@ function TreeSelectRows({
 }) {
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
-  const checkInk = useMenuRowCheckInk();
   const checkedFill = menuRowChecked(knobProps.scheme);
   const nestedPx = knobProps.nestedControl.px;
   const indentStep = 16;
@@ -271,7 +269,7 @@ function TreeSelectRows({
             ) : null}
             {isSelected ? (
               <View flexShrink={0} width={14} height={14}>
-                <CheckIcon size={14} weight="bold" color={checkInk} />
+                <CheckGlyph />
               </View>
             ) : null}
           </XStack>

package/src/appShell/AppShell.spec.tsx

@@ -0,0 +1,289 @@
+/**
+ * FZ-7996 (LC-175 MPO-ONLY-REUSE): one composed app frame. An app passes its
+ * destinations and the path; the shell picks the phone or the split layout,
+ * selects the destination, draws back on a pushed route and steps aside for a
+ * route that mounts its own chrome or a page that pins its own top bar.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { HouseIcon, LightningIcon, SparkleIcon } from "@phosphor-icons/react";
+import { act, cleanup, fireEvent, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  CONTENT_MAX_WIDTH,
+  PageHeader,
+  READABLE_MAX_WIDTH,
+  Screen,
+  ScreenToolbar,
+} from "../layouts/page";
+import { ListPageLayout } from "../layouts/PageTemplates";
+import { AppShell, appShellRoute, type AppShellDestination } from "./AppShell";
+
+const size = vi.hoisted(() => ({ value: "compact" as string }));
+vi.mock("@multiplatform.one/theme", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/theme")>()),
+  useLayoutSizeClass: () => size.value,
+}));
+
+afterEach(() => {
+  cleanup();
+  size.value = "compact";
+});
+
+const destinations: AppShellDestination[] = [
+  { key: "/", label: "Home", icon: HouseIcon },
+  { key: "/pokemon", label: "Pokemon", icon: SparkleIcon },
+  { key: "/moves", label: "Moves", icon: LightningIcon, placement: "more" },
+];
+
+function shell(path: string, props: Partial<Parameters<typeof AppShell>[0]> = {}) {
+  const onNavigate = vi.fn();
+  const onBack = vi.fn();
+  const view = renderWithProviders(
+    <AppShell
+      destinations={destinations}
+      path={path}
+      onNavigate={onNavigate}
+      onBack={onBack}
+      title="multiplatform.one"
+      logo={<span data-testid="logo" />}
+      actions={<button type="button">Theme</button>}
+      ownChrome={["/desk"]}
+      {...props}
+    >
+      {props.children ?? <span data-testid="page">page</span>}
+    </AppShell>,
+  );
+  return { ...view, onNavigate, onBack };
+}
+
+describe("appShellRoute", () => {
+  it("selects the longest destination the path sits under", () => {
+    expect(appShellRoute(destinations, "/")).toMatchObject({ pushed: false });
+    expect(appShellRoute(destinations, "/").destination?.key).toBe("/");
+    expect(appShellRoute(destinations, "/pokemon").destination?.key).toBe("/pokemon");
+    expect(appShellRoute(destinations, "/pokemon/").pushed).toBe(false);
+    const detail = appShellRoute(destinations, "/pokemon/pikachu");
+    expect(detail.destination?.key).toBe("/pokemon");
+    expect(detail.pushed).toBe(true);
+  });
+
+  it("matches no destination outside them, and '/' only exactly", () => {
+    expect(appShellRoute(destinations, "/todos").destination).toBeUndefined();
+    expect(appShellRoute(destinations, "/pokemonx").destination).toBeUndefined();
+  });
+});
+
+describe("AppShell on a phone", () => {
+  it("draws the nav bar, the content and the tab bar of the tab destinations", () => {
+    shell("/pokemon");
+    expect(screen.getByTestId("app-shell").getAttribute("data-size")).toBe("compact");
+    expect(screen.getByTestId("app-shell-bar")).toBeTruthy();
+    expect(screen.getByTestId("page")).toBeTruthy();
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs.map((tab) => tab.getAttribute("aria-label"))).toEqual(["Home", "Pokemon"]);
+    expect(tabs[1]!.getAttribute("aria-selected")).toBe("true");
+    expect(screen.queryByTestId("app-shell-sidebar")).toBeNull();
+  });
+
+  it("navigates from a tab", () => {
+    const { onNavigate } = shell("/pokemon");
+    fireEvent.click(screen.getAllByRole("tab")[0]!);
+    expect(onNavigate).toHaveBeenCalledWith("/");
+  });
+
+  it("puts the more destinations in the bar's pull-down", () => {
+    shell("/");
+    expect(screen.getByTestId("app-shell-more")).toBeTruthy();
+  });
+
+  it("draws the pull-down trigger as the bar's icon action, a bare accent glyph (LC-176)", () => {
+    shell("/");
+    expect(
+      screen
+        .getByTestId("app-shell-more")
+        .closest("[data-top-bar-control]")
+        ?.getAttribute("data-top-bar-control"),
+    ).toBe("action");
+  });
+
+  it("leads with the app's mark at a tab root and a tinted back on a pushed route", () => {
+    shell("/pokemon");
+    expect(screen.getByTestId("app-shell-home").getAttribute("aria-label")).toBe(
+      "multiplatform.one",
+    );
+    cleanup();
+    const { onBack } = shell("/pokemon/pikachu");
+    const back = document.querySelector("[data-top-bar-control='back']") as HTMLElement;
+    expect(back.textContent).toContain("Pokemon");
+    fireEvent.click(back);
+    expect(onBack).toHaveBeenCalledWith("/pokemon");
+    expect(screen.getAllByRole("tab")[1]!.getAttribute("aria-selected")).toBe("true");
+  });
+
+  it("shows the destination as the inline title when the page has no large title", () => {
+    shell("/pokemon");
+    const title = screen.getByTestId("app-shell-bar-title");
+    expect(title.textContent).toBe("Pokemon");
+    expect(title.getAttribute("aria-hidden")).toBe("false");
+  });
+
+  it("keeps the page's large title out of the bar until it scrolls away", () => {
+    shell("/pokemon", {
+      children: (
+        <Screen>
+          <PageHeader title="All Pokemon" />
+        </Screen>
+      ),
+    });
+    const title = screen.getByTestId("app-shell-bar-title");
+    expect(title.textContent).toBe("All Pokemon");
+    expect(title.getAttribute("aria-hidden")).toBe("true");
+  });
+
+  it("steps aside for a page that pins its own top bar", () => {
+    shell("/pokemon/pikachu", {
+      children: (
+        <Screen topBar={<ScreenToolbar leading={<span>own back</span>} />}>
+          <span>record</span>
+        </Screen>
+      ),
+    });
+    expect(screen.queryByTestId("app-shell-bar")).toBeNull();
+    expect(screen.getByText("own back")).toBeTruthy();
+    expect(screen.getAllByRole("tab")).toHaveLength(2);
+  });
+
+  it("draws no tab bar outside the tab destinations", () => {
+    shell("/todos");
+    expect(screen.queryByRole("tablist")).toBeNull();
+    expect(screen.getByTestId("app-shell-bar")).toBeTruthy();
+  });
+
+  it("hands the bottom accessory to the tab bar, which floats it above its row (LC-174)", () => {
+    shell("/pokemon", { accessory: <span data-testid="pager">pager</span> });
+    const accessory = screen.getByTestId("tab-bar-accessory");
+    expect(accessory.contains(screen.getByTestId("pager"))).toBe(true);
+    expect(screen.getByTestId("tab-bar").contains(accessory)).toBe(true);
+    const tablist = screen.getByRole("tablist");
+    expect(accessory.compareDocumentPosition(tablist) & Node.DOCUMENT_POSITION_FOLLOWING).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+  });
+
+  it("still hosts the accessory on a pushed route, where no tab bar shows", () => {
+    shell("/todos", { accessory: <span data-testid="pager">pager</span> });
+    expect(screen.queryByRole("tablist")).toBeNull();
+    const frame = screen.getByTestId("app-shell-content").parentElement;
+    expect(frame?.contains(screen.getByTestId("pager"))).toBe(true);
+  });
+
+  it("draws nothing around a route that mounts its own chrome", () => {
+    shell("/desk/Pokemon");
+    expect(screen.getByTestId("app-shell").getAttribute("data-chrome")).toBe("own");
+    expect(screen.queryByTestId("app-shell-bar")).toBeNull();
+    expect(screen.queryByRole("tablist")).toBeNull();
+    expect(screen.getByTestId("page")).toBeTruthy();
+  });
+
+  it("keeps the tab bar around an own-chrome route that is a tab, and on a route below it", () => {
+    const withDesk = [...destinations, { key: "/desk", label: "Desk", icon: HouseIcon }];
+    for (const path of ["/desk", "/desk/Pokemon"]) {
+      const { onNavigate } = shell(path, { destinations: withDesk });
+      expect(screen.getByTestId("app-shell").getAttribute("data-chrome")).toBe("own");
+      expect(screen.queryByTestId("app-shell-bar")).toBeNull();
+      const tabs = screen.getAllByRole("tab");
+      expect(tabs.map((tab) => tab.getAttribute("aria-label"))).toEqual([
+        "Home",
+        "Pokemon",
+        "Desk",
+      ]);
+      expect(tabs[2]!.getAttribute("aria-selected")).toBe("true");
+      fireEvent.click(tabs[0]!);
+      expect(onNavigate).toHaveBeenCalledWith("/");
+      expect(screen.getByTestId("page")).toBeTruthy();
+      cleanup();
+    }
+  });
+
+  it("draws no tab bar around an own-chrome route at regular width", () => {
+    size.value = "expanded";
+    shell("/desk", {
+      destinations: [...destinations, { key: "/desk", label: "Desk", icon: HouseIcon }],
+    });
+    expect(screen.getByTestId("app-shell").getAttribute("data-chrome")).toBe("own");
+    expect(screen.queryByRole("tablist")).toBeNull();
+    expect(screen.queryByTestId("app-shell-sidebar")).toBeNull();
+  });
+});
+
+describe("AppShell at regular width", () => {
+  it("lists every destination in the sidebar, under the app's name, and no tab bar", () => {
+    size.value = "expanded";
+    const { onNavigate } = shell("/pokemon/pikachu");
+    expect(screen.getByTestId("app-shell").getAttribute("data-size")).toBe("regular");
+    const sidebar = screen.getByTestId("app-shell-sidebar");
+    expect(sidebar.textContent).toContain("multiplatform.one");
+    const rows = sidebar.querySelectorAll("[data-sidebar-row]");
+    expect([...rows].map((row) => row.textContent)).toEqual(["Home", "Pokemon", "Moves"]);
+    expect(rows[1]!.getAttribute("aria-current")).toBe("page");
+    fireEvent.click(rows[2]!);
+    expect(onNavigate).toHaveBeenCalledWith("/moves");
+    expect(screen.queryByRole("tablist")).toBeNull();
+    expect(screen.queryByTestId("app-shell-more")).toBeNull();
+  });
+
+  it("puts the app's actions at the sidebar's foot and draws no bar on a destination root", () => {
+    size.value = "expanded";
+    shell("/pokemon");
+    const actions = screen.getByTestId("app-shell-sidebar-actions");
+    expect(actions.textContent).toContain("Theme");
+    expect(screen.getByTestId("app-shell-sidebar").contains(actions)).toBe(true);
+    expect(screen.queryByTestId("app-shell-bar")).toBeNull();
+  });
+
+  it("draws the bar with the tinted back on a pushed route, without the actions", () => {
+    size.value = "expanded";
+    const { onBack } = shell("/pokemon/pikachu");
+    const bar = screen.getByTestId("app-shell-bar");
+    expect(bar.textContent).toContain("Pokemon");
+    expect(bar.textContent).not.toContain("Theme");
+    fireEvent.click(bar.querySelector('[data-top-bar-control="back"]') as HTMLElement);
+    expect(onBack).toHaveBeenCalledWith("/pokemon");
+  });
+
+  it("centres the content in the readable column", () => {
+    size.value = "expanded";
+    shell("/pokemon");
+    const readable = screen.getByTestId("app-shell-readable");
+    expect(screen.getByTestId("app-shell-content").contains(readable)).toBe(true);
+    expect(readable.contains(screen.getByTestId("page"))).toBe(true);
+    expect(READABLE_MAX_WIDTH).toBeLessThan(CONTENT_MAX_WIDTH);
+  });
+
+  it("puts the app's name in the sidebar's pinned header", () => {
+    size.value = "expanded";
+    shell("/pokemon");
+    const header = screen
+      .getByTestId("app-shell-sidebar")
+      .querySelector("[data-sidebar-header]") as HTMLElement;
+    expect(header.textContent).toContain("multiplatform.one");
+  });
+
+  it("stacks a page's panel under the sidebar's rows (LC-101)", async () => {
+    size.value = "expanded";
+    await act(async () => {
+      shell("/pokemon", {
+        children: (
+          <ListPageLayout title="Pokemon" sidebar={<span>filters</span>} sidebarLabel="Filters">
+            <span>grid</span>
+          </ListPageLayout>
+        ),
+      });
+    });
+    const panel = screen.getByTestId("app-shell-page-panel");
+    expect(panel.textContent).toContain("Filters");
+    expect(panel.textContent).toContain("filters");
+    expect(screen.getByTestId("app-shell-sidebar").contains(panel)).toBe(true);
+    expect(screen.queryByTestId("list-page-sidebar")).toBeNull();
+  });
+});