Consolidate host styling patterns into unified documentation

Merge the separate "Support native host styling using CSS variables" and
"Reacting to light/dark theme changes" sections into a single "Matching
host styling (CSS variables, theme, and fonts)" pattern. This provides
clearer guidance by covering all three concerns together.

- Rename `docs/patterns.ts` to `docs/patterns.tsx` for JSX support
- Add `hostStylingVanillaJs` and `hostStylingReact` consolidated examples
- Enhance `applyHostFonts_fromHostContext` to apply initial fonts after
  `connect()`, not just on context change
- Add CSS usage examples to `applyHostStyleVariables()` JSDoc
- Update font example to use `var(--font-sans, system-ui, sans-serif)`

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/styles.examples.ts

@@ -91,11 +91,20 @@ function applyHostStyleVariables_toElement(app: App) {
  */
 function applyHostFonts_fromHostContext(app: App) {
   //#region applyHostFonts_fromHostContext
+  // Apply when host context changes
   app.onhostcontextchanged = (params) => {
     if (params.styles?.css?.fonts) {
       applyHostFonts(params.styles.css.fonts);
     }
   };
+
+  // Apply initial fonts after connecting
+  app.connect().then(() => {
+    const ctx = app.getHostContext();
+    if (ctx?.styles?.css?.fonts) {
+      applyHostFonts(ctx.styles.css.fonts);
+    }
+  });
   //#endregion applyHostFonts_fromHostContext
 }