@micha.bigler/ui-core-micha 2.33.0 → 2.33.1

package/WORK_ORDERS.md

@@ -60,3 +60,4 @@ prefixed ID; never reuse a bare flat number across workstreams.
 | AUTH-3 | SignUpPage showed the access-code-specific success message for every signup mode | Operator-observed live bug 2026-08-07: open self-registration (no access code) showed "Falls der Zugangscode für dieses Projekt gültig ist, wurde ein Einladungslink an X gesendet" — nonsensical when there is no code at all. Root cause: `SignUpPage.jsx`'s `handleSubmit` hardcoded `Auth.INVITE_REQUEST_SUCCESS` for every mode (open/access-code/email-domain/QR) regardless of the backend's actual response. | 2026-08-07 | done | 599e73d, b4e1fe7 | No WO file — operator-reported bug, fixed directly, same convention as MSG-6c/MSG-6d/MSG-6j. Tier 2 (shared-core). **Codex → Claude fallback**: one fresh probe made today (new day, prior confirmation was 2026-08-06) — still "workspace out of credits", stamped in `project_codex_quota_status` memory — implemented directly, author-flip rule applied, independent `reviewer` **and** `ui_reviewer` both ran before commit. **Root cause confirmed against the actual backend** (`django-core-micha` `register_request` view + `validate_access_code_or_error`): every signup mode's success response already carries a mode-agnostic, accurate `code: "Auth.INVITE_SENT"`; an invalid access code is never silently accepted, it raises a distinct 400 (`Auth.ACCESS_CODE_INVALID_OR_INACTIVE`) — so the old key's "if valid…" ambiguity never matched backend reality for any mode, not just the ones reported. Fix: `setSuccessKey(res?.code || 'Auth.INVITE_SENT')`, using the backend's own code; no component/app change beyond this. **Both reviewers independently flagged the same P3**: switching away from the old key silently dropped the `{{email}}` confirmation (`Auth.INVITE_SENT` had none). Fixed before commit — extended `Auth.INVITE_SENT`'s text to include `{{email}}` in all 4 locales (safe: it had exactly one consumer, this call site, confirmed by grep). `Auth.INVITE_REQUEST_SUCCESS` is now dead/orphaned (both reviewers flagged as P3, tracked here, not removed — out of this fix's scope). Gate: `tests/SignUpPage.test.jsx` 13/13 (3 new, proving the backend code wins over the old hardcoded key, and the no-code fallback); full suite 342/342, `tsc` clean. |
 | SHELL-2 | AccountPage: from a horizontal tab strip to a grouped sidebar + mobile drawer | Measured live at 375 px on 2026-08-08 (running cockpit, host header neutralised so the numbers describe ucm alone): `AccountPage` does **not** break the layout -- all six sections render at document width 375. What fails is discoverability and the users table. The tab strip scroller is 343 px visible against 589 px of content with `overflow-x: auto`, 246 px of travel, and **`scrollButtons: 0`** -- Support and any consumer-injected section sit off screen with no arrow, no fade, no hint they exist (they do respond to a horizontal swipe, so this is a discoverability failure, not a reachability one -- unlike cockpit's own header tabs, which are `width: 0px` + `overflow: hidden` and genuinely unreachable). The users table renders 1045 px inside a 341 px `MuiTableContainer`; one third is visible and the `Aktionen` column sits ~700 px to the right. Adopts jg-ferien's `EventInfoPage` pattern (`SectionSwitcher.jsx`, driven from `EventInfoPage.jsx:1126-1159`) in **both** halves -- sticky grouped 280 px sidebar at `md`+, bottom drawer below `md` -- plus an in-page trigger bar, which the reference does not supply because jg's trigger lives in that app's own page header and `AccountPage` has none. | 2026-08-08 | blocked | | **Held back 2026-08-08 — reshaped into DS-11** (see `webapp-management/DESIGN_SYSTEM_PROGRAM.md`): do NOT implement this WO as written; the Envelope will be revised (open: keep the SHELL-2 ID or mint a new SHELL-* ID). Known corrections for the revision: publishing is version-gated, not per-push (this row's "publishes immediately" is imprecise), and the grouped-shell part becomes an inheritable ucm component with `AccountPage` as first consumer. Envelope: [work-orders/SHELL-2.md](work-orders/SHELL-2.md). Prototype: [work-orders/assets/SHELL-2-account-navigation.html](work-orders/assets/SHELL-2-account-navigation.html). Tier 2 (shared core) -- independent `reviewer` (Sonnet, full) **and** `ui_reviewer` concurrently, both mandatory before commit. **Operator decisions, settled 2026-08-08 and not to be renegotiated by implementer or reviewer:** both halves of the pattern, so the horizontal tab strip disappears **on desktop too** (asked explicitly, chosen deliberately, in full knowledge that 14 consumers inherit the desktop change on their next pin bump); fixed groups `Mein Konto` / `Verwaltung` / `Hilfe` / `Weitere`, with `extraTabs` gaining an **optional** `group` field, additive and backward compatible; no standalone "Uebersicht" entry above the groups (jg-ferien has one, `AccountPage` has no overview screen for it to point at, so none is invented); users table becomes a card list below `md` and stays a table at `md`+; the mobile trigger bar is the **sole** carrier of the current section name, so the section heading below it is **removed**, not merely undrawn -- desktop keeps its heading because it has no trigger bar. **Two contracts that must survive and are currently untested:** the `?tab=` URL contract incl. fallback to `profile` on an unknown *or* unpermitted value (`AccountPage.jsx:60`, `:180-186`) -- cockpit's `/user-management`, `/profile` and `/change-password` redirects all hang off it -- and the full `extraTabs` shape (`:146-155`), whose `label` may be a **function** and which supports `visible(context)`. `AccountPage` and `UserListComponent` have **zero tests today** (none of the 20 files under `tests/` touches either), so both test files are new, not extensions. **No staging net:** this repo has no `develop`; a push to `main` touching `src/**` or `package.json` publishes to npm immediately via `publish.yml`, so the independent review is the only gate and is not back-fillable. Version target `2.30.0` (minor -- `extraTabs` gains a public field; additive API is a minor under semver). Explicit non-goals: pagination/filtering for the user list, the sections' internal content, the six auth pages (measured clean at 375 px), and **cockpit's header** -- that toolbar is what inflates the document to 498 px on every route including `/account`, and it is a separate WO in the cockpit repo, sequenced after this one at the operator's choice. Carried-over trap from the reference: jg-ferien uses `env(safe-area-inset-bottom)` while its `index.html` omits `viewport-fit=cover`, so those insets resolve to zero there -- copy the padding, do not assume it does anything. |
 | SHELL-3 | Promote the mobile bottom navigation into the shared kit | Promotes jg-ferien's `MobileBottomNav` into ucm, shaped from **two** real cases (jg's existing bar + cockpit's destinations) as DS-6 required rather than from jg alone. Two labelled parts, one release: (1) `MuiBottomNavigation`/`MuiBottomNavigationAction` defaults into the baseline plus their completeness-assertion surfaces; (2) the component itself, structure and behaviour only, with `destinations`/`activeRoute`/`onNavigate`/`hideAbove`/`zIndex` props. Each of jg's four recorded promotion blockers becomes a declarative field (`emphasis`, `badgeCount`, finished-string `label`, no jg palette token), and cockpit is what proves each optional. Full spec: [work-orders/SHELL-3.md](work-orders/SHELL-3.md). | 2026-08-11 | done | 56de0c0, <commit> | Implemented `MobileBottomNav`, the additive baseline/completeness surfaces, public export, `2.33.0` version bump, and a five-item/two-badge harness specimen. **Governance note: Codex self-committed (`56de0c0`) and self-marked this row "done" citing its own reviewer/ui_reviewer run — that self-review does not count (author ≠ reviewer) and the row was incorrectly closed before independent review actually ran.** Corrected here: the Orchestrator independently re-ran the scoped tests (22/22 green) and `tsc` (clean), then spawned genuinely independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) concurrently against the real diff. **`ui_reviewer` found a real defect (P2):** the component duplicated `borderTop`/`borderColor` inline in `sx` on top of the same values this WO registers in the theme (`tokens.js`/`createAppTheme.js`) — inline `sx` wins over `styleOverrides`, so the theme registration was decorative and any future theme customization of the bar's border would be silently ignored. Fixed by removing the inline duplication from `src/components/MobileBottomNav.jsx`; re-verified 22/22 green, `tsc` clean. **`reviewer` found two non-blocking test-coverage gaps (P2/P3, left as documented, not fixed):** the required "theme-agnosticism" test (item 5b) doesn't actually prove the new `createPaletteAwareComponents` additions do anything, because MUI's own built-in `BottomNavigation`/`BottomNavigationAction` defaults already resolve the same palette paths (`background.paper`/`text.secondary`/`primary.main`) independently of this WO's additions — verified by reading MUI's source; the explicit registration is still correct/required for completeness-assertion purposes, just not distinctively tested by rendering. The `emphasis` treatment's computed colours (raised icon, `background.paper` vs jg's `background.white`) have no dedicated assertion. **Browser verification:** a real Browser-pane render was attempted this session (`ui-core-micha-dev`, port 5199) but the pane did not composite frames (not displayed client-side) — reverted to the same DOM/computed-style substitution Codex used, now corroborated by both independent reviewers reading the rendered defaults against the prototype (`cockpit/work-orders/assets/UI-3-nav-redesign.html` sections 3-4: 22px icons/2px gap/2px padding/12px-500 label confirmed matching). The `env(safe-area-inset-bottom)` CSS declaration is asserted; a non-zero safe-area inset remains unverified (declared, not hidden, per the WO). Precondition of `cockpit/UI-3` and `jg-ferien/NAV-36`. |
+| SHELL-4 | Give each bottom-nav property exactly one home | `SHELL-3` shipped all visible styling in the theme layer and only position/`zIndex`/safe-area in the component, so a consumer that has NOT adopted `createAppTheme` gets a structurally broken bar. Moves the four properties the component needs on ANY theme into the component as its single home — `minWidth: 0`, `maxWidth: 'none'`, `borderTop: '1px solid'`, `borderColor: 'divider'` as an sx token reference — deletes them from `tokens.js`/`createAppTheme.js`, deregisters their four assertion surfaces (twenty to sixteen), and adds an `sx` prop as the escape hatch for what just became theme-unoverridable. Full spec: [work-orders/SHELL-4.md](work-orders/SHELL-4.md). | 2026-08-11 | done | this commit | Implemented the four-property layer move, narrowed completeness inventory, `sx` escape hatch, dual-theme harness specimen, and `2.33.1` patch bump. **Independent `reviewer` + `ui_reviewer` ran concurrently before commit.** `ui_reviewer`: NO FINDINGS. `reviewer` found one P2: object-spreading `sx` dropped standard MUI callback/array forms; fixed by flattening the caller value after the component defaults in an MUI `sx` array, with regression coverage for object, callback, and array precedence. Re-verified: 30/30 scoped tests green; `tsc -p tsconfig.build.json --noEmit` clean. **Rendered verification substitution:** no in-app or external browser instance was attached, so real 375px/1280px screenshots could not be obtained. Per the WO fallback, DOM/computed-style inspection under plain `createTheme()` at 375px with five actions confirmed `border-top-width: 1px`, `min-width: 0px`, `max-width: none`, and `flex-grow: 1`; the dual-theme harness specimen remains available for a later real-browser comparison. **Precondition of `jg-ferien/NAV-36`, which is `blocked` on it.** Root cause retained: `SHELL-3`'s `ui_reviewer` correctly found the component shadowing its own new theme defaults, and the fix (`586ac9c`) resolved the duplication by deleting the wrong copy — the defect was the duplication, not the location. The component/theme key-intersection test now mechanically guards that regression class, and a deregistered-surface exemption is asserted to remain harmless. |

package/dev/entries.jsx

@@ -31,6 +31,7 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 import { AuthContext } from '../src/auth/AuthContext';
 import { MobileBottomNav } from '../src/components/MobileBottomNav';
@@ -74,6 +75,8 @@ const MOBILE_NAV_DESTINATIONS = [
   { route: '/more', label: 'Mehr', icon: MoreHorizIcon, emphasis: true },
 ];
 
+const PLAIN_MOBILE_NAV_THEME = createTheme();
+
 function MobileBottomNavEntry() {
   const [activeRoute, setActiveRoute] = useState('/triage');
 
@@ -81,14 +84,33 @@ function MobileBottomNavEntry() {
     <Box sx={{ minHeight: 180 }}>
       <Typography variant="h6">Mobile bottom navigation</Typography>
       <Typography color="text.secondary">
-        Five destinations, two badges, and one emphasised action. This specimen follows the real
-        browser viewport: resize below 900px to show the bar and to 900px or wider to hide it.
+        The baseline and plain-MUI variants use the same five destinations. Both keep their edge
+        and evenly divided actions; their label and icon density may differ.
       </Typography>
-      <MobileBottomNav
-        destinations={MOBILE_NAV_DESTINATIONS}
-        activeRoute={activeRoute}
-        onNavigate={setActiveRoute}
-      />
+      <Stack direction={{ xs: 'column', lg: 'row' }} spacing={2} sx={{ mt: 2 }}>
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Typography variant="subtitle2">createAppTheme baseline</Typography>
+          <MobileBottomNav
+            destinations={MOBILE_NAV_DESTINATIONS}
+            activeRoute={activeRoute}
+            onNavigate={setActiveRoute}
+            hideAbove="xl"
+            sx={{ position: 'relative', width: '100%', mt: 1 }}
+          />
+        </Box>
+        <ThemeProvider theme={PLAIN_MOBILE_NAV_THEME}>
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Typography variant="subtitle2">Plain createTheme</Typography>
+            <MobileBottomNav
+              destinations={MOBILE_NAV_DESTINATIONS}
+              activeRoute={activeRoute}
+              onNavigate={setActiveRoute}
+              hideAbove="xl"
+              sx={{ position: 'relative', width: '100%', mt: 1 }}
+            />
+          </Box>
+        </ThemeProvider>
+      </Stack>
     </Box>
   );
 }

package/dist/components/MobileBottomNav.js

@@ -5,19 +5,29 @@ import BottomNavigationAction from '@mui/material/BottomNavigationAction';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 const defaultZIndex = (theme) => theme.zIndex.drawer + 2;
-export function MobileBottomNav({ destinations, activeRoute, onNavigate, hideAbove = 'md', zIndex = defaultZIndex, }) {
+export const MOBILE_BOTTOM_NAV_ROOT_SX = {
+    position: 'fixed',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderTop: '1px solid',
+    borderColor: 'divider',
+    paddingBottom: 'env(safe-area-inset-bottom)',
+};
+export const MOBILE_BOTTOM_NAV_ACTION_SX = {
+    minWidth: 0,
+    maxWidth: 'none',
+};
+export function MobileBottomNav({ destinations, activeRoute, onNavigate, hideAbove = 'md', zIndex = defaultZIndex, sx = {}, }) {
     const theme = useTheme();
     const isHidden = useMediaQuery(theme.breakpoints.up(hideAbove));
+    const callerSx = Array.isArray(sx) ? sx : [sx];
     if (isHidden)
         return null;
-    return (_jsx(BottomNavigation, { value: activeRoute, onChange: (_, route) => onNavigate(route), showLabels: true, sx: {
-            position: 'fixed',
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex,
-            paddingBottom: 'env(safe-area-inset-bottom)',
-        }, children: destinations.map((destination) => {
+    return (_jsx(BottomNavigation, { value: activeRoute, onChange: (_, route) => onNavigate(route), showLabels: true, sx: [
+            Object.assign(Object.assign({}, MOBILE_BOTTOM_NAV_ROOT_SX), { zIndex }),
+            ...callerSx,
+        ], children: destinations.map((destination) => {
             var _a;
             const Icon = destination.icon;
             const selected = activeRoute === destination.route;
@@ -29,6 +39,6 @@ export function MobileBottomNav({ destinations, activeRoute, onNavigate, hideAbo
                     boxShadow: 'none',
                     transform: 'translateY(-4px)',
                 } : undefined }));
-            return (_jsx(BottomNavigationAction, { value: destination.route, label: (_a = destination.shortLabel) !== null && _a !== void 0 ? _a : destination.label, "aria-label": destination.shortLabel != null ? destination.label : undefined, "aria-current": selected ? 'page' : undefined, icon: destination.badgeCount ? (_jsx(Badge, { badgeContent: destination.badgeCount, color: "error", max: 99, children: icon })) : icon }, destination.route));
+            return (_jsx(BottomNavigationAction, { value: destination.route, label: (_a = destination.shortLabel) !== null && _a !== void 0 ? _a : destination.label, "aria-label": destination.shortLabel != null ? destination.label : undefined, "aria-current": selected ? 'page' : undefined, sx: MOBILE_BOTTOM_NAV_ACTION_SX, icon: destination.badgeCount ? (_jsx(Badge, { badgeContent: destination.badgeCount, color: "error", max: 99, children: icon })) : icon }, destination.route));
         }) }));
 }

package/dist/theme/createAppTheme.js

@@ -104,7 +104,6 @@ function createPaletteAwareComponents(palette) {
             styleOverrides: {
                 root: {
                     backgroundColor: palette.background.paper,
-                    borderColor: palette.divider,
                 },
             },
         },

package/dist/theme/themeCompleteness.js

@@ -72,12 +72,8 @@ const COMPONENT_SURFACES = [
         var _a, _b, _c, _d, _e, _f;
         return (_f = (_e = (_d = (_c = (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiChip) === null || _b === void 0 ? void 0 : _b.styleOverrides) === null || _c === void 0 ? void 0 : _c.root) === null || _d === void 0 ? void 0 : _d['@media (any-pointer: coarse)']) === null || _e === void 0 ? void 0 : _e['&::after']) === null || _f === void 0 ? void 0 : _f.inset;
     }),
-    componentPath('MuiBottomNavigation', 'styleOverrides.root.borderTop'),
     componentPath('MuiBottomNavigation', 'styleOverrides.root.boxShadow'),
     componentPath('MuiBottomNavigation', 'styleOverrides.root.backgroundColor'),
-    componentPath('MuiBottomNavigation', 'styleOverrides.root.borderColor'),
-    componentPath('MuiBottomNavigationAction', 'styleOverrides.root.minWidth'),
-    componentPath('MuiBottomNavigationAction', 'styleOverrides.root.maxWidth'),
     componentPath('MuiBottomNavigationAction', 'styleOverrides.root.padding'),
     componentPath('MuiBottomNavigationAction', 'styleOverrides.root.gap'),
     componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.root', '& .MuiSvgIcon-root', 'width'),

package/dist/theme/tokens.js

@@ -262,14 +262,12 @@ export const BASELINE_STATIC = {
         },
         MuiBottomNavigation: {
             styleOverrides: {
-                root: { borderTop: '1px solid', boxShadow: 'none' },
+                root: { boxShadow: 'none' },
             },
         },
         MuiBottomNavigationAction: {
             styleOverrides: {
                 root: {
-                    minWidth: 0,
-                    maxWidth: 'none',
                     padding: '0 2px',
                     gap: '2px',
                     '& .MuiSvgIcon-root': { width: '22px', height: '22px' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.33.0",
+  "version": "2.33.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/components/MobileBottomNav.jsx

@@ -6,15 +6,32 @@ import { useTheme } from '@mui/material/styles';
 
 const defaultZIndex = (theme) => theme.zIndex.drawer + 2;
 
+export const MOBILE_BOTTOM_NAV_ROOT_SX = {
+  position: 'fixed',
+  left: 0,
+  right: 0,
+  bottom: 0,
+  borderTop: '1px solid',
+  borderColor: 'divider',
+  paddingBottom: 'env(safe-area-inset-bottom)',
+};
+
+export const MOBILE_BOTTOM_NAV_ACTION_SX = {
+  minWidth: 0,
+  maxWidth: 'none',
+};
+
 export function MobileBottomNav({
   destinations,
   activeRoute,
   onNavigate,
   hideAbove = 'md',
   zIndex = defaultZIndex,
+  sx = {},
 }) {
   const theme = useTheme();
   const isHidden = useMediaQuery(theme.breakpoints.up(hideAbove));
+  const callerSx = Array.isArray(sx) ? sx : [sx];
 
   if (isHidden) return null;
 
@@ -23,14 +40,10 @@ export function MobileBottomNav({
       value={activeRoute}
       onChange={(_, route) => onNavigate(route)}
       showLabels
-      sx={{
-        position: 'fixed',
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex,
-        paddingBottom: 'env(safe-area-inset-bottom)',
-      }}
+      sx={[
+        { ...MOBILE_BOTTOM_NAV_ROOT_SX, zIndex },
+        ...callerSx,
+      ]}
     >
       {destinations.map((destination) => {
         const Icon = destination.icon;
@@ -55,6 +68,7 @@ export function MobileBottomNav({
             label={destination.shortLabel ?? destination.label}
             aria-label={destination.shortLabel != null ? destination.label : undefined}
             aria-current={selected ? 'page' : undefined}
+            sx={MOBILE_BOTTOM_NAV_ACTION_SX}
             icon={destination.badgeCount ? (
               <Badge badgeContent={destination.badgeCount} color="error" max={99}>
                 {icon}

package/src/theme/createAppTheme.js

@@ -120,7 +120,6 @@ function createPaletteAwareComponents(palette) {
       styleOverrides: {
         root: {
           backgroundColor: palette.background.paper,
-          borderColor: palette.divider,
         },
       },
     },

package/src/theme/themeCompleteness.js

@@ -96,12 +96,8 @@ const COMPONENT_SURFACES = [
     (theme) => theme.components?.MuiChip?.styleOverrides?.root
       ?.['@media (any-pointer: coarse)']?.['&::after']?.inset,
   ),
-  componentPath('MuiBottomNavigation', 'styleOverrides.root.borderTop'),
   componentPath('MuiBottomNavigation', 'styleOverrides.root.boxShadow'),
   componentPath('MuiBottomNavigation', 'styleOverrides.root.backgroundColor'),
-  componentPath('MuiBottomNavigation', 'styleOverrides.root.borderColor'),
-  componentPath('MuiBottomNavigationAction', 'styleOverrides.root.minWidth'),
-  componentPath('MuiBottomNavigationAction', 'styleOverrides.root.maxWidth'),
   componentPath('MuiBottomNavigationAction', 'styleOverrides.root.padding'),
   componentPath('MuiBottomNavigationAction', 'styleOverrides.root.gap'),
   componentKeyLeaf('MuiBottomNavigationAction', 'styleOverrides.root', '& .MuiSvgIcon-root', 'width'),

package/src/theme/tokens.js

@@ -308,14 +308,12 @@ export const BASELINE_STATIC = {
     },
     MuiBottomNavigation: {
       styleOverrides: {
-        root: { borderTop: '1px solid', boxShadow: 'none' },
+        root: { boxShadow: 'none' },
       },
     },
     MuiBottomNavigationAction: {
       styleOverrides: {
         root: {
-          minWidth: 0,
-          maxWidth: 'none',
           padding: '0 2px',
           gap: '2px',
           '& .MuiSvgIcon-root': { width: '22px', height: '22px' },

package/tests/MobileBottomNav.test.jsx

@@ -4,7 +4,11 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
-import { MobileBottomNav } from '../src/components/MobileBottomNav';
+import {
+  MOBILE_BOTTOM_NAV_ACTION_SX,
+  MOBILE_BOTTOM_NAV_ROOT_SX,
+  MobileBottomNav,
+} from '../src/components/MobileBottomNav';
 import { createAppTheme } from '../src/theme/createAppTheme';
 
 const theme = createAppTheme({ palette: { primary: { main: '#0F62FE' } } });
@@ -179,6 +183,101 @@ describe('MobileBottomNav', () => {
     });
   });
 
+  it('keeps its structural edge and evenly divided actions under a plain MUI theme', () => {
+    const fiveDestinations = [
+      ...destinations,
+      { route: '/fourth', label: 'Fourth', icon: Icon },
+      { route: '/fifth', label: 'Fifth', icon: Icon },
+    ];
+    setViewportWidth(375);
+    const { container } = render(
+      <ThemeProvider theme={createTheme()}>
+        <MobileBottomNav
+          destinations={fiveDestinations}
+          activeRoute="/first"
+          onNavigate={vi.fn()}
+        />
+      </ThemeProvider>,
+    );
+    const navStyle = getComputedStyle(container.firstElementChild);
+    const actionStyles = screen.getAllByRole('button').map((action) => getComputedStyle(action));
+
+    expect(navStyle.borderTopWidth).toBe('1px');
+    expect(navStyle.borderTopStyle).toBe('solid');
+    expect(actionStyles).toHaveLength(5);
+    actionStyles.forEach((actionStyle) => {
+      expect(actionStyle.minWidth).toBe('0px');
+      expect(actionStyle.maxWidth).toBe('none');
+      expect(actionStyle.flexGrow).toBe('1');
+    });
+  });
+
+  it('keeps component-owned sx keys out of baseline theme overrides', () => {
+    const componentSurfaces = [
+      ...Object.keys(MOBILE_BOTTOM_NAV_ROOT_SX)
+        .map((key) => `MuiBottomNavigation.${key}`),
+      ...Object.keys(MOBILE_BOTTOM_NAV_ACTION_SX)
+        .map((key) => `MuiBottomNavigationAction.${key}`),
+    ];
+    const themeSurfaces = [
+      ...Object.keys(theme.components.MuiBottomNavigation.styleOverrides.root)
+        .map((key) => `MuiBottomNavigation.${key}`),
+      ...Object.keys(theme.components.MuiBottomNavigationAction.styleOverrides.root)
+        .map((key) => `MuiBottomNavigationAction.${key}`),
+    ];
+
+    expect(componentSurfaces.filter((surface) => themeSurfaces.includes(surface))).toEqual([]);
+  });
+
+  it.each([
+    ['object', {
+      position: 'absolute',
+      borderTop: '3px dashed',
+      borderColor: 'primary.main',
+    }],
+    ['callback', (currentTheme) => ({
+      position: 'absolute',
+      borderTop: '3px dashed',
+      borderColor: currentTheme.palette.primary.main,
+    })],
+    ['array', [
+      { borderTop: '2px dotted' },
+      {
+        position: 'absolute',
+        borderTop: '3px dashed',
+        borderColor: 'primary.main',
+      },
+    ]],
+  ])('lets caller %s sx override the component defaults', (_kind, sx) => {
+    const { container } = renderNav({
+      sx,
+    });
+    const navStyle = getComputedStyle(container.firstElementChild);
+
+    expect(navStyle.position).toBe('absolute');
+    expect(navStyle.borderTopWidth).toBe('3px');
+    expect(navStyle.borderTopStyle).toBe('dashed');
+    expect(navStyle.borderTopColor).toBe('rgb(15, 98, 254)');
+  });
+
+  it('preserves baseline density and label styling after the structural values move', () => {
+    renderNav();
+    const [selectedAction] = screen.getAllByRole('button');
+    const actionStyle = getComputedStyle(selectedAction);
+    const labelStyle = getComputedStyle(
+      selectedAction.querySelector('.MuiBottomNavigationAction-label'),
+    );
+
+    expect(actionStyle.minWidth).toBe('0px');
+    expect(actionStyle.maxWidth).toBe('none');
+    expect(actionStyle.paddingLeft).toBe('2px');
+    expect(actionStyle.paddingRight).toBe('2px');
+    expect(actionStyle.gap).toBe('2px');
+    expect(labelStyle.fontSize).toBe('12px');
+    expect(labelStyle.fontWeight).toBe('500');
+    expect(labelStyle.lineHeight).toBe('1.2');
+  });
+
   it('renders nothing at and above hideAbove', () => {
     setMediaQueryMatches((query) => query === '(min-width:900px)');
     const { container } = renderNav();
@@ -195,7 +294,7 @@ describe('MobileBottomNav', () => {
     expect(nav.classList.contains('MuiBottomNavigation-root')).toBe(true);
     // jsdom drops env() declarations while parsing CSS, so assert the sx
     // declaration before browser CSS parsing instead of a computed inset.
-    expect(MobileBottomNav.toString()).toContain('env(safe-area-inset-bottom)');
+    expect(MOBILE_BOTTOM_NAV_ROOT_SX.paddingBottom).toBe('env(safe-area-inset-bottom)');
   });
 
   it('renders the five-item, two-badge specimen at 375px and nothing at 1280px', () => {

package/tests/createAppTheme.test.js

@@ -1,7 +1,7 @@
 import { createTheme } from '@mui/material/styles';
 import { describe, expect, it } from 'vitest';
 
-import { assertThemeComplete, createAppTheme } from '../src/index';
+import { assertThemeComplete, createAppTheme } from '../src/theme';
 import { BASELINE_STATIC } from '../src/theme/tokens';
 
 describe('createAppTheme', () => {
@@ -23,12 +23,16 @@ describe('createAppTheme', () => {
       '&.Mui-selected': { fontSize: '12px' },
     });
     expect(theme.components.MuiBottomNavigationAction.styleOverrides.root).toMatchObject({
-      minWidth: 0,
-      maxWidth: 'none',
       padding: '0 2px',
       gap: '2px',
       '& .MuiSvgIcon-root': { width: '22px', height: '22px' },
     });
+    expect(theme.components.MuiBottomNavigation.styleOverrides.root).not.toHaveProperty('borderTop');
+    expect(theme.components.MuiBottomNavigation.styleOverrides.root).not.toHaveProperty('borderColor');
+    expect(theme.components.MuiBottomNavigationAction.styleOverrides.root)
+      .not.toHaveProperty('minWidth');
+    expect(theme.components.MuiBottomNavigationAction.styleOverrides.root)
+      .not.toHaveProperty('maxWidth');
     expect(theme.palette.dataSeries.categorical).toHaveLength(6);
     expect(theme.palette.primary.light).not.toBe(createTheme().palette.primary.light);
     // MUI's createTheme(options, ...args) only augments the FIRST argument's

package/tests/themeCompleteness.test.js

@@ -5,7 +5,8 @@ import {
   assertThemeComplete,
   calculateContrastRatio,
   createAppTheme,
-} from '../src/index';
+  THEME_COMPLETENESS_SURFACES,
+} from '../src/theme';
 
 describe('theme completeness', () => {
   it('finds untouched MUI surfaces and accepts createAppTheme', () => {
@@ -20,12 +21,8 @@ describe('theme completeness', () => {
       .map(({ surface }) => surface))
       .toContain('components.MuiButton.styleOverrides.root.minHeight');
     expect(bare.findings.map(({ surface }) => surface)).toEqual(expect.arrayContaining([
-      'components.MuiBottomNavigation.styleOverrides.root.borderTop',
       'components.MuiBottomNavigation.styleOverrides.root.boxShadow',
       'components.MuiBottomNavigation.styleOverrides.root.backgroundColor',
-      'components.MuiBottomNavigation.styleOverrides.root.borderColor',
-      'components.MuiBottomNavigationAction.styleOverrides.root.minWidth',
-      'components.MuiBottomNavigationAction.styleOverrides.root.maxWidth',
       'components.MuiBottomNavigationAction.styleOverrides.root.padding',
       'components.MuiBottomNavigationAction.styleOverrides.root.gap',
       'components.MuiBottomNavigationAction.styleOverrides.root.& .MuiSvgIcon-root.width',
@@ -44,6 +41,34 @@ describe('theme completeness', () => {
     expect(baseline.findings).toEqual([]);
   });
 
+  it('keeps the narrowed bottom-navigation inventory complete', () => {
+    const bottomNavigationSurfaces = THEME_COMPLETENESS_SURFACES
+      .map(({ surface }) => surface)
+      .filter((surface) => surface.startsWith('components.MuiBottomNavigation'));
+
+    expect(bottomNavigationSurfaces).toHaveLength(16);
+    [
+      'components.MuiBottomNavigation.styleOverrides.root.borderTop',
+      'components.MuiBottomNavigation.styleOverrides.root.borderColor',
+      'components.MuiBottomNavigationAction.styleOverrides.root.minWidth',
+      'components.MuiBottomNavigationAction.styleOverrides.root.maxWidth',
+    ].forEach((surface) => expect(bottomNavigationSurfaces).not.toContain(surface));
+  });
+
+  it('ignores a valid exemption for a deregistered surface', () => {
+    const result = assertThemeComplete(
+      createAppTheme({ palette: { primary: { main: '#0F62FE' } } }),
+      {
+        exemptions: [{
+          surface: 'components.MuiBottomNavigation.styleOverrides.root.borderTop',
+          reason: 'Legacy exemption retained while the application upgrades.',
+        }],
+      },
+    );
+
+    expect(result.findings).toEqual([]);
+  });
+
   it('suppresses exactly one surface when an exemption includes a reason', () => {
     const theme = createTheme();
     const before = assertThemeComplete(theme).findings;

package/work-orders/SHELL-4.md

@@ -0,0 +1,351 @@
+# SHELL-4 — Give each bottom-nav property exactly one home
+
+**Target repo:** `ui-core-micha` (branch `main` — this repo has no `develop`)
+**Tier:** 3 (shared core)
+**Review:** independent `reviewer` **and** `ui_reviewer` — spawned concurrently, both mandatory before commit
+**Version target:** `2.33.1` — patch. See "Why patch" below.
+**Precondition of:** `jg-ferien/NAV-36`, which is `blocked` on this
+**Follows:** `SHELL-3` (`2.33.0`) and its fix `586ac9c`
+
+---
+
+## A. Envelope
+
+### Goal
+
+`SHELL-3` shipped `MobileBottomNav` with **all** visible styling in the theme layer and only
+position, `zIndex` and safe-area padding in the component. For an app that has adopted
+`createAppTheme` that is correct and renders as specified. For an app that has **not**, the bar
+arrives structurally broken — and jg-ferien, the migration consumer the promotion exists for, is
+exactly that app.
+
+Fix the layer split so the component works on any theme, without reintroducing the shadowing bug
+that `586ac9c` removed.
+
+### How this happened, because the reasoning matters more than the diff
+
+`SHELL-3`'s `ui_reviewer` found the component duplicating `borderTop` and `borderColor` inline in
+`sx` — the same properties the same work order had just registered as theme defaults. Inline `sx`
+beats `styleOverrides`, so the new defaults were inert. The fix removed the component's copies.
+
+**That resolved the duplication by deleting the wrong copy.** The defect was the *duplication*, not
+the *location*. For a property a component needs in order to function on an arbitrary theme, the
+component is the correct home — and the fix moved exactly those into a layer that only baseline apps
+have.
+
+### What a non-baseline consumer loses today
+
+Read against MUI's installed source, not assumed. Every item below currently lives **only** in the
+baseline theme:
+
+| Property | MUI's default | Consequence |
+|---|---|---|
+| `MuiBottomNavigationAction` `minWidth: 0` | **`minWidth: 80`** | **layout break** — see below |
+| `maxWidth: 'none'` | `maxWidth: 168` | actions cannot fill a wide bar |
+| `MuiBottomNavigation` `borderTop: '1px solid'` | MUI sets **no border** | the bar has no top edge |
+| `borderColor: palette.divider` | — | same |
+| label `fontSize: '12px'` + the `&.Mui-selected` pin | `12px`, **`14px` when selected** | the label jumps on tap |
+| label `fontWeight: 500` | unset | thinner |
+| label `lineHeight: 1.2` | unset | taller label row |
+| action `padding: '0 2px'`, `gap: '2px'` | MUI's own | looser density |
+| icon `22px` | MUI's `24px` | slightly larger icons |
+
+`backgroundColor` and the action/selected colours are **not** losses — MUI sets equivalents itself.
+
+**The first row is not cosmetic.** jg has five destinations: `5 × 80 = 400px` against a 375 px
+viewport, and `min-width` overrides `flex-shrink`, so the container overflows. jg's current code sets
+`minWidth: 0` explicitly for exactly this reason. **Computed from MUI's source, not rendered** —
+confirm it in the rendered check rather than trusting the arithmetic.
+
+### The rule to apply
+
+**Each property gets exactly one home, chosen by who needs it:**
+
+- **The component owns what keeps it functional on any theme.** These are deliberately *not*
+  theme-overridable, and that is a feature: overriding them breaks the bar.
+- **The theme owns what makes it look like this estate.** These stay overridable per app, which is
+  what makes the component design-agnostic.
+
+**And the distinction that was missed the first time:** a **token reference** in the component's `sx`
+(`borderColor: 'divider'`) is not the same thing as a hex literal and not the same thing as a
+duplicate. It resolves against *whatever* theme is mounted — every app still gets its own divider
+colour — while a duplicate of a theme default silently shadows it. Reference without duplication is
+the correct pattern; "contains no hex values" is the wrong test for it.
+
+### Scope
+
+**Move into the component, and delete from `tokens.js`:**
+
+- `MuiBottomNavigationAction`: `minWidth: 0`, `maxWidth: 'none'`
+- `MuiBottomNavigation`: `borderTop: '1px solid'`, and `borderColor: 'divider'` as an `sx` token
+  reference (delete `borderColor: palette.divider` from `createAppTheme.js`'s palette-aware block)
+
+**Leave in the theme, unchanged:** the label `fontSize` / `fontWeight` / `lineHeight` and its
+selected pin, the action and selected `color`, `backgroundColor`, `boxShadow: 'none'`, `padding`,
+`gap`, and the icon size. A bar with MUI's density and 24 px icons still works; a bar with
+`minWidth: 80` does not.
+
+**Deregister the four moved surfaces** from `themeCompleteness.js`:
+`components.MuiBottomNavigation.styleOverrides.root.borderTop`, `…root.borderColor`,
+`components.MuiBottomNavigationAction.styleOverrides.root.minWidth`, `…root.maxWidth`. Six of the ten
+`SHELL-3` surfaces remain. **This cannot turn any app red**: the assertion validates that each
+declared exemption names a surface and a reason, and then ignores exemptions that match no
+registered surface — verified in `themeCompleteness.js`, not assumed.
+
+**Add an `sx` prop to the component**, merged **after** its own defaults. This is the honest
+mitigation for the properties that just became theme-unoverridable: a call site that genuinely needs
+a different edge can still get one, without the theme layer being the escape route.
+
+### Non-goals / do not touch
+
+- **No new props beyond `sx`.** `destinations`, `activeRoute`, `onNavigate`, `hideAbove`, `zIndex`
+  and the destination field shape stay exactly as `SHELL-3` shipped them.
+- **No visual change for baseline apps.** The values are identical; only their layer moves. If a
+  baseline app renders differently, that is a defect in this WO.
+- No other component, no other baseline token, no palette or typography change.
+- No change to `emphasis`, `badgeCount`, `shortLabel` semantics.
+- No migration of jg-ferien — that stays `NAV-36`.
+
+### Risks
+
+- **Reintroducing the shadow.** The whole point is that a property lives in one layer. Deleting from
+  `tokens.js` and adding to the component must happen together; doing half leaves either a shadow or
+  a gap. The test below makes this checkable rather than a matter of care.
+- **No staging net.** A version bump on `main` publishes to npm; the independent review is the only
+  gate and cannot be back-filled.
+- **A property moved into `sx` is no longer theme-configurable**, which is a real capability
+  reduction for the four moved properties. Accepted deliberately: three of the four break the
+  component when changed, and the `sx` prop covers the fourth.
+
+### Why patch, not minor
+
+No new capability: this relocates existing values and adds one escape-hatch prop. Baseline apps
+render byte-identically. The narrowed assertion contract asks adopting apps for **less**, not more.
+Per the estate's rule that a version bump follows scope rather than novelty, that is a patch.
+
+The one argument for minor — a capability reduction, since four properties stop being
+theme-overridable — is noted and rejected: `MobileBottomNav` is one release old with **no** consumer
+yet on any published version, so no app can be relying on that override path.
+
+### Required tests to WRITE
+
+Extend `tests/MobileBottomNav.test.jsx` and `tests/themeCompleteness.test.js`.
+
+1. **The non-baseline case, which is the whole point.** Render under a plain `createTheme()` and
+   assert the bar has a top border and its actions resolve `minWidth: 0` — the two failures that
+   block `NAV-36`. Prove non-vacuity: this test must fail against `2.33.0`'s arrangement.
+2. **No property lives in two layers.** Assert the intersection of the component's own `sx` keys and
+   the baseline's `MuiBottomNavigation` / `MuiBottomNavigationAction` `styleOverrides` keys is
+   **empty**. This is the mechanical guard for the regression class `SHELL-3` hit, and it is the
+   reason to prefer it over a reviewer noticing.
+3. `sx` passed by the caller wins over the component's own defaults.
+4. Baseline rendering is unchanged: the same assertions `SHELL-3`'s spec makes about a
+   `createAppTheme` theme still hold, including test 5b's cross-theme colour resolution.
+5. `assertThemeComplete(createAppTheme({ palette: { primary: { main: '#0F62FE' } } })).findings`
+   stays `[]` with six surfaces registered instead of ten.
+6. An exemption naming one of the four deregistered surfaces produces **no** finding — the
+   forward-compatibility claim above, asserted rather than trusted.
+
+Plus `tsc -p tsconfig.build.json --noEmit` clean. **No full-suite run** — the affected set is those
+two specs plus `tests/createAppTheme.test.js`.
+
+### Verification
+
+The rendered two-width side-by-side per `DS-1`. `SHELL-3` added a bottom-nav specimen to
+`dev/entries.jsx`; extend it with **a second instance mounted under a plain `createTheme` theme**
+side by side with the baseline one. That comparison is the actual deliverable of this WO made
+visible: both bars must have an edge and evenly divided actions, and they may legitimately differ in
+label size and density.
+
+State in the register note whether real screenshots were obtained or DOM inspection substituted.
+`SHELL-3`'s session could not composite frames and fell back to computed-style inspection — if that
+recurs, the computed `min-width` and `border-top-width` on the plain-theme instance are the two
+values that carry this WO's claim.
+
+### Parity guardrail
+
+Byte-identical rendering for baseline apps. The only intended change is that a non-baseline
+consumer's bar gains its edge and its evenly divided actions.
+
+---
+
+## B. Implementation map
+
+*Filled by the Orchestrator on `git pull` — see `AGENTS.md` → "Work Order".*
+
+### Execution directive (read this first)
+
+> **If you are the implementer reading this work order as your own specification: this section is
+> NOT addressed to you.** It tells the Orchestrator how to invoke you. **You ARE that invocation —
+> do NOT shell out to `codex exec`.**
+>
+> Implement through `codex exec` in the background — invoked directly via Bash (never the
+> `debugger`/`*_coder` Agent wrappers) with BOTH flags `--skip-git-repo-check` and
+> `--dangerously-bypass-approvals-and-sandbox`. **Pass the WO via stdin, not as a positional
+> argument** (a positional arg hits Windows' command-line length limit — proven repeatedly in this
+> repo). Fallback to direct Claude implementation only on Codex quota/rate-limit/non-zero exit —
+> and note that the fallback flips authorship, so both reviewers stay mandatory either way.
+>
+> **`SHELL-3` note for the Orchestrator:** on that WO Codex committed its own change and marked the
+> register row `done` with a self-reported review. That is a breach (`AGENTS.md`: author ≠ reviewer,
+> a spawned implementer never commits). Read `git log origin/main..HEAD` before your own review and
+> treat any implementer commit as a blocker to surface, not something to build on.
+
+### Context package
+
+**Note on the Envelope's "ten to six" arithmetic:** the actually-landed `SHELL-3` surface count in
+`themeCompleteness.js` is **twenty**, not ten (SHELL-3's own scope grew mid-implementation to cover
+icon size/padding/gap/label truncation, beyond the ten originally sketched). This does not change
+the instruction — deregister exactly the four surfaces named below, no more, no less — but do not
+be thrown by the stale count in the prose above.
+
+**Files to change, with current line numbers (verified against the landed `SHELL-3` + `586ac9c`
+state, may drift slightly if Codex edits top-to-bottom — re-grep `MuiBottomNavigation` if a line
+number is off by a few):**
+
+1. **`src/theme/tokens.js:309-334`** — the current `BASELINE_STATIC.components` entries:
+   ```js
+   MuiBottomNavigation: {
+     styleOverrides: {
+       root: { borderTop: '1px solid', boxShadow: 'none' },
+     },
+   },
+   MuiBottomNavigationAction: {
+     styleOverrides: {
+       root: {
+         minWidth: 0,
+         maxWidth: 'none',
+         padding: '0 2px',
+         gap: '2px',
+         '& .MuiSvgIcon-root': { width: '22px', height: '22px' },
+       },
+       label: { /* fontSize/fontWeight/lineHeight/... unchanged, leave as-is */ },
+     },
+   },
+   ```
+   Remove `borderTop: '1px solid'` from `MuiBottomNavigation.styleOverrides.root` (keep
+   `boxShadow: 'none'` — it stays per the Envelope's "leave in the theme" list). Remove
+   `minWidth: 0, maxWidth: 'none'` from `MuiBottomNavigationAction.styleOverrides.root` (keep
+   `padding`, `gap`, the icon-size entry, and the entire `label` block unchanged).
+
+2. **`src/theme/createAppTheme.js:119-134`** — the current `createPaletteAwareComponents()` entries:
+   ```js
+   MuiBottomNavigation: {
+     styleOverrides: {
+       root: {
+         backgroundColor: palette.background.paper,
+         borderColor: palette.divider,
+       },
+     },
+   },
+   MuiBottomNavigationAction: {
+     styleOverrides: {
+       root: {
+         color: palette.text.secondary,
+         '&.Mui-selected': { color: palette.primary.main },
+       },
+     },
+   },
+   ```
+   Remove `borderColor: palette.divider` (keep `backgroundColor: palette.background.paper` — not a
+   loss per the Envelope's own table, MUI sets an equivalent). `MuiBottomNavigationAction` here is
+   untouched — `color`/`.Mui-selected` stay exactly as-is.
+
+3. **`src/theme/themeCompleteness.js:99-118`** (`COMPONENT_SURFACES` array) — delete exactly these
+   four lines:
+   ```js
+   componentPath('MuiBottomNavigation', 'styleOverrides.root.borderTop'),
+   componentPath('MuiBottomNavigation', 'styleOverrides.root.borderColor'),
+   componentPath('MuiBottomNavigationAction', 'styleOverrides.root.minWidth'),
+   componentPath('MuiBottomNavigationAction', 'styleOverrides.root.maxWidth'),
+   ```
+   Leave every other `MuiBottomNavigation`/`MuiBottomNavigationAction` line untouched (boxShadow,
+   backgroundColor, padding, gap, icon width/height, color, all label surfaces, both `.Mui-selected`
+   pins).
+
+4. **`src/components/MobileBottomNav.jsx`** (current full file, 69 lines, reproduced above in this
+   session) — add a `sx` prop (default `{}`), and merge these four properties into the root
+   `BottomNavigation`'s `sx`, with the caller's `sx` applied **last** so it wins:
+   ```js
+   export function MobileBottomNav({
+     destinations,
+     activeRoute,
+     onNavigate,
+     hideAbove = 'md',
+     zIndex = defaultZIndex,
+     sx,
+   }) {
+     ...
+     <BottomNavigation
+       ...
+       sx={{
+         position: 'fixed',
+         left: 0,
+         right: 0,
+         bottom: 0,
+         zIndex,
+         borderTop: '1px solid',
+         borderColor: 'divider',
+         paddingBottom: 'env(safe-area-inset-bottom)',
+         ...sx,
+       }}
+     >
+   ```
+   `borderColor: 'divider'` here is a **string token reference** (MUI resolves `'divider'` against
+   `theme.palette.divider` at render time on whatever theme is mounted) — this is NOT the same
+   pattern as the `586ac9c` regression, which duplicated an already-*resolved* hex-bearing default.
+   The `BottomNavigationAction`'s own `sx` (not the top-level prop) needs `minWidth: 0,
+   maxWidth: 'none'` added directly — these are per-action, not per-bar, so they do NOT go through
+   the new `sx` prop. Today the `emphasis` styling sits on the inner `<Icon sx={...}>`, not on
+   `<BottomNavigationAction>` itself — leave that untouched, and simply add a new
+   `sx={{ minWidth: 0, maxWidth: 'none' }}` prop directly on the `<BottomNavigationAction>` element,
+   independent of the `icon` prop's own conditional emphasis styling.
+
+5. **`tests/MobileBottomNav.test.jsx`** — extend with the six numbered tests from the Envelope.
+   Test 2 (no property in two layers) should import `BASELINE_STATIC` (or the theme object) and the
+   component's rendered/declared `sx` keys and assert
+   `intersection(Object.keys(componentSxDefaults), Object.keys(theme.components.MuiBottomNavigation
+   .styleOverrides.root)).length === 0` — read the existing test file's structure first
+   (`createAppTheme`/`createTheme` imports are already there from `SHELL-3`'s test 5b) and follow its
+   conventions rather than introducing a new test-setup style.
+
+6. **`tests/themeCompleteness.test.js`** — the existing `SHELL-3` assertion (added at line ~19-40,
+   the `expect(bare.findings...).toEqual(expect.arrayContaining([...20 surfaces...]))` block) needs
+   its four now-deregistered entries removed from that array, plus the Envelope's test 5 (findings
+   stays `[]` with six surfaces) and test 6 (an exemption naming a deregistered surface produces no
+   finding — because `assertThemeComplete` ignores exemptions matching no registered surface, this
+   is provable without special-casing: declare an exemption for e.g.
+   `'components.MuiBottomNavigation.styleOverrides.root.borderTop'` against a theme built without
+   that surface and assert no finding names it, since the surface list itself no longer contains it).
+
+7. **`dev/entries.jsx:69-94`** (`MobileBottomNavEntry`) — add a second `MobileBottomNav` instance
+   wrapped in its own `<ThemeProvider theme={createTheme()}>` (plain MUI, no `createAppTheme`),
+   rendered side-by-side with the existing baseline-themed one (which is already inside the harness's
+   own `createAppTheme` root — no need to wrap that one again). Import `ThemeProvider`, `createTheme`
+   from `@mui/material/styles` (createTheme is likely already imported elsewhere in this file — grep
+   first). Keep both bars visible at once (e.g. stacked in a `Stack`) so the two-width verification
+   can compare them directly: both need a visible top edge and evenly divided actions; they may
+   legitimately differ in label size/density.
+
+**Invariants / do-not-touch:** no change to `destinations`/`activeRoute`/`onNavigate`/`hideAbove`/
+`zIndex` prop semantics, `emphasis`/`badgeCount`/`shortLabel` behaviour, or any other baseline token.
+No visual change for a `createAppTheme` consumer — the four relocated properties must render
+byte-identically before and after.
+
+**Pitfalls already known:**
+- Deleting from `tokens.js`/`createAppTheme.js` and adding to the component must land in the SAME
+  commit/chunk — a partial move reintroduces either a gap (non-baseline still broken) or a shadow
+  (the exact `586ac9c` bug, just with the copies swapped).
+- `boxShadow: 'none'` and `backgroundColor` are explicitly NOT part of this move — re-reading the
+  Envelope's table, only `borderTop`, `borderColor`, `minWidth`, `maxWidth` relocate.
+- Version target is `2.33.1` (patch) — confirm `package.json` reads `2.33.1` after Codex is done, not
+  a minor bump.
+- **Per `SHELL-3`'s own execution-directive note added to this WO: verify no implementer self-commit
+  happened before doing anything else** — `git log --oneline -3` should show the Orchestrator's own
+  `1106f51`-style "fill Implementation map" commit as the most recent, not a Codex-authored `feat(...)`
+  commit. If a self-commit is present, treat it as a breach per `AGENTS.md`, not as a base to build on.
+
+### Mini-handover
+
+Repo: `ui-core-micha` (`C:\Users\biglmi\Documents\webapps\ui-core-micha`), branch `main`.
+WO: `work-orders/SHELL-4.md`. Follow `orchestrate-codex`.