@protolabsai/ui 0.17.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.17.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/AppShell.full.stories.tsx

@@ -46,6 +46,7 @@ export const Full: Story = {
       const [activeRight, setActiveRight] = useState("inbox");
       const [rightWidth, setRightWidth] = useState(360);
       const [collapsed, setCollapsed] = useState(false);
+      const [leftCollapsed, setLeftCollapsed] = useState(false);
       const leftItems = order.left.map((id) => BY_ID.get(id)!);
       const rightItems = order.right.map((id) => BY_ID.get(id)!);
       const mobile: MobileItem[] = [...LEFT, ...RIGHT].map((i) => ({ id: i.id, label: i.label, icon: i.icon }));
@@ -58,8 +59,10 @@ export const Full: Story = {
             activeLeft={activeLeft}
             activeRight={activeRight}
             onSelect={(side, id) => {
-              if (side === "left") setActiveLeft(id);
-              else {
+              if (side === "left") {
+                setActiveLeft(id);
+                setLeftCollapsed(false);
+              } else {
                 setActiveRight(id);
                 setCollapsed(false);
               }
@@ -68,9 +71,21 @@ export const Full: Story = {
             onRightWidthChange={setRightWidth}
             rightCollapsed={collapsed}
             onCollapse={setCollapsed}
+            leftCollapsed={leftCollapsed}
+            onLeftCollapse={setLeftCollapsed}
             leftContent={
               <>
-                <PanelHeader title={activeLeft} actions={<Button size="sm">Action</Button>} />
+                <PanelHeader
+                  title={activeLeft}
+                  actions={
+                    <>
+                      <Button size="sm">Action</Button>
+                      <Button size="sm" variant="ghost" onClick={() => setLeftCollapsed(true)}>
+                        Close
+                      </Button>
+                    </>
+                  }
+                />
                 {surfaceBody(activeLeft)}
               </>
             }

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/app-shell.tsx

@@ -274,6 +274,14 @@ export type AppShellProps = {
   onCollapse?: (collapsed: boolean) => void;
   minRightWidth?: number;
   maxRightWidth?: number;
+  /** Controlled left-column collapse — drives the left close button and the
+   *  overdrag-left snap. Mirrors `rightCollapsed`/`onCollapse`. */
+  leftCollapsed?: boolean;
+  onLeftCollapse?: (collapsed: boolean) => void;
+  /** Min left-column width (px). The single divider holds the left column here
+   *  on the way in; dragging `OVERDRAG` px further snaps the left column closed
+   *  (it stays `leftCollapsed` until the host restores it). */
+  minLeftWidth?: number;
   /** Mobile (<breakpoint) config. Omit to disable the mobile shell. */
   mobileItems?: MobileItem[];
   mobileActiveId?: string;
@@ -309,6 +317,9 @@ export function AppShell({
   onCollapse,
   minRightWidth = 280,
   maxRightWidth = 720,
+  leftCollapsed = false,
+  onLeftCollapse,
+  minLeftWidth = 280,
   mobileItems,
   mobileActiveId,
   onMobileSelect,
@@ -321,25 +332,54 @@ export function AppShell({
   const isMobile = useIsMobile(mobileBreakpoint);
 
   // ── resize handle ──
-  const drag = useRef<{ startX: number; startW: number } | null>(null);
-  const clamp = useCallback(
-    (w: number) => Math.min(maxRightWidth, Math.max(minRightWidth, w)),
-    [minRightWidth, maxRightWidth],
+  // One divider, zero-sum: the right column is width-controlled and the left
+  // flexes to fill, so dragging grows one column as it shrinks the other. Each
+  // side is held at its min on the way in; OVERDRAG px past that min snaps that
+  // side closed (collapse is controlled — the host restores it).
+  const OVERDRAG = 64;
+  const leftColRef = useRef<HTMLElement | null>(null);
+  const drag = useRef<{ startX: number; startW: number; startLeftW: number } | null>(null);
+  /** Resize `rightWidth` to `raw` px, holding both columns at their minimums. */
+  const commit = useCallback(
+    (raw: number, startLeftW: number, startW: number) => {
+      const upper = Math.max(minRightWidth, Math.min(maxRightWidth, startLeftW + startW - minLeftWidth));
+      onRightWidthChange(Math.min(upper, Math.max(minRightWidth, raw)));
+    },
+    [minRightWidth, maxRightWidth, minLeftWidth, onRightWidthChange],
   );
   const onPointerDown = useCallback(
     (e: ReactPointerEvent<HTMLDivElement>) => {
       e.preventDefault();
-      drag.current = { startX: e.clientX, startW: rightWidth };
+      drag.current = { startX: e.clientX, startW: rightWidth, startLeftW: leftColRef.current?.clientWidth ?? 0 };
       e.currentTarget.setPointerCapture(e.pointerId);
     },
     [rightWidth],
   );
   const onPointerMove = useCallback(
     (e: ReactPointerEvent<HTMLDivElement>) => {
-      if (!drag.current) return;
-      onRightWidthChange(clamp(drag.current.startW + (drag.current.startX - e.clientX)));
+      const d = drag.current;
+      if (!d) return;
+      const raw = d.startW + (d.startX - e.clientX);
+      const predictedLeft = d.startLeftW - (raw - d.startW);
+      const endDrag = () => {
+        drag.current = null;
+        e.currentTarget.releasePointerCapture?.(e.pointerId);
+      };
+      // Overdrag toward the right rail → snap the right column closed.
+      if (onCollapse && raw < minRightWidth - OVERDRAG) {
+        endDrag();
+        onCollapse(true);
+        return;
+      }
+      // Overdrag toward the left rail → snap the left column closed.
+      if (onLeftCollapse && predictedLeft < minLeftWidth - OVERDRAG) {
+        endDrag();
+        onLeftCollapse(true);
+        return;
+      }
+      commit(raw, d.startLeftW, d.startW);
     },
-    [clamp, onRightWidthChange],
+    [minRightWidth, minLeftWidth, onCollapse, onLeftCollapse, commit],
   );
   const onPointerUp = useCallback((e: ReactPointerEvent<HTMLDivElement>) => {
     drag.current = null;
@@ -347,16 +387,14 @@ export function AppShell({
   }, []);
   const onKeyDown = useCallback(
     (e: ReactKeyboardEvent<HTMLDivElement>) => {
+      if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+      e.preventDefault();
       const step = e.shiftKey ? 48 : 16;
-      if (e.key === "ArrowLeft") {
-        e.preventDefault();
-        onRightWidthChange(clamp(rightWidth + step));
-      } else if (e.key === "ArrowRight") {
-        e.preventDefault();
-        onRightWidthChange(clamp(rightWidth - step));
-      }
+      const startLeftW = leftColRef.current?.clientWidth ?? 0;
+      // ArrowLeft grows the right column (shrinks the left); ArrowRight reverses.
+      commit(rightWidth + (e.key === "ArrowLeft" ? step : -step), startLeftW, rightWidth);
     },
-    [rightWidth, clamp, onRightWidthChange],
+    [rightWidth, commit],
   );
 
   // ── rail drag-and-drop (only when onRailReorder is provided) ──
@@ -450,6 +488,8 @@ export function AppShell({
   }
 
   const showRight = !rightCollapsed && rightItems.length > 0;
+  const showLeft = !leftCollapsed;
+  const showHandle = showLeft && showRight;
   const ctxLeft = onRailContextMenu ? (e: ReactMouseEvent, id: string) => onRailContextMenu("left", e, id) : undefined;
   const ctxRight = onRailContextMenu ? (e: ReactMouseEvent, id: string) => onRailContextMenu("right", e, id) : undefined;
 
@@ -458,16 +498,21 @@ export function AppShell({
       {header != null && <div className="pl-appshell__header">{header}</div>}
       <div className="pl-appshell">
         {leftRail}
-        <main className="pl-appshell__col pl-appshell__col--left">{leftContent}</main>
-        {showRight && (
+        {showLeft && (
+          <main ref={leftColRef} className="pl-appshell__col pl-appshell__col--left">
+            {leftContent}
+          </main>
+        )}
+        {showHandle && (
           <div
             className="pl-appshell__handle"
             role="separator"
             aria-orientation="vertical"
-            aria-label="Resize right panel"
+            aria-label="Resize panels"
             aria-valuenow={rightWidth}
             aria-valuemin={minRightWidth}
             aria-valuemax={maxRightWidth}
+            aria-valuetext={`Right panel ${rightWidth}px`}
             tabIndex={0}
             onPointerDown={onPointerDown}
             onPointerMove={onPointerMove}
@@ -478,8 +523,8 @@ export function AppShell({
         )}
         {showRight && (
           <aside
-            className="pl-appshell__col pl-appshell__col--right"
-            style={{ flex: `0 0 ${rightWidth}px`, width: rightWidth }}
+            className={cx("pl-appshell__col pl-appshell__col--right", !showLeft && "pl-appshell__col--fill")}
+            style={showLeft ? { flex: `0 0 ${rightWidth}px`, width: rightWidth } : undefined}
           >
             {rightContent}
           </aside>

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/app-shell.css

@@ -222,6 +222,13 @@
   border-left: var(--pl-border-width) solid var(--pl-color-border);
 }
 
+/* When the left column is collapsed, the surviving column fills the stage
+   (no fixed width, no divider) instead of sitting at its controlled width. */
+.pl-appshell__col--fill {
+  flex: 1 1 auto;
+  border-left: none;
+}
+
 .pl-appshell__handle {
   flex: 0 0 auto;
   width: 5px;

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;
 }