@ai-matrx/canvas 0.10.36 → 0.10.37

package/dist/react.d.cts

@@ -323,6 +323,14 @@ interface CanvasHostPorts {
     readonly output?: CanvasOutputPorts | undefined;
 }
 type CanvasTabStripMode = "auto" | "always";
+/**
+ * How panes are drawn. "card" (default): rounded cards on the column's frame, the header a
+ * compact strip (Claude desktop / Codex). "mac": a macOS window section — no card, the column
+ * flush to the window's edge behind one hairline, each pane's header a unified-toolbar band
+ * (the title centred in bold with its proxy icon, or the kind's Toolbar in its place, as Safari's
+ * address bar is), and two or more tabs in a tab bar under it (Terminal, Finder, Safari).
+ */
+type CanvasLook = "card" | "mac";
 /**
  * One contextual launcher entry: a page offers something about ITSELF in the
  * canvas's "New tab" launcher ("This chat's documents" on a chat page) for as
@@ -356,8 +364,10 @@ interface CanvasProviderProps extends CanvasHostPorts {
     readonly regionWidth?: number | null;
     /** "auto": a pane with one tab shows a title instead of a tab strip. Default "auto". */
     readonly tabStrip?: CanvasTabStripMode;
+    /** "mac": panes are macOS window sections (see CanvasLook). Default "card". */
+    readonly look?: CanvasLook;
 }
-declare function CanvasProvider({ children, store, persistence, onError, hotkeys, windowId: windowIdProp, layoutRules, regionWidth, tabStrip, itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame, output, }: CanvasProviderProps): react.JSX.Element;
+declare function CanvasProvider({ children, store, persistence, onError, hotkeys, windowId: windowIdProp, layoutRules, regionWidth, tabStrip, look, itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame, output, }: CanvasProviderProps): react.JSX.Element;
 /**
  * Renders a subtree as ANOTHER window of the same canvas — the web host's
  * pop-out panel: `<CanvasWindowScope windowId={id}><CanvasColumn placement="fill"/></CanvasWindowScope>`.
@@ -652,4 +662,4 @@ interface BrowserBarProps {
  */
 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, CANVAS_TAB_LIST_ROOM, CANVAS_TAB_MIN_WIDTH, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindIcon, CanvasKindIcons, type CanvasKindProps, type CanvasKindSurface, type CanvasLauncherEntry, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOutputHandlers, type CanvasOutputPorts, type CanvasOutputRequest, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, type CanvasStripEntry, type CanvasStripTab, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, type CanvasTabWindow, CanvasToggle, CanvasWindowScope, CanvasWindowTabs, beginCanvasResize, canvasItemElement, canvasKindOutputProblems, canvasKindSurface, canvasOutputMenu, canvasSessionKey, defineCanvasKind, fitCanvasTabWindow, getCanvasKind, itemTitle, listCanvasKinds, planCanvasTabStrip, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKindToggle, useCanvasKinds, useCanvasLauncherEntries, useCanvasLauncherEntry, useCanvasMenuItems, useCanvasNativeBodies, useCanvasOutput, useCanvasPresentation, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };
+export { type AnyCanvasKind, BrowserBar, type BrowserBarProps, type BrowserTab, BrowserTabs, type BrowserTabsProps, CANVAS_TAB_LIST_ROOM, CANVAS_TAB_MIN_WIDTH, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindIcon, CanvasKindIcons, type CanvasKindProps, type CanvasKindSurface, type CanvasLauncherEntry, type CanvasLook, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOutputHandlers, type CanvasOutputPorts, type CanvasOutputRequest, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, type CanvasStripEntry, type CanvasStripTab, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, type CanvasTabWindow, CanvasToggle, CanvasWindowScope, CanvasWindowTabs, beginCanvasResize, canvasItemElement, canvasKindOutputProblems, canvasKindSurface, canvasOutputMenu, canvasSessionKey, defineCanvasKind, fitCanvasTabWindow, getCanvasKind, itemTitle, listCanvasKinds, planCanvasTabStrip, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKindToggle, useCanvasKinds, useCanvasLauncherEntries, useCanvasLauncherEntry, useCanvasMenuItems, useCanvasNativeBodies, useCanvasOutput, useCanvasPresentation, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };

package/dist/react.d.ts

@@ -323,6 +323,14 @@ interface CanvasHostPorts {
     readonly output?: CanvasOutputPorts | undefined;
 }
 type CanvasTabStripMode = "auto" | "always";
+/**
+ * How panes are drawn. "card" (default): rounded cards on the column's frame, the header a
+ * compact strip (Claude desktop / Codex). "mac": a macOS window section — no card, the column
+ * flush to the window's edge behind one hairline, each pane's header a unified-toolbar band
+ * (the title centred in bold with its proxy icon, or the kind's Toolbar in its place, as Safari's
+ * address bar is), and two or more tabs in a tab bar under it (Terminal, Finder, Safari).
+ */
+type CanvasLook = "card" | "mac";
 /**
  * One contextual launcher entry: a page offers something about ITSELF in the
  * canvas's "New tab" launcher ("This chat's documents" on a chat page) for as
@@ -356,8 +364,10 @@ interface CanvasProviderProps extends CanvasHostPorts {
     readonly regionWidth?: number | null;
     /** "auto": a pane with one tab shows a title instead of a tab strip. Default "auto". */
     readonly tabStrip?: CanvasTabStripMode;
+    /** "mac": panes are macOS window sections (see CanvasLook). Default "card". */
+    readonly look?: CanvasLook;
 }
-declare function CanvasProvider({ children, store, persistence, onError, hotkeys, windowId: windowIdProp, layoutRules, regionWidth, tabStrip, itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame, output, }: CanvasProviderProps): react.JSX.Element;
+declare function CanvasProvider({ children, store, persistence, onError, hotkeys, windowId: windowIdProp, layoutRules, regionWidth, tabStrip, look, itemActions, popOut, dockBack, showMenu, overlay, onNativeBodyFrame, output, }: CanvasProviderProps): react.JSX.Element;
 /**
  * Renders a subtree as ANOTHER window of the same canvas — the web host's
  * pop-out panel: `<CanvasWindowScope windowId={id}><CanvasColumn placement="fill"/></CanvasWindowScope>`.
@@ -652,4 +662,4 @@ interface BrowserBarProps {
  */
 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, CANVAS_TAB_LIST_ROOM, CANVAS_TAB_MIN_WIDTH, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindIcon, CanvasKindIcons, type CanvasKindProps, type CanvasKindSurface, type CanvasLauncherEntry, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOutputHandlers, type CanvasOutputPorts, type CanvasOutputRequest, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, type CanvasStripEntry, type CanvasStripTab, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, type CanvasTabWindow, CanvasToggle, CanvasWindowScope, CanvasWindowTabs, beginCanvasResize, canvasItemElement, canvasKindOutputProblems, canvasKindSurface, canvasOutputMenu, canvasSessionKey, defineCanvasKind, fitCanvasTabWindow, getCanvasKind, itemTitle, listCanvasKinds, planCanvasTabStrip, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKindToggle, useCanvasKinds, useCanvasLauncherEntries, useCanvasLauncherEntry, useCanvasMenuItems, useCanvasNativeBodies, useCanvasOutput, useCanvasPresentation, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };
+export { type AnyCanvasKind, BrowserBar, type BrowserBarProps, type BrowserTab, BrowserTabs, type BrowserTabsProps, CANVAS_TAB_LIST_ROOM, CANVAS_TAB_MIN_WIDTH, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindIcon, CanvasKindIcons, type CanvasKindProps, type CanvasKindSurface, type CanvasLauncherEntry, type CanvasLook, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOutputHandlers, type CanvasOutputPorts, type CanvasOutputRequest, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, type CanvasStripEntry, type CanvasStripTab, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, type CanvasTabWindow, CanvasToggle, CanvasWindowScope, CanvasWindowTabs, beginCanvasResize, canvasItemElement, canvasKindOutputProblems, canvasKindSurface, canvasOutputMenu, canvasSessionKey, defineCanvasKind, fitCanvasTabWindow, getCanvasKind, itemTitle, listCanvasKinds, planCanvasTabStrip, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKindToggle, useCanvasKinds, useCanvasLauncherEntries, useCanvasLauncherEntry, useCanvasMenuItems, useCanvasNativeBodies, useCanvasOutput, useCanvasPresentation, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };

package/dist/react.js

@@ -1999,6 +1999,7 @@ function CanvasProvider({
   layoutRules,
   regionWidth = null,
   tabStrip = "auto",
+  look = "card",
   itemActions,
   popOut,
   dockBack,
@@ -2055,8 +2056,8 @@ function CanvasProvider({
     return () => window.removeEventListener("keydown", onKey);
   }, [controller, hotkeys, windowId]);
   const value = useMemo(
-    () => ({ controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip, launcherEntries, itemMenus, itemOutputs }),
-    [controller, windowId, hostPorts, layer, regionWidth, tabStrip, launcherEntries, itemMenus, itemOutputs]
+    () => ({ controller, windowId, ports: hostPorts, layer, regionWidth, tabStrip, look, launcherEntries, itemMenus, itemOutputs }),
+    [controller, windowId, hostPorts, layer, regionWidth, tabStrip, look, launcherEntries, itemMenus, itemOutputs]
   );
   return /* @__PURE__ */ jsxs(CanvasContext.Provider, { value, children: [
     children,
@@ -3291,7 +3292,8 @@ function parseWindowTabs(signature) {
 }
 function CanvasPaneView({ paneId }) {
   const canvas = useCanvas();
-  const { windowId, tabStrip } = useCanvasInternals();
+  const { windowId, tabStrip, look } = useCanvasInternals();
+  const mac = look === "mac";
   const columnSlots = useCanvasSlots();
   const [ownSlots] = useState5(createCanvasSlots);
   const slots = columnSlots ?? ownSlots;
@@ -3333,6 +3335,34 @@ function CanvasPaneView({ paneId }) {
   const tabs = singlePane ? parseWindowTabs(windowTabs) : pane.itemIds.map((itemId, index) => ({ itemId, paneId, index }));
   const single = tabStrip === "auto" && tabs.length === 1 && active;
   const closeLabel = role === "pop-out" && paneCount === 1 ? "Close window" : paneCount > 1 ? "Close pane" : "Close canvas";
+  const newTab = inWindowStrip ? null : /* @__PURE__ */ jsx7(CanvasHeaderButton, { className: "mxc-new-tab", label: "New tab", onClick: () => void canvas.newTab(paneId), children: /* @__PURE__ */ jsx7(PlusIcon, {}) });
+  const history = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    canGoBack && active ? /* @__PURE__ */ jsx7(CanvasHeaderButton, { className: "mxc-back", label: "Back", shortcut: canvasShortcutHint("canvas.back", isMac()), onClick: () => void canvas.back(active.id), children: /* @__PURE__ */ jsx7(ChevronLeftIcon, {}) }) : null,
+    canGoForward && active ? /* @__PURE__ */ jsx7(
+      CanvasHeaderButton,
+      {
+        className: "mxc-forward",
+        label: "Forward",
+        shortcut: canvasShortcutHint("canvas.forward", isMac()),
+        onClick: () => void canvas.forward(active.id),
+        children: /* @__PURE__ */ jsx7(ChevronRightIcon, {})
+      }
+    ) : null
+  ] });
+  const toolbar = Toolbar && kindProps ? /* @__PURE__ */ jsx7("div", { className: "mxc-item-toolbar", "data-kind": active?.kind, children: /* @__PURE__ */ jsx7(ToolbarBoundary, { kindId: kind?.id ?? "", children: /* @__PURE__ */ jsx7(Toolbar, { ...kindProps }) }) }) : null;
+  const macTabBar = mac && !inWindowStrip && tabs.length > 1;
+  const header = mac ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    history,
+    toolbar ? null : active ? /* @__PURE__ */ jsx7(WindowTitle, { item: active, kind }) : /* @__PURE__ */ jsx7("span", { className: "mxc-panel-title mxc-window-title", children: "New tab" })
+  ] }) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    history,
+    inWindowStrip ? active ? /* @__PURE__ */ jsx7(PaneTitle, { item: active, kind }) : /* @__PURE__ */ jsx7("span", { className: "mxc-panel-title", children: "New tab" }) : single && active ? /* @__PURE__ */ jsx7(SingleTitle, { item: active, kind }) : tabs.length > 0 ? /* @__PURE__ */ jsx7(TabStrip, { tabs, activeItemId: pane.activeItemId }) : /* @__PURE__ */ jsx7("span", { className: "mxc-panel-title", children: "New tab" }),
+    newTab
+  ] });
+  const kindAction = Action && kindProps ? (
+    // Its own gapless row: a kind's tap buttons space themselves (the tap-target placement rule).
+    /* @__PURE__ */ jsx7("span", { className: "mxc-kind-actions", children: /* @__PURE__ */ jsx7(Action, { ...kindProps }) })
+  ) : null;
   return /* @__PURE__ */ jsxs6(
     CanvasPanel,
     {
@@ -3342,26 +3372,13 @@ function CanvasPaneView({ paneId }) {
       title: active ? itemTitle(active, kind) : "Canvas",
       focused,
       "data-mxc-pane": paneId,
-      header: /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        canGoBack && active ? /* @__PURE__ */ jsx7(CanvasHeaderButton, { className: "mxc-back", label: "Back", shortcut: canvasShortcutHint("canvas.back", isMac()), onClick: () => void canvas.back(active.id), children: /* @__PURE__ */ jsx7(ChevronLeftIcon, {}) }) : null,
-        canGoForward && active ? /* @__PURE__ */ jsx7(
-          CanvasHeaderButton,
-          {
-            className: "mxc-forward",
-            label: "Forward",
-            shortcut: canvasShortcutHint("canvas.forward", isMac()),
-            onClick: () => void canvas.forward(active.id),
-            children: /* @__PURE__ */ jsx7(ChevronRightIcon, {})
-          }
-        ) : null,
-        inWindowStrip ? active ? /* @__PURE__ */ jsx7(PaneTitle, { item: active, kind }) : /* @__PURE__ */ jsx7("span", { className: "mxc-panel-title", children: "New tab" }) : single && active ? /* @__PURE__ */ jsx7(SingleTitle, { item: active, kind }) : tabs.length > 0 ? /* @__PURE__ */ jsx7(TabStrip, { tabs, activeItemId: pane.activeItemId }) : /* @__PURE__ */ jsx7("span", { className: "mxc-panel-title", children: "New tab" }),
-        inWindowStrip ? null : /* @__PURE__ */ jsx7(CanvasHeaderButton, { className: "mxc-new-tab", label: "New tab", onClick: () => void canvas.newTab(paneId), children: /* @__PURE__ */ jsx7(PlusIcon, {}) })
-      ] }),
-      leading: Leading && kindProps ? /* @__PURE__ */ jsx7(Leading, { ...kindProps }) : null,
-      actions: Action && kindProps ? (
-        // Its own gapless row: a kind's tap buttons space themselves (the tap-target placement rule).
-        /* @__PURE__ */ jsx7("span", { className: "mxc-kind-actions", children: /* @__PURE__ */ jsx7(Action, { ...kindProps }) })
-      ) : null,
+      header,
+      leading: mac ? toolbar : Leading && kindProps ? /* @__PURE__ */ jsx7(Leading, { ...kindProps }) : null,
+      actions: mac ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        Leading && kindProps ? /* @__PURE__ */ jsx7(Leading, { ...kindProps }) : null,
+        kindAction,
+        newTab
+      ] }) : kindAction,
       renderMenu: () => /* @__PURE__ */ jsx7(
         PaneMenu,
         {
@@ -3386,7 +3403,8 @@ function CanvasPaneView({ paneId }) {
       },
       ...drop,
       children: [
-        Toolbar && kindProps ? /* @__PURE__ */ jsx7("div", { className: "mxc-item-toolbar", "data-kind": active?.kind, children: /* @__PURE__ */ jsx7(ToolbarBoundary, { kindId: kind?.id ?? "", children: /* @__PURE__ */ jsx7(Toolbar, { ...kindProps }) }) }) : null,
+        macTabBar ? /* @__PURE__ */ jsx7("div", { className: "mxc-tab-bar", "data-slot": "canvas-tab-bar", children: /* @__PURE__ */ jsx7(TabStrip, { tabs, activeItemId: pane.activeItemId }) }) : null,
+        mac ? null : toolbar,
         /* @__PURE__ */ jsx7("div", { ref: bodyRef, className: "mxc-pane-slot", "data-mxc-slot": paneId, children: pane.itemIds.length === 0 ? /* @__PURE__ */ jsx7(EmptyPaneLauncher, { paneId }) : columnSlots ? null : /* @__PURE__ */ jsx7(CanvasPaneInlineBodies, { paneId, slots }) })
       ]
     }
@@ -3416,6 +3434,16 @@ function SingleTitle({ item, kind }) {
     /* @__PURE__ */ jsx7("button", { type: "button", className: "mxc-tab-close", "data-slot": "browser-tab-close", "aria-label": `Close ${title}`, onClick: () => canvas.close(item.id), children: /* @__PURE__ */ jsx7(CloseIcon, {}) })
   ] });
 }
+function WindowTitle({ item, kind }) {
+  const title = itemTitle(item, kind);
+  const drag = useTabDrag(item.id, title);
+  const name = useTruncated(title);
+  const Icon = kind?.icon ?? AlertIcon;
+  return /* @__PURE__ */ jsxs6("span", { className: "mxc-panel-title mxc-window-title", "data-slot": "canvas-window-title", "data-truncated": name.truncated ? "" : void 0, title, children: [
+    /* @__PURE__ */ jsx7("span", { className: "mxc-proxy-icon", "data-draggable": "", ...drag, children: /* @__PURE__ */ jsx7(Icon, { className: "mxc-title-icon" }) }),
+    /* @__PURE__ */ jsx7("span", { ref: name.ref, className: "mxc-tab-title", children: title })
+  ] });
+}
 function PaneTitle({ item, kind }) {
   const title = itemTitle(item, kind);
   const drag = useTabDrag(item.id, title);
@@ -3866,7 +3894,7 @@ function useCanvasColumnWidth() {
   return fitCanvasWidth(width, region, controller.rules);
 }
 function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
-  const { controller, windowId, layer } = useCanvasInternals();
+  const { controller, windowId, layer, look } = useCanvasInternals();
   const isOpen = useCanvasState((s) => selectCanvasIsOpen(s, windowId));
   const isFullscreen = useCanvasState((s) => selectCanvasIsFullscreen(s, windowId));
   const width = useCanvasState((s) => selectCanvasWidth(s, windowId));
@@ -3932,6 +3960,7 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
       "data-open": isOpen ? "" : void 0,
       "data-fullscreen": isOpen && isFullscreen ? "" : void 0,
       "data-placement": placement,
+      "data-look": look,
       "data-mxc-window": windowId,
       "aria-label": "Canvas",
       "aria-hidden": isOpen ? void 0 : true,