@protolabsai/ui 0.18.0 → 0.19.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.18.0",
+  "version": "0.19.1",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -22,10 +22,13 @@
     "./menu": "./src/menu.tsx",
     "./app-shell": "./src/app-shell.tsx",
     "./theming": "./src/theming.tsx",
-    "./styles.css": "./src/styles.css"
+    "./styles.css": "./src/styles.css",
+    "./plugin-kit.css": "./dist/plugin-kit.css",
+    "./plugin-kit.js": "./src/plugin-kit.js"
   },
   "files": [
-    "src"
+    "src",
+    "dist"
   ],
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -54,6 +57,8 @@
     "vite": "^6.0.0"
   },
   "scripts": {
+    "build": "node scripts/build-plugin-kit.mjs",
+    "build:plugin-kit": "node scripts/build-plugin-kit.mjs",
     "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build -o storybook-static",
     "typecheck": "tsc --noEmit"

package/src/ThemePanel.stories.tsx

@@ -47,7 +47,10 @@ function Sample() {
 export const LiveEditor: Story = {
   render: () => (
     <div style={{ display: "flex", gap: 24, alignItems: "flex-start", padding: 24, flexWrap: "wrap" }}>
-      <ThemePanel />
+      {/* The panel fills its container — the host sizes it (here a 400×560 box). */}
+      <div style={{ width: 400, height: 560 }}>
+        <ThemePanel />
+      </div>
       <div style={{ flex: "1 1 360px" }}>
         <Sample />
       </div>

package/src/plugin-kit.js

@@ -0,0 +1,94 @@
+// @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 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 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();
+
+/** 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 [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) 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 });
+    } catch (_) {
+      /* a listener throwing must not break the handshake */
+    }
+  }
+}
+
+/** Start listening for the console handshake. Call once on load. `onInit` (optional)
+ *  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);
+  return { getToken };
+}
+
+/** The captured bearer token (null until the handshake delivers one). */
+export function getToken() {
+  return token;
+}
+
+/** Same-origin fetch with the bearer token attached when present. */
+export function apiFetch(input, init) {
+  const opts = init || {};
+  const headers = new Headers(opts.headers || {});
+  if (token) headers.set("Authorization", "Bearer " + token);
+  return fetch(input, { ...opts, headers });
+}
+
+// Expose a global for classic <script src> (no-build) pages that can't use imports.
+if (typeof window !== "undefined") {
+  window.protoPluginView = { initPluginView, getToken, apiFetch };
+}

package/src/styles/theming.css

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: 440px;
+  height: 100%;
   color: var(--pl-color-fg);
   font-size: 13px;
   background: var(--pl-color-bg-raised);
@@ -71,8 +71,9 @@
 .pl-theme-panel__groups {
   display: flex;
   flex-direction: column;
+  flex: 1;
+  min-height: 0;
   gap: var(--pl-space-4);
-  max-height: 460px;
   padding: var(--pl-space-3);
   overflow-y: auto;
 }