@akinon/pz-theme 2.0.83-rc.0 → 2.0.83

package/CHANGELOG.md

@@ -1,38 +1,36 @@
 # @akinon/pz-theme
 
-## 2.0.83-rc.0
-
-### Patch Changes
-
-- Updated dependencies [86187b1c]
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [2fea41430]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [57d7eb305]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a714]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d06]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [e9598c71d]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6c]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a631]
-- Updated dependencies [e18836b20]
-- Updated dependencies [b1111d7b]
-  - @akinon/next@2.0.83-rc.0
-  - @akinon/theme-contract@2.0.83-rc.0
+## 2.0.83
+
+### Patch Changes
+
+- 5d4597c9: ZERO-4664: Let a brand add a field or an agreement the theme has never heard of without a release — an auth field can be a Custom one, named with the key the backend expects and given the input type it needs, and a consent row can be a Custom tick with its own name and the value it sends when ticked; the composed forms forward both exactly as authored, and an unnamed one is refused rather than drawn as a control that collects nothing
+- 5d4597c9: ZERO-4664: Let a sign-up ask for a gender and a birth date — the gender field is a select of the two values commerce stores with captions a brand writes in its own language, and the birth date is a native date control whose value is already the format the account keeps
+- a307a5b6: ZERO-4664: Compose the auth journey out of blocks — an auth flow of named steps, a password-reset step, auth fields and OTP phases with their own code boxes — and give every auth form its own inline validation messages, a detached submit CTA that greys out while the form works, and a full-width root so a drawer's composition fills the panel
+- 5d4597c9: ZERO-4664: Let a composition say where an auth form's error message goes — a Form Error block draws it in the design's own layout, so a failed login no longer writes its message below the button that was just pressed and flush against the panel edge, and a composition that has not placed one still gets the form's built-in line
+- 892e1a6a: ZERO-4664: Give an auth journey one shared title row — each step carries its own title and a Step Title block renders whichever step the flow is showing, so a drawer keeps one close button and one heading row instead of repeating both in every step
+- d723a217: ZERO-4664: Let a modal place and size its built-in close button, so the ✕ can line up with a title row authored in the composition instead of sitting at a fixed corner offset it had no way to leave
+- 73a47d01: ZERO-4664: Keep a composed modal's close button clickable — a full-width block in the panel, such as a shared title row, was painting over the ✕ and swallowing every click on it
+- b66c61b0: ZERO-4664: Post the body a composition means — an optional answer nobody gave is left out instead of travelling as an empty string, a field named after part of the protocol is ignored rather than allowed to change which endpoint is called or whether next-auth answers at all, and where a name is duplicated the first control wins, which is the rule the validation beside it already used and which keeps an empty twin from erasing what the shopper typed
+- b66c61b0: ZERO-4664: Send the auth blocks' editor messages through the package's own bridge, which addresses the editor's real origin, instead of six private copies of the same loop posting to any window that happens to be embedding the storefront
+- b66c61b0: ZERO-4664: Let a Consent Row say where it works — the membership and marketing ticks are questions the Register Form answers, so outside it they posted a string commerce does not read as a consent while looking to the author like a working row; a Custom tick is the brand's own key and still belongs anywhere
+- 7345ba25: ZERO-4664: Let a password reset be composed the way a login already could — the Forgot Password form draws the children a design authors (an Auth Field for the address, a Form Error block for the message, its own CTA) and requests the reset for exactly the address the fixed row did, so a brand can put a sentence above the input, move the message out from under the button and hand the submit to a drawer's pinned CTA; and the state after the mail is away can be a step of the flow, authored out of ordinary blocks, instead of one message and one link
+- b66c61b0: ZERO-4664: Stop a control the design has taken off this breakpoint from holding the form shut — the editor's Visibility setting is CSS, so a required field hidden on mobile stayed in the form and refused every submit there with its explanation drawn inside the hidden wrapper; and a Form Error block hidden inside a container no longer counts as the place the message goes, which was silencing the form's own message as well as itself
+- f4e4b678: ZERO-4664: Apply a text, link or button block's own styles once — the renderers that draw their own root now let the generated stylesheet target that element instead of inlining the same declarations over the wrapper's, so a padding of 24 is 24 rather than 48 and a mobile override or a hover can still win
+- 17d509e3: ZERO-4664: Honour a modal's Content Padding and Stretch Content settings — the config parser now reads both, so a panel padded to 0 renders at 0 instead of keeping the historical 24, and a drawer set to stretch hands its full height to the composition so a CTA can sit on the bottom edge
+- 617b8c14: ZERO-4664: Let a sheet's height and a modal's backdrop be answered per breakpoint, so a phone can get a 92% sheet behind a heavier backdrop while the desktop keeps its own values, and make the grab bar a sheet draws at its top centre optional for compositions that bring their own header
+- 0c1c0b8c: ZERO-4664: Let a modal arrive as a different shape on narrower viewports — a centred dialog on a desktop can be a bottom sheet on a phone — and give a stretched sheet a real height, so its composition can pin a CTA to the bottom edge
+- b66c61b0: ZERO-4664: Honour what a Consent Row says about itself — a tick the author marked optional can be left unticked and the shopper's actual answer travels, and a composition that asks no agreement at all registers the way a fixed form does instead of refusing every submit over a sentence that was nowhere on screen
+- b66c61b0: ZERO-4664: Let a shopper fix a digit they got wrong — a code box now writes where it was typed instead of appending to the end (on a full code the keystroke did nothing at all, and on a half-typed one the box's own digit came back with the new one and both landed at the end), Backspace empties the box it was pressed in rather than the last one, and a code with a gap in it is not treated as finished
+- 90213d4e: ZERO-4664: Let the OTP form be the only place a verification code's length is set — the code boxes no longer carry a box-count setting of their own, which inside a form could only sit at a number the boxes ignored and read as broken
+- e0d5f394: ZERO-4664: Keep the page still for as long as an overlay covers it — the scroll lock is now a rule that the inline styles other components write cannot outrank, so a step of an auth journey arriving in a drawer no longer hands the site its scrollbar back mid-flow, and a button stops carrying a closed dialog that reached for the page's scrolling for no reason
+- efa3b962: ZERO-4664: Let a modal keep the site header clear — the overlay layer, backdrop included, can start below it, so a bottom sheet no longer rides over a header the design leaves visible and clickable
+- b66c61b0: ZERO-4664: Give a parked SMS verification an owner, so one page-wide slot stops being everybody's — a record now belongs to the journey that started it and to the step it moved to, an OTP form finishes only its own, navigating away from that step abandons it, a flow's cleanup clears its own journey instead of whichever verification the page happened to be carrying, and nothing outlives the visit: a registration waiting on a code holds a password until it is verified, and a page with no flow to unmount had no way to let go of it
+- 5d4597c9: ZERO-4664: Let a registration be composed the way a login already could — the Register Form draws the children a design authors (a field per input, a Consent Row per tick, its own CTA and message) and posts exactly the body its fixed rows posted, so a brand can reorder, relabel and rewrite every row of a sign-up, the legal consent sentence included, instead of accepting the form's own
+- b66c61b0: ZERO-4664: Make the two controls beside a code behave — a resend cannot fire again while its request is still in flight (the cooldown only restarted once the answer came back, so the whole round trip was a second SMS waiting to happen), a refused resend says so instead of restarting the wait and wiping the digits already typed, and "use a different number" no longer throws away a registration whose parked payload is the only copy of it
+- b19a42f3: ZERO-4664: Let a sheet's height be written as a CSS length rather than only picked as a percentage, so a drawer can be calc(100dvh - 172px) — everything below the header — or fit-content, as tall as its composition needs
+  - @akinon/next@2.0.83
+  - @akinon/theme-contract@2.0.83
 
 ## 2.0.82
 

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.83-rc.0",
+  "version": "2.0.83",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.83-rc.0",
+    "@akinon/next": "2.0.83",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.83-rc.0",
+    "@akinon/theme-contract": "2.0.83",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "tailwind-merge": "^2.5.4",
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.83-rc.0",
+    "@akinon/next": "2.0.83",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/__tests__/auth-flow-block.test.tsx

@@ -0,0 +1,211 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import AuthFlowBlock from '../blocks/auth-flow-block';
+import {
+  __resetAuthFlowBusForTests,
+  AuthFlowIdContext,
+  getAuthFlowState,
+  setAuthStep
+} from '../auth/auth-flow-bus';
+import { useBlockAction } from '../hooks/use-block-action';
+import { Block } from '../theme-block';
+
+const textChild = (id: string, value: string): Block => ({
+  id,
+  type: 'text',
+  label: id,
+  value,
+  properties: {},
+  styles: {},
+  order: 0,
+  hidden: false
+});
+
+const step = (
+  id: string,
+  stepKey: string,
+  children: Block[],
+  order = 0
+): Block => ({
+  id,
+  type: 'auth-step',
+  label: id,
+  properties: { stepKey },
+  styles: {},
+  order,
+  hidden: false,
+  blocks: children
+});
+
+const flowBlock = (
+  properties: Record<string, unknown>,
+  steps: Block[]
+): Block => ({
+  id: 'flow-1',
+  type: 'auth-flow',
+  label: 'Auth Flow',
+  properties,
+  styles: {},
+  order: 0,
+  hidden: false,
+  blocks: steps
+});
+
+const renderFlow = (
+  properties: Record<string, unknown>,
+  options: { isDesigner?: boolean; selectedBlockId?: string | null } = {}
+) =>
+  render(
+    <AuthFlowBlock
+      block={flowBlock(properties, [
+        step('step-welcome', 'welcome', [textChild('t-welcome', 'Welcome copy')], 0),
+        step('step-login', 'login', [textChild('t-login', 'Login copy')], 1),
+        step('step-register', 'register', [textChild('t-register', 'Register copy')], 2)
+      ])}
+      placeholderId="body"
+      sectionId="section-1"
+      isDesigner={options.isDesigner ?? false}
+      selectedBlockId={options.selectedBlockId ?? null}
+    />
+  );
+
+describe('auth flow block', () => {
+  beforeEach(() => {
+    __resetAuthFlowBusForTests();
+  });
+
+  it('renders only its initial step', () => {
+    renderFlow({ flowId: 'auth', initialStep: 'welcome' });
+
+    expect(screen.getByText('Welcome copy')).toBeInTheDocument();
+    expect(screen.queryByText('Login copy')).toBeNull();
+    expect(screen.queryByText('Register copy')).toBeNull();
+  });
+
+  it('follows the bus, which is how triggers anywhere on the page drive it', () => {
+    renderFlow({ flowId: 'auth', initialStep: 'welcome' });
+
+    act(() => {
+      setAuthStep('auth', 'register');
+    });
+
+    expect(screen.queryByText('Welcome copy')).toBeNull();
+    expect(screen.getByText('Register copy')).toBeInTheDocument();
+  });
+
+  it('falls back to the initial step when the bus names a step the author removed', () => {
+    renderFlow({ flowId: 'auth', initialStep: 'welcome' });
+
+    act(() => {
+      setAuthStep('auth', 'no-such-step');
+    });
+
+    expect(screen.getByText('Welcome copy')).toBeInTheDocument();
+  });
+
+  it('walks back through its own back control', () => {
+    renderFlow({
+      flowId: 'auth',
+      initialStep: 'welcome',
+      showBack: true,
+      backLabel: 'Go back'
+    });
+
+    act(() => {
+      setAuthStep('auth', 'login');
+    });
+    act(() => {
+      setAuthStep('auth', 'register');
+    });
+
+    fireEvent.click(screen.getByText('Go back'));
+    expect(screen.getByText('Login copy')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Go back'));
+    expect(screen.getByText('Welcome copy')).toBeInTheDocument();
+  });
+
+  it('shows the designer the step that owns the current selection', () => {
+    renderFlow(
+      { flowId: 'auth', initialStep: 'welcome' },
+      { isDesigner: true, selectedBlockId: 't-register' }
+    );
+
+    expect(screen.getByText('Register copy')).toBeInTheDocument();
+    expect(screen.queryByText('Welcome copy')).toBeNull();
+  });
+
+  it('lets the designer pin a step with previewStep when nothing is selected', () => {
+    renderFlow(
+      { flowId: 'auth', initialStep: 'welcome', previewStep: 'login' },
+      { isDesigner: true }
+    );
+
+    expect(screen.getByText('Login copy')).toBeInTheDocument();
+  });
+});
+
+describe('auth-step block action', () => {
+  beforeEach(() => {
+    __resetAuthFlowBusForTests();
+  });
+
+  const Trigger = ({
+    properties
+  }: {
+    properties: Record<string, unknown>;
+  }) => {
+    const action = useBlockAction({ properties });
+
+    return (
+      <button type="button" onClick={action.onClick}>
+        go
+      </button>
+    );
+  };
+
+  it('resolves a bare step key against the flow it sits inside', () => {
+    render(
+      <AuthFlowIdContext.Provider value="drawer">
+        <Trigger
+          properties={{ actionType: 'auth-step', actionTarget: 'register' }}
+        />
+      </AuthFlowIdContext.Provider>
+    );
+
+    fireEvent.click(screen.getByText('go'));
+
+    expect(getAuthFlowState('drawer')?.active).toBe('register');
+  });
+
+  it('reaches a named flow from outside every flow — the header-button case', () => {
+    render(
+      <Trigger
+        properties={{
+          actionType: 'auth-step',
+          actionTarget: 'drawer:register'
+        }}
+      />
+    );
+
+    fireEvent.click(screen.getByText('go'));
+
+    expect(getAuthFlowState('drawer')?.active).toBe('register');
+  });
+
+  it('walks the nearest flow back through auth-back', () => {
+    setAuthStep('drawer', 'login');
+    setAuthStep('drawer', 'register');
+
+    render(
+      <AuthFlowIdContext.Provider value="drawer">
+        <Trigger properties={{ actionType: 'auth-back' }} />
+      </AuthFlowIdContext.Provider>
+    );
+
+    fireEvent.click(screen.getByText('go'));
+
+    expect(getAuthFlowState('drawer')?.active).toBe('login');
+  });
+});

package/src/__tests__/auth-flow-bus.test.ts

@@ -0,0 +1,290 @@
+import {
+  __resetAuthFlowBusForTests,
+  DEFAULT_AUTH_FLOW_ID,
+  clearPendingOtp,
+  getAuthFlowState,
+  getPendingOtp,
+  goBackAuthStep,
+  registerAuthFlowMount,
+  resetAuthFlow,
+  resolveAuthStepTarget,
+  setAuthStep,
+  setPendingOtp,
+  subscribeToAuthFlows
+} from '../auth/auth-flow-bus';
+
+describe('auth flow bus', () => {
+  beforeEach(() => {
+    __resetAuthFlowBusForTests();
+  });
+
+  it('starts every flow unset, so the flow block falls back to its authored initial step', () => {
+    expect(getAuthFlowState('auth')).toBeNull();
+  });
+
+  it('records a step and stacks history in navigation order', () => {
+    setAuthStep('auth', 'login');
+    setAuthStep('auth', 'register');
+
+    expect(getAuthFlowState('auth')).toEqual({
+      active: 'register',
+      history: ['login']
+    });
+  });
+
+  it('ignores a re-selection of the active step instead of stacking a phantom back entry', () => {
+    setAuthStep('auth', 'login');
+    setAuthStep('auth', 'login');
+
+    expect(getAuthFlowState('auth')?.history).toEqual([]);
+  });
+
+  it('walks back through history one step at a time', () => {
+    setAuthStep('auth', 'login');
+    setAuthStep('auth', 'phone');
+    setAuthStep('auth', 'register');
+
+    goBackAuthStep('auth');
+    expect(getAuthFlowState('auth')?.active).toBe('phone');
+
+    goBackAuthStep('auth');
+    expect(getAuthFlowState('auth')?.active).toBe('login');
+  });
+
+  it('resets to unset when back runs out of history — the journey returns to its start', () => {
+    setAuthStep('auth', 'login');
+
+    goBackAuthStep('auth');
+
+    expect(getAuthFlowState('auth')).toBeNull();
+  });
+
+  it('keeps flows independent of each other', () => {
+    setAuthStep('auth', 'login');
+    setAuthStep('newsletter-gate', 'register');
+
+    resetAuthFlow('auth');
+
+    expect(getAuthFlowState('auth')).toBeNull();
+    expect(getAuthFlowState('newsletter-gate')?.active).toBe('register');
+  });
+
+  it('notifies subscribers on every change and stops after unsubscribe', () => {
+    const listener = jest.fn();
+    const unsubscribe = subscribeToAuthFlows(listener);
+
+    setAuthStep('auth', 'login');
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    unsubscribe();
+    setAuthStep('auth', 'register');
+    expect(listener).toHaveBeenCalledTimes(1);
+  });
+
+  it('carries one pending OTP for the page and clears it explicitly', () => {
+    setPendingOtp({ kind: 'register', phone: '5300000000', payload: { a: 1 } });
+
+    expect(getPendingOtp()?.kind).toBe('register');
+
+    clearPendingOtp();
+    expect(getPendingOtp()).toBeNull();
+  });
+
+  describe('mount tracking', () => {
+    it('resets a fresh-start flow only when its LAST mount leaves', () => {
+      // A desktop drawer and a mobile sheet share the flow id; responsive
+      // hiding is CSS, so both are mounted at once. The first unmount must
+      // not reset the journey out from under the survivor.
+      const releaseDesktop = registerAuthFlowMount('auth', {
+        resetOnLastUnmount: true
+      });
+      const releaseMobile = registerAuthFlowMount('auth', {
+        resetOnLastUnmount: true
+      });
+
+      setAuthStep('auth', 'register');
+      setPendingOtp({ kind: 'login', phone: '5300000000', scope: 'auth' });
+
+      releaseDesktop();
+      expect(getAuthFlowState('auth')?.active).toBe('register');
+      expect(getPendingOtp()).not.toBeNull();
+
+      releaseMobile();
+      expect(getAuthFlowState('auth')).toBeNull();
+      // An abandoned verification holds a password in its payload; it must
+      // not resurface in a later, unrelated login.
+      expect(getPendingOtp()).toBeNull();
+    });
+
+    it('leaves a verification belonging to another journey alone', () => {
+      // The page carries two flows — a header drawer and an inline sign-up —
+      // and the drawer closing must not drop the sign-up's verification. The
+      // reset beside this clear has always been per flow; the clear was not,
+      // so ONE page-wide slot was emptied by whichever flow left first.
+      setPendingOtp({
+        kind: 'register',
+        phone: '5300000000',
+        scope: 'checkout'
+      });
+
+      const releaseDrawer = registerAuthFlowMount('auth', {
+        resetOnLastUnmount: true
+      });
+      releaseDrawer();
+
+      expect(getPendingOtp()?.scope).toBe('checkout');
+    });
+
+    it('leaves a verification that belongs to no flow alone', () => {
+      // A register form and an OTP form composed side by side, with no flow
+      // around them: nothing about a drawer opening and closing elsewhere on
+      // the page has anything to say about that journey.
+      setPendingOtp({ kind: 'register', phone: '5300000000' });
+
+      registerAuthFlowMount('auth', { resetOnLastUnmount: true })();
+
+      expect(getPendingOtp()).not.toBeNull();
+    });
+
+    it('releases a registration only once, so StrictMode double cleanup cannot over-count', () => {
+      const releaseFirst = registerAuthFlowMount('auth', {
+        resetOnLastUnmount: true
+      });
+      const releaseSecond = registerAuthFlowMount('auth', {
+        resetOnLastUnmount: true
+      });
+
+      setAuthStep('auth', 'login');
+
+      releaseFirst();
+      releaseFirst();
+
+      expect(getAuthFlowState('auth')?.active).toBe('login');
+
+      releaseSecond();
+      expect(getAuthFlowState('auth')).toBeNull();
+    });
+
+    it('keeps a flow that opted out of fresh starts', () => {
+      const release = registerAuthFlowMount('auth', {
+        resetOnLastUnmount: false
+      });
+
+      setAuthStep('auth', 'register');
+      release();
+
+      expect(getAuthFlowState('auth')?.active).toBe('register');
+    });
+  });
+
+  describe('resolveAuthStepTarget', () => {
+    it('reads a bare step key against the nearest flow', () => {
+      expect(resolveAuthStepTarget('register', 'drawer')).toEqual({
+        flowId: 'drawer',
+        stepKey: 'register'
+      });
+    });
+
+    it('falls back to the default flow when no flow is in scope', () => {
+      expect(resolveAuthStepTarget('register')).toEqual({
+        flowId: DEFAULT_AUTH_FLOW_ID,
+        stepKey: 'register'
+      });
+    });
+
+    it('lets flow:step name a flow outright — the cross-placeholder spelling', () => {
+      expect(resolveAuthStepTarget('drawer:register', 'ignored')).toEqual({
+        flowId: 'drawer',
+        stepKey: 'register'
+      });
+    });
+
+    it('treats an empty target — and an empty step — as no target at all', () => {
+      expect(resolveAuthStepTarget('')).toBeNull();
+      expect(resolveAuthStepTarget('  ')).toBeNull();
+      expect(resolveAuthStepTarget('drawer:')).toBeNull();
+    });
+  });
+});
+
+describe('a verification the shopper walked away from', () => {
+  beforeEach(() => {
+    __resetAuthFlowBusForTests();
+  });
+
+  const parked = () =>
+    setPendingOtp({
+      kind: 'register',
+      phone: '5551234567',
+      scope: 'auth',
+      stepKey: 'verify',
+      payload: { password: 'hunter2' }
+    });
+
+  it('is abandoned when the flow moves off the step holding it', () => {
+    setAuthStep('auth', 'verify');
+    parked();
+
+    setAuthStep('auth', 'login');
+
+    // Nothing on the page is waiting for it any more, and it carries a
+    // password: leaving it armed means the next OTP form to mount answers for
+    // a journey nobody came back to.
+    expect(getPendingOtp()).toBeNull();
+  });
+
+  it('is abandoned when the shopper walks back out of it', () => {
+    setAuthStep('auth', 'register');
+    setAuthStep('auth', 'verify');
+    parked();
+
+    goBackAuthStep('auth');
+
+    expect(getAuthFlowState('auth')?.active).toBe('register');
+    expect(getPendingOtp()).toBeNull();
+  });
+
+  it('survives a step change inside another flow', () => {
+    setAuthStep('auth', 'verify');
+    parked();
+
+    setAuthStep('checkout', 'login');
+
+    expect(getPendingOtp()).not.toBeNull();
+  });
+
+  it('survives arriving on the step it named', () => {
+    parked();
+
+    setAuthStep('auth', 'verify');
+
+    expect(getPendingOtp()).not.toBeNull();
+  });
+
+  it('is not tied to any step when the composition named none', () => {
+    // A register form and an OTP form side by side, no flow between them: the
+    // handoff is not a navigation, so navigating has nothing to say about it.
+    setPendingOtp({ kind: 'register', phone: '5551234567' });
+
+    setAuthStep('auth', 'login');
+
+    expect(getPendingOtp()).not.toBeNull();
+  });
+
+  it('does not outlive the visit on a page where nothing else clears it', () => {
+    jest.useFakeTimers();
+
+    try {
+      setPendingOtp({ kind: 'register', payload: { password: 'hunter2' } });
+      expect(getPendingOtp()).not.toBeNull();
+
+      // An SMS code expires long before this; the cap is here because the
+      // record holds a REGISTRATION, and module state lives as long as the tab.
+      jest.advanceTimersByTime(15 * 60 * 1000);
+
+      expect(getPendingOtp()).toBeNull();
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+});