@volter/teams 0.1.36 → 0.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volter/teams",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "type": "module",
   "description": "Volter Teams, the neutral team plane: machine identity and daemon core, the local door and server link, admission from machine grants, product doors, and the Teams server's neutral routes (company RFC 0008).",
   "license": "MIT",

package/viewer/index.html

@@ -18,7 +18,7 @@
   #status { padding: 4px 10px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }
   #status:empty { display: none; }
   main { flex: 1; min-height: 0; display: flex; }
-  #terminal { flex: 1; min-width: 0; padding: 4px; }
+  #terminal { flex: 1; min-width: 0; padding: 4px; color-scheme: light dark; background: var(--volter-terminal-background); }
   #folder { flex: 1; min-width: 0; display: none; }
   #folder.open { display: flex; }
   #entries { width: 280px; flex: none; border-right: 1px solid var(--line); overflow: auto; }

package/viewer/viewer.mjs

@@ -61,12 +61,37 @@ function useLayout(layout) {
   const rows = layout === 'rows';
   $('session').classList.toggle('layout-rows', rows);
   if (rows && !document.getElementById('brand-tokens')) {
-    const link = Object.assign(document.createElement('link'), { id: 'brand-tokens', rel: 'stylesheet', href: 'https://brand.volter.ai/tokens.css' });
-    document.head.append(link);
+    brandTokens();
     // A chat's rows are light unless the host's theme names a scheme.
     if (!themed) document.documentElement.style.setProperty('--scui-color-scheme', 'light');
   }
 }
+// The brand's tokens stylesheet, loaded once; resolves when it has loaded (or failed to).
+let brandLoaded = null;
+function brandTokens() {
+  if (brandLoaded) return brandLoaded;
+  const link = Object.assign(document.createElement('link'), { id: 'brand-tokens', rel: 'stylesheet', href: 'https://brand.volter.ai/tokens.css' });
+  brandLoaded = new Promise((resolve) => { link.onload = link.onerror = resolve; });
+  document.head.append(link);
+  return brandLoaded;
+}
+// A pane looks like Terminal.app's Basic profile: the brand's terminal roles, resolved on the terminal element, which
+// (like Terminal.app) follows the system's appearance. xterm takes concrete values, so each is read through a probe.
+const TERMINAL_SLOTS = { background: 'background', foreground: 'foreground', cursor: 'cursor', selectionBackground: 'selection', black: 'black', red: 'red', green: 'green', yellow: 'yellow', blue: 'blue', magenta: 'magenta', cyan: 'cyan', white: 'white', brightBlack: 'bright-black', brightRed: 'bright-red', brightGreen: 'bright-green', brightYellow: 'bright-yellow', brightBlue: 'bright-blue', brightMagenta: 'bright-magenta', brightCyan: 'bright-cyan', brightWhite: 'bright-white' };
+function terminalLook(element) {
+  const probe = document.createElement('span');
+  probe.hidden = true;
+  element.append(probe);
+  const theme = {};
+  for (const [slot, role] of Object.entries(TERMINAL_SLOTS)) {
+    probe.style.color = `var(--volter-terminal-${role})`;
+    theme[slot] = getComputedStyle(probe).color;
+  }
+  probe.style.font = 'var(--volter-font-size-terminal, 11px) var(--volter-font-terminal, ui-monospace, Menlo, monospace)';
+  const { fontFamily, fontSize } = getComputedStyle(probe);
+  probe.remove();
+  return { fontFamily, fontSize: Number.parseFloat(fontSize), theme };
+}
 // A fragment value that is base64url JSON (UTF-8), or null.
 function fragmentJson(name) {
   try {
@@ -189,9 +214,10 @@ async function showPane(connect, key, control) {
     import('https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/+esm'),
     import('https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/+esm'),
   ]);
+  await brandTokens();
   const element = $('terminal');
   element.hidden = false;
-  const terminal = new Terminal({ cursorBlink: control, disableStdin: !control, fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 13, scrollback: 5000, theme: { background: '#0b0d10' } });
+  const terminal = new Terminal({ disableStdin: !control, scrollback: 5000, ...terminalLook(element) });
   const fit = new FitAddon();
   terminal.loadAddon(fit);
   terminal.open(element);