feat: add calculator example app with switchable modes

[mohamedmansour]

Add a modern, dark-themed calculator example at examples/app/calculator/ that showcases WebUI SSR + FAST-HTML hydration with a modular mode system.

Architecture:

• Plugin-like ModeEngine interface (modes/engine.ts) with a registry pattern — adding a new calculator mode requires only one new file and a registerMode() call, with zero UI component changes
• Standard mode: 4-column grid with basic arithmetic, operator chaining, percent, and sign negation
• Scientific mode: 5-column grid adding sin/cos/tan (degrees), ln/log, sqrt, x², xʸ, factorial, π, e, parentheses, and memory operations (MC/MR/M+)

Components (FAST-HTML hydration):

• calc-app: root orchestrator — mode tab switching, keyboard input via document-level keydown listener, delegates to ModeEngine.processInput()
• calc-display: glassmorphism display panel showing expression history and current value, with backdrop-filter blur
• calc-button: color-coded by type (number/operator/function/action/equal) with scale+shadow press animation and grid-column span support

Hydration details:

• prepare() reads @attr values from getAttribute() and child element data from shadowRoot.querySelectorAll() — @attr field initializers run after super() with useDefineForClassFields:false, so they are not available during prepare()
• Mode tabs are static HTML (not a loop) to avoid a FAST-HTML hydration bug where @observable string arrays in repeat directives cause 'Cannot assign to read only property' errors
• Keyboard listener on document (not shadowRoot) so calculator input works regardless of focus, with cleanup in disconnectedCallback()

Styling:

• Dark theme with CSS custom properties for all colors, spacing, radii, shadows, and transitions
• Button types: numbers (#1e2a4a), operators (#e94560), scientific functions (#533483), actions (#0f3460)
• Responsive grid switches between 4 and 5 columns via :host([columns]) attribute selector