Require #\name for LaTeX symbols, render canvas at device pixel ratio, and keep mobile keyboard from covering the tree

[Copilot]

Three issues on the expression tree page:

• #phi silently rendered as the Greek letter φ; the symbol lookup should be opt-in via #\phi, and bare #phi should display as the text phi.
• The canvas looks grainy on mobile / HiDPI displays.
• On mobile, focusing the input opens the keyboard and the vertically-centered input re-centers on top of the tree.

Symbol lookup is now opt-in via \

• infixToPostfix.js: tokenizer accepts one optional \ immediately after # as part of the identifier (ALLOWED_CHARACTERS_REGEX extended accordingly).
• tree.js: LATEX_SYMBOL_MAP is only consulted for names starting with \; the \ is stripped before subscript splitting and re-attached before lookup so #\theta12 → θ₁₂ and #\theta_foo → θ_foo still work. Unknown #\foo is passed through to KaTeX as raw \foo; #foo falls back to \mathrm{foo}.

Input	rawLabel	latex
#\phi	\phi	\phi
#phi	phi	\mathrm{phi}
#\theta12	\theta12	\theta_{12}
#foo_bar	foo_bar	\mathrm{foo}_{bar}

• Sample expressions, input placeholder and README updated to the new syntax.

Canvas rendered at devicePixelRatio

• resizeCanvas sets the backing store to cssSize × dpr, pins canvas.style.{width,height} to the CSS size, and applies a matching setTransform(dpr, 0, 0, dpr, 0, 0); all drawing code continues to use CSS pixels.
• clearCanvas resets the transform before clearRect so it covers the full backing store.
• PNG/SVG export now uses stored cssWidth/cssHeight so the user-selected export scale isn't multiplied by DPR and the SVG viewBox stays in logical units.

Controls no longer re-center over the tree when the keyboard opens

• .controls switched from margin: auto (flex vertical centering) to margin: 1rem auto 0. The input stays pinned near the top of the viewport, so shrinking the visual viewport for the virtual keyboard no longer pushes it down onto the top-anchored tree nodes.

[Copilot]

Pull request overview

This PR updates the expression-tree page to (1) make LaTeX symbol rendering for custom tokens opt-in via #\name, (2) render the canvas sharply on HiDPI/mobile by honoring devicePixelRatio, and (3) prevent the mobile keyboard from pushing the controls over the tree by removing vertical centering.

Changes:

• Require #\name for LaTeX-command custom identifiers; render bare #name as upright text (\mathrm{...}).
• Scale the canvas backing store by DPR while keeping drawing coordinates in CSS pixels; fix PNG/SVG export sizing to remain in logical units.
• Adjust .controls layout to stay near the top of the viewport when the virtual keyboard opens.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
tree.js	Makes LaTeX symbol lookup opt-in (only for identifiers starting with \) and updates identifier-to-LaTeX mapping rules accordingly.
infixToPostfix.js	Extends allowed character set and tokenizer to accept an optional backslash immediately after # in custom identifiers.
index.html	Updates the input placeholder example to the new #\pi syntax.
canvas.js	Implements DPR-aware canvas sizing/transform and updates PNG/SVG export dimensions to use CSS sizes.
app.css	Pins the controls near the top to avoid keyboard-induced re-centering over the tree.
README.md	Updates documented syntax and examples to reflect #\name opt-in symbol rendering.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The four-value margin shorthand is redundant here (margin: 1rem auto 0 auto). Since left/right are both auto, this can be simplified to margin: 1rem auto 0; (or margin: 1rem auto 0 auto only if you intentionally want to be explicit).

Suggested change

	margin: 1rem auto 0 auto;
	margin: 1rem auto 0;