[Preview NG] Provide math keypad in Storybook previews

[jeremywiebe]

Summary:

Fixes several gaps in the Storybook preview harness (PreviewRenderer /
PreviewWithKeypad) that surfaced while reviewing the frontend half of the
preview migration — the frontend preview frame had the same bugs, and fixing
them there exposed that the reference harness shared them.

The question preview rendered a bare Renderer with no user-input wiring.
Renderer is fully controlled now, so without a UserInputManager widgets
receive userInput: undefined — numeric-input throws on render and other
input widgets silently freeze. The question case now wraps Renderer in
UserInputManager, and also passes legacyPerseusLint through (the parent
sends its getSaveWarnings() there, but the harness dropped it).

The hint preview also rendered a bare Renderer, ignoring pos. It now uses
HintRenderer, which restores the hint labeling/semantics, brings its own
UserInputManager, and forces customKeypad: false like production hint
rendering does.

Two keypad cleanups in PreviewWithKeypad: the MobileKeypad is only
mounted when isMobile — on desktop it can never activate (widgets pop the
desktop keypad; the editor only sends customKeypad: true for phone/tablet),
but an inactive MobileKeypad still renders a fixed, 1px-bordered container
pinned across the bottom of the preview. And instead of reaching up to
window.frameElement's data-* attributes (which usePreviewPresenter is
supposed to encapsulate), isMobile/hasLintGutter now flow from the hook
through PreviewRenderer as props — taking an eslint-disable with them.

Issue: LEMS-3741

Test plan:

• pnpm typecheck, pnpm lint, and pnpm test
• Open the EditorPage story in Storybook and add an input widget (e.g.
  numeric-input or expression) — the preview should render it and accept
  typed input instead of crashing/freezing
• Switch the preview to a phone/tablet device — focusing an expression
  widget should raise the mobile keypad inside the preview iframe
• Switch back to desktop — no hairline bar across the bottom of the preview,
  and expression widgets use the desktop keypad popover
• Check the hint preview row — hints render with hint styling and the
  screen-reader position label

[github-actions]

Size Change: 0 B

Total Size: 508 kB

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	20.6 kB
packages/keypad-context/dist/es/index.js	1 kB
packages/kmath/dist/es/index.js	6.32 kB
packages/math-input/dist/es/index.js	98.5 kB
packages/math-input/dist/es/strings.js	1.61 kB
packages/perseus-core/dist/es/index.item-splitting.js	12 kB
packages/perseus-core/dist/es/index.js	26.3 kB
packages/perseus-editor/dist/es/index.js	105 kB
packages/perseus-linter/dist/es/index.js	9.8 kB
packages/perseus-score/dist/es/index.js	10.2 kB
packages/perseus-utils/dist/es/index.js	403 B
packages/perseus/dist/es/index.js	200 kB
packages/perseus/dist/es/strings.js	8.6 kB
packages/pure-markdown/dist/es/index.js	1.39 kB
packages/simple-markdown/dist/es/index.js	6.71 kB

_{compressed-size-action}

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (cc16dcd) and published it to npm. You
can install it using the tag PR3766.

Example:

pnpm add @khanacademy/perseus@PR3766

If you are working in Khan Academy's frontend, you can run the below command.

./dev/tools/bump_perseus_version.ts -t PR3766

If you are working in Khan Academy's webapp, you can run the below command.

./dev/tools/bump_perseus_version.js -t PR3766