@ai-matrx/canvas 0.3.0 → 0.4.0

package/dist/react.d.cts

@@ -133,6 +133,13 @@ interface CanvasKind<TData extends CanvasJson = CanvasJson> {
     readonly HeaderLeading?: ComponentType<CanvasKindProps<TData>>;
     /** The kind's own button, rendered left of the pane's "…" menu. */
     readonly HeaderAction?: ComponentType<CanvasKindProps<TData>>;
+    /**
+     * A toolbar ROW between the pane header and the body, for the active item
+     * only (a browser's back / forward / reload / address / screenshot). Always
+     * DOM, never covered by a native view: a `body: "native"` frame is measured
+     * BELOW it.
+     */
+    readonly Toolbar?: ComponentType<CanvasKindProps<TData>>;
     /** Kind-specific entries for the pane's "…" menu. */
     readonly menuItems?: (props: CanvasKindProps<TData>) => readonly CanvasMenuItem[];
 }

package/dist/react.d.ts

@@ -133,6 +133,13 @@ interface CanvasKind<TData extends CanvasJson = CanvasJson> {
     readonly HeaderLeading?: ComponentType<CanvasKindProps<TData>>;
     /** The kind's own button, rendered left of the pane's "…" menu. */
     readonly HeaderAction?: ComponentType<CanvasKindProps<TData>>;
+    /**
+     * A toolbar ROW between the pane header and the body, for the active item
+     * only (a browser's back / forward / reload / address / screenshot). Always
+     * DOM, never covered by a native view: a `body: "native"` frame is measured
+     * BELOW it.
+     */
+    readonly Toolbar?: ComponentType<CanvasKindProps<TData>>;
     /** Kind-specific entries for the pane's "…" menu. */
     readonly menuItems?: (props: CanvasKindProps<TData>) => readonly CanvasMenuItem[];
 }

package/dist/react.js

@@ -2008,6 +2008,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?.();
@@ -2034,7 +2035,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__ */ jsx5(
+  return /* @__PURE__ */ jsxs4(
     CanvasPanel,
     {
       ref: sectionRef,
@@ -2059,15 +2060,30 @@ function CanvasPaneView({ paneId }) {
       onDragOver,
       onDragLeave,
       onDrop,
-      children: pane.itemIds.length === 0 ? /* @__PURE__ */ jsx5(Launcher, { paneId }) : pane.itemIds.map((itemId) => {
-        const item = items[itemId];
-        if (!item) return null;
-        const isActive = itemId === pane.activeItemId;
-        return /* @__PURE__ */ jsx5(ItemBody, { item, paneId, windowId, isActive, isFocused: focused && isActive, hasNativePort: !!ports.onNativeBodyFrame }, itemId);
-      })
+      children: [
+        Toolbar && kindProps ? /* @__PURE__ */ jsx5("div", { className: "mxc-item-toolbar", "data-kind": active?.kind, children: /* @__PURE__ */ jsx5(ToolbarBoundary, { kindId: kind?.id ?? "", children: /* @__PURE__ */ jsx5(Toolbar, { ...kindProps }) }) }) : null,
+        pane.itemIds.length === 0 ? /* @__PURE__ */ jsx5(Launcher, { paneId }) : pane.itemIds.map((itemId) => {
+          const item = items[itemId];
+          if (!item) return null;
+          const isActive = itemId === pane.activeItemId;
+          return /* @__PURE__ */ jsx5(ItemBody, { item, paneId, windowId, isActive, isFocused: focused && isActive, hasNativePort: !!ports.onNativeBodyFrame }, itemId);
+        })
+      ]
     }
   );
 }
+var ToolbarBoundary = class extends 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);