@ai-matrx/canvas 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.4.0
+
+- **`CanvasKind.Toolbar`** — a toolbar ROW between the pane header and the body, rendered for the active item only (a browser's back / forward / reload / address / screenshot / open in browser / new tab), so the header keeps just the tab strip and pane controls. Always DOM and never covered by a native view: a `body: "native"` frame is measured below it. A toolbar that throws renders nothing instead of taking the pane down. Requested by the desktop session.
+
+### Consumer action
+
+- Kinds that crammed a toolbar into `HeaderLeading` (the desktop browser) move it to `Toolbar`.
+
 ## 0.3.0
 
 - **Toggle or focus a kind** — what a toolbar icon or a quick-tool launcher does. `toggleKind(controller, { kind, key?, data?, title?, whenVisible? })`: absent → open and reveal; behind another tab or canvas put away → bring it forward; in front → close it (default) or put the canvas away (`whenVisible: "hide"`). `data` seeds only a new item. `selectCanvasKindVisibility(state, kind, key?)` returns `"absent" | "background" | "visible"` (a primitive — safe in useSyncExternalStore / useSelector), and the React hook `useCanvasKindToggle(input)` gives `{ visibility, isOpen, isVisible, toggle }` for an icon button's active state. Key defaults to `CANVAS_DEFAULT_KEY` ("default").

package/README.md

@@ -38,6 +38,11 @@ defineCanvasKind<{ sessionKey: string }>({
 
 `body: "native"` makes the body a placeholder whose frame the host receives (below).
 
+## A toolbar row under the header
+
+A kind's `Toolbar` renders between the pane header and its body for the active
+item (a browser bar). It is DOM, and a native body's frame is measured below it.
+
 ## Toolbar icons: toggle or focus a kind
 
 ```tsx

package/dist/react.cjs

@@ -2049,6 +2049,7 @@ function CanvasPaneView({ paneId }) {
   const kindProps = active && kind ? { item: active, data: active.data, paneId, isFocused: focused, canvas, windowId } : null;
   const Leading = kind?.HeaderLeading;
   const Action = kind?.HeaderAction;
+  const Toolbar = kind?.Toolbar;
   const single = tabStrip === "auto" && pane.itemIds.length === 1 && active;
   const hideDrop = () => {
     drop.current?.();
@@ -2075,7 +2076,7 @@ function CanvasPaneView({ paneId }) {
     canvas.moveItem(itemId, paneId);
   };
   const closeLabel = role === "pop-out" && paneCount === 1 ? "Close window" : paneCount > 1 ? "Close pane" : "Close canvas";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     CanvasPanel,
     {
       ref: sectionRef,
@@ -2100,15 +2101,30 @@ function CanvasPaneView({ paneId }) {
       onDragOver,
       onDragLeave,
       onDrop,
-      children: pane.itemIds.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Launcher, { paneId }) : pane.itemIds.map((itemId) => {
-        const item = items[itemId];
-        if (!item) return null;
-        const isActive = itemId === pane.activeItemId;
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ItemBody, { item, paneId, windowId, isActive, isFocused: focused && isActive, hasNativePort: !!ports.onNativeBodyFrame }, itemId);
-      })
+      children: [
+        Toolbar && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mxc-item-toolbar", "data-kind": active?.kind, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ToolbarBoundary, { kindId: kind?.id ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Toolbar, { ...kindProps }) }) }) : null,
+        pane.itemIds.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Launcher, { paneId }) : pane.itemIds.map((itemId) => {
+          const item = items[itemId];
+          if (!item) return null;
+          const isActive = itemId === pane.activeItemId;
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ItemBody, { item, paneId, windowId, isActive, isFocused: focused && isActive, hasNativePort: !!ports.onNativeBodyFrame }, itemId);
+        })
+      ]
     }
   );
 }
+var ToolbarBoundary = class extends import_react4.Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  componentDidCatch(error) {
+    console.error(`[@ai-matrx/canvas] "${this.props.kindId}" Toolbar threw`, error);
+  }
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+};
 function SingleTitle({ item, kind }) {
   const title = itemTitle(item, kind);
   const drag = useTabDrag(item.id, title);