@ai-matrx/canvas 0.2.1 → 0.3.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();
@@ -2517,14 +2567,18 @@ function SplitChild({ size, handle, children }) {
   ] });
 }
 var isMac2 = () => typeof navigator !== "undefined" && /mac|iphone|ipad/i.test(navigator.platform ?? "");
-function CanvasToggle({ className }) {
+function CanvasToggle({
+  className,
+  variant = "transparent"
+}) {
   const { controller, windowId } = useCanvasInternals();
   const isOpen = useCanvasState((s) => selectCanvasIsOpen(s, windowId));
   const count = useCanvasState((s) => selectCanvasWindowItemCount(s, windowId));
   const hint = canvasShortcutHint("canvas.toggle", isMac2());
+  const Button = variant === "glass" ? import_tap_target.TapTargetButton : import_tap_target.TapTargetButtonTransparent;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: ["mxc-toggle", className].filter(Boolean).join(" "), "data-open": isOpen ? "" : void 0, children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_tap_target.TapTargetButtonTransparent,
+      Button,
       {
         ariaLabel: isOpen ? "Hide canvas" : "Show canvas",
         tooltip: `${isOpen ? "Hide canvas" : "Show canvas"}${hint ? ` (${hint})` : ""}`,