@protolabsai/ui 0.18.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "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,70 @@
+// @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.
+//
+// Two ways to use it (no build step required 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.
+
+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. */
+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));
+  }
+}
+
+function onMessage(e) {
+  const d = e && e.data;
+  if (!d || d.type !== "protoagent:init") return;
+  if (d.token) token = d.token;
+  applyTheme(d.theme);
+  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 every time the console (re)sends tokens/theme — e.g. on a live theme switch.
+ *  Returns a small 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 };
+}
+
+/** 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;
 }