@protolabsai/ui 0.19.0 → 0.19.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/plugin-kit.js

@@ -1,32 +1,62 @@
-// @protolabsai/ui/plugin-kit — the ADR 0026 console handshake for protoAgent
-// plugin iframe pages. Replaces the broken substring stub that shipped copy-pasted
-// across plugins (it only mapped bg/accent onto private vars and dropped every other
-// token). This applies the console's FULL --pl-* theme bundle to :root and captures
-// the bearer token for same-origin API calls.
+// @protolabsai/ui/plugin-kit — the protoAgent console handshake for plugin iframe
+// pages, wired to the DS. The console (protoAgent ADR 0038 theming bridge) posts a
+// CURATED theme — `{ bg, bgPanel, fg, fgMuted, brand, border }`, read from the
+// console's own CSS vars — NOT the full --pl-* set. This bridges those six keys onto
+// the --pl-* tokens that plugin-kit.css components consume, so the DS components
+// re-skin to the operator's live theme. The rest of the --pl-* tokens keep the kit's
+// (coherent dark) defaults. See protoAgent docs/guides/plugin-views.md +
+// examples/plugins/chat_example.
 //
-// Two ways to use it (no build step required for either):
+// Two ways to use it (no build step for either):
 //   1. <script type="module">: import { initPluginView } from ".../plugin-kit.js"
 //   2. classic <script src=".../plugin-kit.js">: use the window.protoPluginView global
-// Or just inline the snippet from docs/how-to/build-a-plugin-view.md.
+// Or inline the snippet from docs/how-to/build-a-plugin-view.md.
+
+// Curated console key → the --pl-* token(s) the DS components actually read.
+const TOKEN_MAP = {
+  bg: ["--pl-color-bg"],
+  bgPanel: ["--pl-color-bg-raised", "--pl-color-bg-subtle"],
+  fg: ["--pl-color-fg"],
+  fgMuted: ["--pl-color-fg-muted"],
+  brand: ["--pl-color-accent"], // components key off --pl-color-accent (== brand lavender)
+  border: ["--pl-color-border"],
+};
 
 let token = null;
 const listeners = new Set();
 
-/** Apply only DS custom properties from a theme map to :root — a stray key can
- *  never set an arbitrary CSS property. */
+/** Map the console's curated theme onto the DS --pl-* tokens on :root. Also passes
+ *  through any key already in --pl-* form, so a future console that sends raw tokens
+ *  Just Works. Unknown keys are ignored — a plugin page can never set an arbitrary
+ *  CSS property this way. */
 function applyTheme(theme) {
   if (!theme || typeof theme !== "object") return;
   const root = document.documentElement;
-  for (const [k, v] of Object.entries(theme)) {
-    if (k.startsWith("--pl-")) root.style.setProperty(k, String(v));
+  for (const [key, value] of Object.entries(theme)) {
+    if (value == null || value === "") continue;
+    const v = String(value);
+    if (key.startsWith("--pl-")) {
+      root.style.setProperty(key, v);
+      continue;
+    }
+    const targets = TOKEN_MAP[key];
+    if (targets) for (const cssVar of targets) root.style.setProperty(cssVar, v);
   }
 }
 
 function onMessage(e) {
   const d = e && e.data;
-  if (!d || d.type !== "protoagent:init") return;
-  if (d.token) token = d.token;
-  applyTheme(d.theme);
+  if (!d) return;
+  // `protoagent:init` carries token + theme (after iframe load); `protoagent:theme`
+  // is the live re-theme on an operator theme switch.
+  if (d.type === "protoagent:init") {
+    if (d.token) token = d.token;
+    applyTheme(d.theme);
+  } else if (d.type === "protoagent:theme") {
+    applyTheme(d.theme);
+  } else {
+    return;
+  }
   for (const fn of listeners) {
     try {
       fn({ token, theme: d.theme });
@@ -37,17 +67,11 @@ function onMessage(e) {
 }
 
 /** Start listening for the console handshake. Call once on load. `onInit` (optional)
- *  fires every time the console (re)sends tokens/theme — e.g. on a live theme switch.
- *  Returns a small handle with the current token. */
+ *  fires on the initial bearer+theme AND on every live re-theme. Returns a handle
+ *  with the current token. */
 export function initPluginView(onInit) {
   if (typeof onInit === "function") listeners.add(onInit);
   window.addEventListener("message", onMessage);
-  // Announce readiness so a console that waits for it sends the init eagerly.
-  try {
-    window.parent && window.parent.postMessage({ type: "protoagent:ready" }, "*");
-  } catch (_) {
-    /* sandboxed / no parent */
-  }
   return { getToken };
 }