@ai-matrx/canvas 0.2.2 → 0.3.0

package/dist/react.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentType, ReactNode, CSSProperties, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';
-import { D as CanvasRect, d as CanvasPaneId, C as CanvasItemId, a as CanvasWindowId, b as CanvasJson, i as CanvasItem, h as CanvasController, G as CanvasSessionEvent, E as CanvasSessionAttachReason, F as CanvasSessionDetachReason, e as CanvasStoreBinding, B as CanvasPersistencePort, v as CanvasErrorSink, x as CanvasLayoutRules, f as CanvasState } from './controller-Dv6J6XZm.cjs';
+import { F as CanvasRect, d as CanvasPaneId, C as CanvasItemId, a as CanvasWindowId, b as CanvasJson, i as CanvasItem, h as CanvasController, I as CanvasSessionEvent, G as CanvasSessionAttachReason, H as CanvasSessionDetachReason, e as CanvasStoreBinding, E as CanvasPersistencePort, w as CanvasErrorSink, z as CanvasLayoutRules, T as ToggleKindInput, y as CanvasKindVisibility, f as CanvasState } from './toggleKind-A9v45oSb.cjs';
 
 /** One floating thing. Plain data, so a host can draw it in another process. */
 type CanvasFloating = {
@@ -230,6 +230,16 @@ declare function useCanvasState<T>(selector: (state: CanvasState) => T): T;
  * embed). `fallback` must be referentially stable (a primitive or null).
  */
 declare function useOptionalCanvasState<T>(selector: (state: CanvasState) => T, fallback: T): T;
+/**
+ * A toolbar icon's view of one kind: "absent" | "background" | "visible"
+ * (a primitive, so it never loops), plus the click that toggles or focuses it.
+ */
+declare function useCanvasKindToggle(input: ToggleKindInput): {
+    readonly visibility: CanvasKindVisibility;
+    readonly isOpen: boolean;
+    readonly isVisible: boolean;
+    readonly toggle: () => CanvasKindVisibility;
+};
 /** Re-renders when kinds register, so late-registered kinds appear. */
 declare function useCanvasKinds(): readonly AnyCanvasKind[];
 declare function useCanvasKind(id: string): AnyCanvasKind | undefined;
@@ -372,4 +382,4 @@ interface BrowserBarProps {
 /** A browser's back · forward · reload · address bar, for a kind's leading slot or its body. */
 declare function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, trailing, className }: BrowserBarProps): react.JSX.Element;
 
-export { type AnyCanvasKind, BrowserBar, type BrowserBarProps, type BrowserTab, BrowserTabs, type BrowserTabsProps, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindProps, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, CanvasToggle, CanvasWindowScope, canvasSessionKey, defineCanvasKind, getCanvasKind, itemTitle, listCanvasKinds, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKinds, useCanvasNativeBodies, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };
+export { type AnyCanvasKind, BrowserBar, type BrowserBarProps, type BrowserTab, BrowserTabs, type BrowserTabsProps, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindProps, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, CanvasToggle, CanvasWindowScope, canvasSessionKey, defineCanvasKind, getCanvasKind, itemTitle, listCanvasKinds, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKindToggle, useCanvasKinds, useCanvasNativeBodies, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };

package/dist/react.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentType, ReactNode, CSSProperties, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';
-import { D as CanvasRect, d as CanvasPaneId, C as CanvasItemId, a as CanvasWindowId, b as CanvasJson, i as CanvasItem, h as CanvasController, G as CanvasSessionEvent, E as CanvasSessionAttachReason, F as CanvasSessionDetachReason, e as CanvasStoreBinding, B as CanvasPersistencePort, v as CanvasErrorSink, x as CanvasLayoutRules, f as CanvasState } from './controller-Dv6J6XZm.js';
+import { F as CanvasRect, d as CanvasPaneId, C as CanvasItemId, a as CanvasWindowId, b as CanvasJson, i as CanvasItem, h as CanvasController, I as CanvasSessionEvent, G as CanvasSessionAttachReason, H as CanvasSessionDetachReason, e as CanvasStoreBinding, E as CanvasPersistencePort, w as CanvasErrorSink, z as CanvasLayoutRules, T as ToggleKindInput, y as CanvasKindVisibility, f as CanvasState } from './toggleKind-A9v45oSb.js';
 
 /** One floating thing. Plain data, so a host can draw it in another process. */
 type CanvasFloating = {
@@ -230,6 +230,16 @@ declare function useCanvasState<T>(selector: (state: CanvasState) => T): T;
  * embed). `fallback` must be referentially stable (a primitive or null).
  */
 declare function useOptionalCanvasState<T>(selector: (state: CanvasState) => T, fallback: T): T;
+/**
+ * A toolbar icon's view of one kind: "absent" | "background" | "visible"
+ * (a primitive, so it never loops), plus the click that toggles or focuses it.
+ */
+declare function useCanvasKindToggle(input: ToggleKindInput): {
+    readonly visibility: CanvasKindVisibility;
+    readonly isOpen: boolean;
+    readonly isVisible: boolean;
+    readonly toggle: () => CanvasKindVisibility;
+};
 /** Re-renders when kinds register, so late-registered kinds appear. */
 declare function useCanvasKinds(): readonly AnyCanvasKind[];
 declare function useCanvasKind(id: string): AnyCanvasKind | undefined;
@@ -372,4 +382,4 @@ interface BrowserBarProps {
 /** A browser's back · forward · reload · address bar, for a kind's leading slot or its body. */
 declare function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, trailing, className }: BrowserBarProps): react.JSX.Element;
 
-export { type AnyCanvasKind, BrowserBar, type BrowserBarProps, type BrowserTab, BrowserTabs, type BrowserTabsProps, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindProps, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, CanvasToggle, CanvasWindowScope, canvasSessionKey, defineCanvasKind, getCanvasKind, itemTitle, listCanvasKinds, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKinds, useCanvasNativeBodies, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };
+export { type AnyCanvasKind, BrowserBar, type BrowserBarProps, type BrowserTab, BrowserTabs, type BrowserTabsProps, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindProps, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, CanvasToggle, CanvasWindowScope, canvasSessionKey, defineCanvasKind, getCanvasKind, itemTitle, listCanvasKinds, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKindToggle, useCanvasKinds, useCanvasNativeBodies, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };

package/dist/react.js

@@ -1220,6 +1220,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
 import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
@@ -1519,6 +1557,17 @@ function useOptionalCanvasState(selector, fallback) {
   const read = () => store ? selector(store.getState()) : fallback;
   return useSyncExternalStore2(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() {
   useSyncExternalStore2(subscribeCanvasKinds, getCanvasKindsVersion, getCanvasKindsVersion);
   return listCanvasKinds();
@@ -2534,6 +2583,7 @@ export {
   useCanvasHostPorts,
   useCanvasIsPresented,
   useCanvasKind,
+  useCanvasKindToggle,
   useCanvasKinds,
   useCanvasNativeBodies,
   useCanvasState,