@ai-matrx/canvas 0.2.1 → 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;
@@ -245,9 +255,17 @@ interface CanvasColumnProps {
     readonly placement?: "docked" | "fill";
 }
 declare function CanvasColumn({ className, style, onLiveWidth, placement }: CanvasColumnProps): react.JSX.Element | null;
-/** THE one button that opens and puts away the canvas (this window's). */
-declare function CanvasToggle({ className }: {
+/**
+ * THE one button that opens and puts away the canvas (this window's).
+ *
+ * `variant` follows the tap-target PLACEMENT RULES (all glass or none): a host
+ * whose header row is glass (a bar floating over scrolling content) passes
+ * `"glass"` so the toggle matches its neighbours; on a solid bar keep the
+ * default `"transparent"`.
+ */
+declare function CanvasToggle({ className, variant, }: {
     className?: string;
+    variant?: "glass" | "transparent";
 }): react.JSX.Element;
 /**
  * For hosts without their own shell (a Vite app, an Electron window): the app
@@ -364,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;
@@ -245,9 +255,17 @@ interface CanvasColumnProps {
     readonly placement?: "docked" | "fill";
 }
 declare function CanvasColumn({ className, style, onLiveWidth, placement }: CanvasColumnProps): react.JSX.Element | null;
-/** THE one button that opens and puts away the canvas (this window's). */
-declare function CanvasToggle({ className }: {
+/**
+ * THE one button that opens and puts away the canvas (this window's).
+ *
+ * `variant` follows the tap-target PLACEMENT RULES (all glass or none): a host
+ * whose header row is glass (a bar floating over scrolling content) passes
+ * `"glass"` so the toggle matches its neighbours; on a solid bar keep the
+ * default `"transparent"`.
+ */
+declare function CanvasToggle({ className, variant, }: {
     className?: string;
+    variant?: "glass" | "transparent";
 }): react.JSX.Element;
 /**
  * For hosts without their own shell (a Vite app, an Electron window): the app
@@ -364,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();
@@ -1536,7 +1585,7 @@ import {
   useState as useState4,
   useSyncExternalStore as useSyncExternalStore3
 } from "react";
-import { TapTargetButtonTransparent } from "@ai-matrx/tap-target";
+import { TapTargetButton, TapTargetButtonTransparent } from "@ai-matrx/tap-target";
 
 // src/react/CanvasPane.tsx
 import {
@@ -2477,14 +2526,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" ? TapTargetButton : TapTargetButtonTransparent;
   return /* @__PURE__ */ jsxs5("span", { className: ["mxc-toggle", className].filter(Boolean).join(" "), "data-open": isOpen ? "" : void 0, children: [
     /* @__PURE__ */ jsx6(
-      TapTargetButtonTransparent,
+      Button,
       {
         ariaLabel: isOpen ? "Hide canvas" : "Show canvas",
         tooltip: `${isOpen ? "Hide canvas" : "Show canvas"}${hint ? ` (${hint})` : ""}`,
@@ -2530,6 +2583,7 @@ export {
   useCanvasHostPorts,
   useCanvasIsPresented,
   useCanvasKind,
+  useCanvasKindToggle,
   useCanvasKinds,
   useCanvasNativeBodies,
   useCanvasState,