@ai-matrx/canvas 0.2.0 → 0.2.2

package/dist/react.d.cts

@@ -245,9 +245,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

package/dist/react.d.ts

@@ -245,9 +245,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

package/dist/react.js

@@ -1536,7 +1536,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 +2477,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})` : ""}`,