feat(plugin): enhance font management in plugins by introducing host CSS variables for typography; update examples and documentation for consistent font usage across plugin interfaces

plugins/examples/gpu-monitor/frontend/gpu.css

@@ -36,7 +36,7 @@ body,
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: system-ui, sans-serif;
+  font-family: var(--font-sans, system-ui, sans-serif);
 }
 .terminal-scroll {
   scrollbar-width: thin;

plugins/examples/session-toolbox/ui/index.html

@@ -11,9 +11,7 @@
       body {
         margin: 0;
         padding: 16px;
-        font:
-          13px/1.5 system-ui,
-          sans-serif;
+        font: 13px/1.5 var(--font-sans, system-ui, sans-serif);
         background: var(--df-bg, #111827);
         color: var(--df-fg, #e5e7eb);
       }

plugins/sdk/nyaterm.d.ts

@@ -9,6 +9,7 @@ type NyaTermJson =
 interface NyaTermPluginContext {
   pluginId: string;
   version: string;
+  /** Host CSS variables, including --font-sans, --font-display and --font-mono. */
   theme: Record<string, string>;
   language?: string;
   monitorIntervalSeconds?: number;

plugins/sdk/nyaterm.js

@@ -1,6 +1,14 @@
 /* NyaTerm Plugin UI SDK v1. Include this as a classic script before plugin code. */
 (() => {
   "use strict";
+  // A sandboxed document cannot inherit typography from the host. Keep these
+  // defaults easy for plugin styles to override, including code/monospace text.
+  const typography = document.createElement("style");
+  typography.textContent = `
+    :where(html) { font-family: var(--font-sans, system-ui, sans-serif); }
+    :where(button, input, select, textarea) { font-family: inherit; }
+  `;
+  document.head.prepend(typography);
   const pending = new Map();
   const contextListeners = new Set();
   const monitors = new Map();

plugins/templates/ui/index.html

@@ -7,7 +7,7 @@
     <style>
       body {
         margin: 16px;
-        font: 14px/1.5 system-ui;
+        font: 14px/1.5 var(--font-sans, system-ui, sans-serif);
         background: var(--df-bg, #111827);
         color: var(--df-fg, #e5e7eb);
       }