@multiplatform.one/components 7.79.0 → 7.80.0

package/dist/jsx/layouts/sidebar.mjs

@@ -1,11 +1,28 @@
 import { IconSlot } from "@multiplatform.one/theme";
-import { ensureFocusVisibleRing, ensureKeyboardModalityTracking, getGroupPosition, hairline, hairlineWidth, stackRadiusProps, useResolvedKnobs, wasKeyboardFocus, transitionProps } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, ensureKeyboardModalityTracking, getGroupPosition, hairline, hairlineWidth, normalizeToHex, stackRadiusProps, useResolvedKnobs, wasKeyboardFocus, transitionProps } from "@multiplatform.one/theme";
 import { Fragment, useId, useState } from "react";
-import { Label, Separator, Text as TamaguiText, XStack, YStack, isWeb } from "tamagui";
+import { Label, Separator, Text as TamaguiText, XStack, YStack, isWeb, useTheme, useThemeName } from "tamagui";
 import { ScrollView } from "../ScrollView/index.mjs";
 import { componentColors } from "../componentColors.mjs";
 import { Text } from "../Text.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+const sidebarMaterial = {
+  light: "$color3",
+  dark: "$color4"
+};
+const sidebarMaterialOpacity = 0.72;
+const sidebarRailInset = "$2";
+function useSidebarMaterial(enabled) {
+  const theme = useTheme();
+  const step = useThemeName().startsWith("dark") ? sidebarMaterial.dark : sidebarMaterial.light;
+  if (!enabled) return null;
+  const base = theme[step.slice(1)]?.val;
+  const hex = typeof base === "string" ? normalizeToHex(base) : null;
+  const backgroundColor = hex ? `rgba(${[1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16)).join(", ")}, ${sidebarMaterialOpacity})` : step;
+  return {
+    backgroundColor
+  };
+}
 function Sidebar({
   sections,
   width = 250,
@@ -13,11 +30,15 @@ function Sidebar({
   role = "navigation",
   divider = true,
   footer,
-  testID
+  testID,
+  header,
+  children,
+  material = false
 }) {
   const {
     knobProps
   } = useResolvedKnobs();
+  const materialProps = useSidebarMaterial(material);
   const headingId = useId();
   const rowPad = knobProps.panelPadding.padding;
   const iconColumn = Number(knobProps.controlIcon?.width) || void 0;
@@ -32,6 +53,7 @@ function Sidebar({
     height: "100%",
     minHeight: 0,
     ...knobProps.surface,
+    ...materialProps,
     borderWidth: 0,
     borderColor: "$borderColor",
     ...(!divider ? void 0 : isWeb ? {
@@ -42,13 +64,20 @@ function Sidebar({
       borderEndWidth: hairlineWidth
     }),
     testID,
-    children: [/* @__PURE__ */jsx(ScrollView, {
+    children: [header ? /* @__PURE__ */jsx(YStack, {
+      flexShrink: 0,
+      ...(material ? {
+        paddingHorizontal: sidebarRailInset
+      } : null),
+      "data-sidebar-header": "",
+      children: header
+    }) : null, /* @__PURE__ */jsx(ScrollView, {
       flex: 1,
-      children: /* @__PURE__ */jsx(YStack, {
+      children: /* @__PURE__ */jsxs(YStack, {
         ...knobProps.panelPadding,
-        paddingHorizontal: 0,
+        paddingHorizontal: material ? sidebarRailInset : 0,
         ...knobProps.gapLg,
-        children: sections.map((section, sectionIdx) => {
+        children: [sections.map((section, sectionIdx) => {
           const titleId = section.title ? `${headingId}-${sectionIdx}` : void 0;
           return /* @__PURE__ */jsxs(YStack, {
             role: "group",
@@ -100,7 +129,9 @@ function Sidebar({
               "data-sidebar-group": "",
               children: section.items.map((item, itemIdx, items) => {
                 const position = getGroupPosition(itemIdx, items.length);
-                const corners = stackRadiusProps(position, knobProps.borderRadius.borderRadius);
+                const corners = material ? {
+                  borderRadius: knobProps.borderRadius.borderRadius
+                } : stackRadiusProps(position, knobProps.borderRadius.borderRadius);
                 const itemKey = `${sectionIdx}:${String(item.value ?? item.label)}`;
                 const ink = item.active ? componentColors.selection.ink : componentColors.text.primary;
                 const metaInk = item.active ? componentColors.selection.ink : knobProps.textAccentColor;
@@ -112,7 +143,7 @@ function Sidebar({
                   outlineColor: "$outlineColor"
                 }) : null;
                 return /* @__PURE__ */jsxs(Fragment, {
-                  children: [itemIdx > 0 ? /* @__PURE__ */jsx(YStack, {
+                  children: [itemIdx > 0 && !material ? /* @__PURE__ */jsx(YStack, {
                     alignSelf: "stretch",
                     paddingStart: rowPad,
                     children: /* @__PURE__ */jsx(Separator, {
@@ -229,13 +260,16 @@ function Sidebar({
               })
             })]
           }, section.title ?? sectionIdx);
-        })
+        }), children]
       })
     }), footer != null && footer !== false ? /* @__PURE__ */jsxs(YStack, {
       flexShrink: 1,
       minHeight: 0,
       maxHeight: "50%",
       width: "100%",
+      ...(material ? {
+        paddingHorizontal: sidebarRailInset
+      } : null),
       "data-sidebar-footer": "",
       children: [/* @__PURE__ */jsx(Separator, {
         width: "100%",
@@ -245,5 +279,5 @@ function Sidebar({
     }) : null]
   });
 }
-export { Sidebar };
+export { Sidebar, sidebarMaterial, sidebarMaterialOpacity, sidebarRailInset };
 //# sourceMappingURL=sidebar.mjs.map

package/dist/jsx/layouts/sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["IconSlot","ensureFocusVisibleRing","ensureKeyboardModalityTracking","getGroupPosition","hairline","hairlineWidth","stackRadiusProps","useResolvedKnobs","wasKeyboardFocus","transitionProps","Fragment","useId","useState","Label","Separator","Text","TamaguiText","XStack","YStack","isWeb","ScrollView","componentColors","jsx","jsxs","Sidebar","sections","width","ariaLabel","role","divider","footer","testID","knobProps","headingId","rowPad","panelPadding","padding","iconColumn","Number","controlIcon","kbFocusKey","setKbFocusKey","document","flex","alignSelf","height","minHeight","surface","borderWidth","borderColor","borderInlineEndWidth","borderInlineEndStyle","className","borderEndWidth","children","paddingHorizontal","gapLg","map","section","sectionIdx","titleId","title","gap","action","alignItems","gapSm","minWidth","icon","id","size","sizeToken","body","fontSize","fontWeight","textTransform","color","textAccentColor","lineHeight","content","items","length","emptyText","label","item","itemIdx","position","corners","borderRadius","itemKey","String","value","ink","active","selection","text","primary","metaInk","depth","Math","max","floor","kbFocused","pressable","Boolean","onPress","kbRing","outlineOffset","outlineColor","paddingStart","line","overflow","backgroundColor","background","hoverStyle","hover","pressStyle","press","interactive","cursor","userSelect","motion","control","tabIndex","outlineWidth","focusStyle","focusVisibleStyle","onFocus","onBlur","prev","onKeyDown","e","key","preventDefault","Array","from","_","level","flexShrink","justifyContent","numberOfLines","subTitle","count","trailing","maxHeight"],"sources":["../../../src/layouts/sidebar.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["IconSlot","ensureFocusVisibleRing","ensureKeyboardModalityTracking","getGroupPosition","hairline","hairlineWidth","normalizeToHex","stackRadiusProps","useResolvedKnobs","wasKeyboardFocus","transitionProps","Fragment","useId","useState","Label","Separator","Text","TamaguiText","XStack","YStack","isWeb","useTheme","useThemeName","ScrollView","componentColors","jsx","jsxs","sidebarMaterial","light","dark","sidebarMaterialOpacity","sidebarRailInset","useSidebarMaterial","enabled","theme","step","startsWith","base","slice","val","hex","backgroundColor","map","i","parseInt","join","Sidebar","sections","width","ariaLabel","role","divider","footer","testID","header","children","material","knobProps","materialProps","headingId","rowPad","panelPadding","padding","iconColumn","Number","controlIcon","kbFocusKey","setKbFocusKey","document","flex","alignSelf","height","minHeight","surface","borderWidth","borderColor","borderInlineEndWidth","borderInlineEndStyle","className","borderEndWidth","flexShrink","paddingHorizontal","gapLg","section","sectionIdx","titleId","title","gap","action","alignItems","gapSm","minWidth","icon","id","size","sizeToken","body","fontSize","fontWeight","textTransform","color","textAccentColor","lineHeight","content","items","length","emptyText","label","item","itemIdx","position","corners","borderRadius","itemKey","String","value","ink","active","selection","text","primary","metaInk","depth","Math","max","floor","kbFocused","pressable","Boolean","onPress","kbRing","outlineOffset","outlineColor","paddingStart","line","overflow","background","hoverStyle","hover","pressStyle","press","interactive","cursor","userSelect","motion","control","tabIndex","outlineWidth","focusStyle","focusVisibleStyle","onFocus","onBlur","prev","onKeyDown","e","key","preventDefault","Array","from","_","level","justifyContent","numberOfLines","subTitle","count","trailing","maxHeight"],"sources":["../../../src/layouts/sidebar.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/layouts/sidebar.native.js

@@ -24,7 +24,10 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var sidebar_exports = {};
 __export(sidebar_exports, {
-  Sidebar: () => Sidebar
+  Sidebar: () => Sidebar,
+  sidebarMaterial: () => sidebarMaterial,
+  sidebarMaterialOpacity: () => sidebarMaterialOpacity,
+  sidebarRailInset: () => sidebarRailInset
 });
 module.exports = __toCommonJS(sidebar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -35,6 +38,26 @@ var import_tamagui = require("tamagui");
 var import_ScrollView = require("../ScrollView/index.native.js");
 var import_componentColors = require("../componentColors.native.js");
 var import_Text = require("../Text.native.js");
+var sidebarMaterial = {
+  light: "$color3",
+  dark: "$color4"
+};
+var sidebarMaterialOpacity = 0.72;
+var sidebarRailInset = "$2";
+function useSidebarMaterial(enabled) {
+  var _theme_step_slice;
+  var theme = (0, import_tamagui.useTheme)();
+  var step = (0, import_tamagui.useThemeName)().startsWith("dark") ? sidebarMaterial.dark : sidebarMaterial.light;
+  if (!enabled) return null;
+  var base = (_theme_step_slice = theme[step.slice(1)]) === null || _theme_step_slice === void 0 ? void 0 : _theme_step_slice.val;
+  var hex = typeof base === "string" ? (0, import_theme2.normalizeToHex)(base) : null;
+  var backgroundColor = hex ? `rgba(${[1, 3, 5].map(function (i) {
+    return parseInt(hex.slice(i, i + 2), 16);
+  }).join(", ")}, ${sidebarMaterialOpacity})` : step;
+  return {
+    backgroundColor
+  };
+}
 function Sidebar(param) {
   var {
     sections,
@@ -43,12 +66,16 @@ function Sidebar(param) {
     role = "navigation",
     divider = true,
     footer,
-    testID
+    testID,
+    header,
+    children,
+    material = false
   } = param;
   var _knobProps_controlIcon;
   var {
     knobProps
   } = (0, import_theme2.useResolvedKnobs)();
+  var materialProps = useSidebarMaterial(material);
   var headingId = (0, import_react.useId)();
   var rowPad = knobProps.panelPadding.padding;
   var iconColumn = Number((_knobProps_controlIcon = knobProps.controlIcon) === null || _knobProps_controlIcon === void 0 ? void 0 : _knobProps_controlIcon.width) || void 0;
@@ -65,6 +92,7 @@ function Sidebar(param) {
     // SF-CARD fill without a four-side control border (R-NONE). The end
     // hairline is the panel divider (Axiom 15), stretched to the rail height.
     ...knobProps.surface,
+    ...materialProps,
     borderWidth: 0,
     borderColor: "$borderColor",
     ...(!divider ? void 0 : import_tamagui.isWeb ? {
@@ -75,13 +103,20 @@ function Sidebar(param) {
       borderEndWidth: import_theme2.hairlineWidth
     }),
     testID,
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ScrollView.ScrollView, {
+    children: [header ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      flexShrink: 0,
+      ...(material ? {
+        paddingHorizontal: sidebarRailInset
+      } : null),
+      "data-sidebar-header": "",
+      children: header
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ScrollView.ScrollView, {
       flex: 1,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
         ...knobProps.panelPadding,
-        paddingHorizontal: 0,
+        paddingHorizontal: material ? sidebarRailInset : 0,
         ...knobProps.gapLg,
-        children: sections.map(function (section, sectionIdx) {
+        children: [sections.map(function (section, sectionIdx) {
           var _section_title;
           var titleId = section.title ? `${headingId}-${sectionIdx}` : void 0;
           return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
@@ -137,7 +172,9 @@ function Sidebar(param) {
               children: section.items.map(function (item, itemIdx, items) {
                 var _item_value, _item_depth;
                 var position = (0, import_theme2.getGroupPosition)(itemIdx, items.length);
-                var corners = (0, import_theme2.stackRadiusProps)(position, knobProps.borderRadius.borderRadius);
+                var corners = material ? {
+                  borderRadius: knobProps.borderRadius.borderRadius
+                } : (0, import_theme2.stackRadiusProps)(position, knobProps.borderRadius.borderRadius);
                 var itemKey = `${sectionIdx}:${String((_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : item.label)}`;
                 var ink = item.active ? import_componentColors.componentColors.selection.ink : import_componentColors.componentColors.text.primary;
                 var metaInk = item.active ? import_componentColors.componentColors.selection.ink : knobProps.textAccentColor;
@@ -149,7 +186,7 @@ function Sidebar(param) {
                   outlineColor: "$outlineColor"
                 }) : null;
                 return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.Fragment, {
-                  children: [itemIdx > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+                  children: [itemIdx > 0 && !material ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
                     alignSelf: "stretch",
                     paddingStart: rowPad,
                     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
@@ -271,13 +308,16 @@ function Sidebar(param) {
               })
             })]
           }, (_section_title = section.title) !== null && _section_title !== void 0 ? _section_title : sectionIdx);
-        })
+        }), children]
       })
     }), footer != null && footer !== false ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
       flexShrink: 1,
       minHeight: 0,
       maxHeight: "50%",
       width: "100%",
+      ...(material ? {
+        paddingHorizontal: sidebarRailInset
+      } : null),
       "data-sidebar-footer": "",
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
         width: "100%",

package/dist/jsx/layouts/sidebar.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","sidebar_exports","Sidebar","module","exports","import_jsx_runtime","require","import_theme","import_theme2","import_react","import_tamagui","import_ScrollView","import_componentColors","import_Text","param","sections","width","ariaLabel","role","divider","footer","testID","_knobProps_controlIcon","knobProps","useResolvedKnobs","headingId","useId","rowPad","panelPadding","padding","iconColumn","Number","controlIcon","kbFocusKey","setKbFocusKey","useState","document","ensureKeyboardModalityTracking","jsxs","YStack","flex","alignSelf","height","minHeight","surface","borderWidth","borderColor","isWeb","borderInlineEndWidth","hairlineWidth","borderInlineEndStyle","className","borderEndWidth","children","jsx","ScrollView","paddingHorizontal","gapLg","map","section","sectionIdx","_section_title","titleId","title","gap","action","XStack","alignItems","gapSm","minWidth","icon","Label","id","size","sizeToken","body","fontSize","fontWeight","textTransform","color","textAccentColor","lineHeight","content","items","length","emptyText","Text","label","item","itemIdx","_item_value","_item_depth","position","getGroupPosition","corners","stackRadiusProps","borderRadius","itemKey","String","ink","active","componentColors","selection","text","primary","metaInk","depth","Math","max","floor","kbFocused","pressable","Boolean","onPress","kbRing","ensureFocusVisibleRing","outlineOffset","outlineColor","Fragment","paddingStart","Separator","hairline","line","overflow","backgroundColor","background","hoverStyle","hover","pressStyle","press","interactive","cursor","userSelect","transitionProps","motion","control","tabIndex","outlineWidth","focusStyle","focusVisibleStyle","onFocus","wasKeyboardFocus","onBlur","prev","onKeyDown","e","_item_onPress","preventDefault","Array","_","level","flexShrink"],"sources":["../../../src/layouts/sidebar.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","sidebar_exports","Sidebar","sidebarMaterial","sidebarMaterialOpacity","sidebarRailInset","module","exports","import_jsx_runtime","require","import_theme","import_theme2","import_react","import_tamagui","import_ScrollView","import_componentColors","import_Text","light","dark","useSidebarMaterial","enabled","_theme_step_slice","theme","useTheme","step","useThemeName","startsWith","base","slice","val","hex","normalizeToHex","backgroundColor","map","i","parseInt","join","param","sections","width","ariaLabel","role","divider","footer","testID","header","children","material","_knobProps_controlIcon","knobProps","useResolvedKnobs","materialProps","headingId","useId","rowPad","panelPadding","padding","iconColumn","Number","controlIcon","kbFocusKey","setKbFocusKey","useState","document","ensureKeyboardModalityTracking","jsxs","YStack","flex","alignSelf","height","minHeight","surface","borderWidth","borderColor","isWeb","borderInlineEndWidth","hairlineWidth","borderInlineEndStyle","className","borderEndWidth","jsx","flexShrink","paddingHorizontal","ScrollView","gapLg","section","sectionIdx","_section_title","titleId","title","gap","action","XStack","alignItems","gapSm","minWidth","icon","Label","id","size","sizeToken","body","fontSize","fontWeight","textTransform","color","textAccentColor","lineHeight","content","items","length","emptyText","Text","label","item","itemIdx","_item_value","_item_depth","position","getGroupPosition","corners","borderRadius","stackRadiusProps","itemKey","String","ink","active","componentColors","selection","text","primary","metaInk","depth","Math","max","floor","kbFocused","pressable","Boolean","onPress","kbRing","ensureFocusVisibleRing","outlineOffset","outlineColor","Fragment","paddingStart","Separator","hairline","line","overflow","background","hoverStyle","hover","pressStyle","press","interactive","cursor","userSelect","transitionProps","motion","control","tabIndex","outlineWidth","focusStyle","focusVisibleStyle","onFocus","wasKeyboardFocus","onBlur","prev","onKeyDown","e","_item_onPress","preventDefault","Array","_","level","IconSlot","justifyContent"],"sources":["../../../src/layouts/sidebar.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/components",
-  "version": "7.79.0",
+  "version": "7.80.0",
   "description": "multiplatform.one ui components",
   "keywords": [
     "components",
@@ -58,11 +58,11 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@multiplatform.one/forms": "^7.79.0",
-    "@multiplatform.one/i18n": "^7.79.0",
-    "@multiplatform.one/platform": "^7.79.0",
-    "@multiplatform.one/router": "^7.79.0",
-    "@multiplatform.one/theme": "^7.79.0",
+    "@multiplatform.one/forms": "^7.80.0",
+    "@multiplatform.one/i18n": "^7.80.0",
+    "@multiplatform.one/platform": "^7.80.0",
+    "@multiplatform.one/router": "^7.80.0",
+    "@multiplatform.one/theme": "^7.80.0",
     "@phosphor-icons/react": "^2.1.10",
     "@shopify/flash-list": "^2.3.1",
     "@tamagui/colors": "2.7.6",
@@ -89,9 +89,9 @@
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.79.0",
-    "@multiplatform.one/storybook": "7.79.0",
-    "@multiplatform.one/test-utils": "7.79.0",
+    "@multiplatform.one/config": "7.80.0",
+    "@multiplatform.one/storybook": "7.80.0",
+    "@multiplatform.one/test-utils": "7.80.0",
     "@tamagui/build": "2.7.6",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",

package/src/appShell/AppShell.spec.tsx

@@ -0,0 +1,259 @@
+/**
+ * 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();
+  });
+});
+
+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();
+  });
+});