@ai-matrx/canvas 0.2.2 → 0.4.0

package/dist/react.cjs

@@ -57,6 +57,7 @@ __export(react_exports, {
   useCanvasHostPorts: () => useCanvasHostPorts,
   useCanvasIsPresented: () => useCanvasIsPresented,
   useCanvasKind: () => useCanvasKind,
+  useCanvasKindToggle: () => useCanvasKindToggle,
   useCanvasKinds: () => useCanvasKinds,
   useCanvasNativeBodies: () => useCanvasNativeBodies,
   useCanvasState: () => useCanvasState,
@@ -1278,6 +1279,44 @@ function selectCanvasWindowItemCount(s, windowId) {
 }
 var NO_WINDOWS = Object.freeze({});
 
+// src/core/toggleKind.ts
+var CANVAS_DEFAULT_KEY = "default";
+function selectCanvasKindVisibility(state, kind, key = CANVAS_DEFAULT_KEY) {
+  const itemId = canvasItemId(kind, key);
+  if (!state.items[itemId]) return "absent";
+  const windowId = canvasWindowOfItem(state, itemId);
+  if (!windowId) return "background";
+  const isOpen = canvasWindowFrame(state, windowId)?.isOpen ?? false;
+  const pane = Object.values(state.panes).find((p) => p.itemIds.includes(itemId));
+  return isOpen && pane?.activeItemId === itemId ? "visible" : "background";
+}
+function toggleKind(controller, input) {
+  const key = input.key ?? CANVAS_DEFAULT_KEY;
+  const itemId = canvasItemId(input.kind, key);
+  const before = selectCanvasKindVisibility(controller.getState(), input.kind, key);
+  if (before === "visible") {
+    if ((input.whenVisible ?? "close") === "close") {
+      controller.close(itemId);
+    } else {
+      controller.hide(canvasWindowOfItem(controller.getState(), itemId) ?? void 0);
+    }
+    return selectCanvasKindVisibility(controller.getState(), input.kind, key);
+  }
+  if (before === "background") {
+    controller.open({ kind: input.kind, key });
+    const windowId = canvasWindowOfItem(controller.getState(), itemId);
+    if (windowId) controller.show(windowId);
+    return selectCanvasKindVisibility(controller.getState(), input.kind, key);
+  }
+  const opened = controller.open({
+    kind: input.kind,
+    key,
+    ...input.data !== void 0 ? { data: input.data } : {},
+    ...input.title !== void 0 ? { title: input.title } : {}
+  });
+  return opened ? selectCanvasKindVisibility(controller.getState(), input.kind, key) : "absent";
+}
+
 // src/react/layer.tsx
 var import_react = require("react");
 var import_react_dom = require("react-dom");
@@ -1577,6 +1616,17 @@ function useOptionalCanvasState(selector, fallback) {
   const read = () => store ? selector(store.getState()) : fallback;
   return (0, import_react2.useSyncExternalStore)(store ? store.subscribe : NO_SUBSCRIPTION, read, read);
 }
+function useCanvasKindToggle(input) {
+  const controller = useCanvasContext().controller;
+  const key = input.key ?? CANVAS_DEFAULT_KEY;
+  const visibility = useCanvasState((s) => selectCanvasKindVisibility(s, input.kind, key));
+  return {
+    visibility,
+    isOpen: visibility !== "absent",
+    isVisible: visibility === "visible",
+    toggle: () => toggleKind(controller, input)
+  };
+}
 function useCanvasKinds() {
   (0, import_react2.useSyncExternalStore)(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
   return listCanvasKinds();
@@ -1999,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?.();
@@ -2025,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,
@@ -2050,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);