@ai-matrx/canvas 0.10.36 → 0.10.38

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.10.38
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/canvas/v0.10.37..npm/canvas/v0.10.38 -- apps/shared/canvas`).
+No source changes intended and no consumer action required.
+
+## 0.10.37
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/canvas/v0.10.36..npm/canvas/v0.10.37 -- apps/shared/canvas`).
+No source changes intended and no consumer action required.
+
 ## 0.10.36
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/README.md

@@ -139,6 +139,16 @@ toggleKind(controller, { kind: "terminal" }); // absent → open · behind → f
 
 `CanvasPanel` (title or `header`, `leading`, `actions`, `renderMenu`, `onToggleExpand`, `onClose`), `CanvasPanelEmpty`, `CanvasHeaderButton`, `CanvasTab`, `BrowserTabs`, `BrowserBar` — the same components every canvas pane draws with. They render outside a provider too.
 
+## The macOS look
+
+`<CanvasProvider look="mac">` draws every pane as a section of a Mac window instead of a card: the
+column flush to the window's edge behind one hairline, panes split by hairlines, and each pane's
+header the unified toolbar's band (`--mxc-toolbar-h`, default 52px) — the active tab's title centred
+in bold with its kind icon as the proxy icon (Terminal, Finder), or the kind's `Toolbar` in its place
+(Safari's address bar). "+" sits with the trailing controls; two or more tabs get macOS's tab bar
+under the band. A host that puts the header under its own window buttons sets
+`--mxc-header-inset-start` on the column. Default `look="card"` keeps the Claude desktop / Codex cards.
+
 ## Layout rules
 
 ```tsx

package/dist/react.cjs

@@ -2073,6 +2073,7 @@ function CanvasProvider({
   layoutRules,
   regionWidth = null,
   tabStrip = "auto",
+  look = "card",
   itemActions,
   popOut,
   dockBack,
@@ -2129,8 +2130,8 @@ function CanvasProvider({
     return () => window.removeEventListener("keydown", onKey);
   }, [controller, hotkeys, windowId]);
   const value = (0, import_react4.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__ */ (0, import_jsx_runtime2.jsxs)(CanvasContext.Provider, { value, children: [
     children,
@@ -3343,7 +3344,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] = (0, import_react10.useState)(createCanvasSlots);
   const slots = columnSlots ?? ownSlots;
@@ -3385,6 +3387,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__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-new-tab", label: "New tab", onClick: () => void canvas.newTab(paneId), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PlusIcon, {}) });
+  const history = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    canGoBack && active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-back", label: "Back", shortcut: canvasShortcutHint("canvas.back", isMac()), onClick: () => void canvas.back(active.id), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronLeftIcon, {}) }) : null,
+    canGoForward && active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      CanvasHeaderButton,
+      {
+        className: "mxc-forward",
+        label: "Forward",
+        shortcut: canvasShortcutHint("canvas.forward", isMac()),
+        onClick: () => void canvas.forward(active.id),
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRightIcon, {})
+      }
+    ) : null
+  ] });
+  const toolbar = Toolbar && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mxc-item-toolbar", "data-kind": active?.kind, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToolbarBoundary, { kindId: kind?.id ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Toolbar, { ...kindProps }) }) }) : null;
+  const macTabBar = mac && !inWindowStrip && tabs.length > 1;
+  const header = mac ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    history,
+    toolbar ? null : active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(WindowTitle, { item: active, kind }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-panel-title mxc-window-title", children: "New tab" })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    history,
+    inWindowStrip ? active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PaneTitle, { item: active, kind }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-panel-title", children: "New tab" }) : single && active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SingleTitle, { item: active, kind }) : tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabStrip, { tabs, activeItemId: pane.activeItemId }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-kind-actions", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Action, { ...kindProps }) })
+  ) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     CanvasPanel,
     {
@@ -3394,26 +3424,13 @@ function CanvasPaneView({ paneId }) {
       title: active ? itemTitle(active, kind) : "Canvas",
       focused,
       "data-mxc-pane": paneId,
-      header: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        canGoBack && active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-back", label: "Back", shortcut: canvasShortcutHint("canvas.back", isMac()), onClick: () => void canvas.back(active.id), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronLeftIcon, {}) }) : null,
-        canGoForward && active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          CanvasHeaderButton,
-          {
-            className: "mxc-forward",
-            label: "Forward",
-            shortcut: canvasShortcutHint("canvas.forward", isMac()),
-            onClick: () => void canvas.forward(active.id),
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRightIcon, {})
-          }
-        ) : null,
-        inWindowStrip ? active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PaneTitle, { item: active, kind }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-panel-title", children: "New tab" }) : single && active ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SingleTitle, { item: active, kind }) : tabs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabStrip, { tabs, activeItemId: pane.activeItemId }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-panel-title", children: "New tab" }),
-        inWindowStrip ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-new-tab", label: "New tab", onClick: () => void canvas.newTab(paneId), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PlusIcon, {}) })
-      ] }),
-      leading: Leading && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Leading, { ...kindProps }) : null,
-      actions: Action && kindProps ? (
-        // Its own gapless row: a kind's tap buttons space themselves (the tap-target placement rule).
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-kind-actions", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Action, { ...kindProps }) })
-      ) : null,
+      header,
+      leading: mac ? toolbar : Leading && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Leading, { ...kindProps }) : null,
+      actions: mac ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        Leading && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Leading, { ...kindProps }) : null,
+        kindAction,
+        newTab
+      ] }) : kindAction,
       renderMenu: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         PaneMenu,
         {
@@ -3438,7 +3455,8 @@ function CanvasPaneView({ paneId }) {
       },
       ...drop,
       children: [
-        Toolbar && kindProps ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mxc-item-toolbar", "data-kind": active?.kind, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToolbarBoundary, { kindId: kind?.id ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Toolbar, { ...kindProps }) }) }) : null,
+        macTabBar ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mxc-tab-bar", "data-slot": "canvas-tab-bar", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabStrip, { tabs, activeItemId: pane.activeItemId }) }) : null,
+        mac ? null : toolbar,
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: bodyRef, className: "mxc-pane-slot", "data-mxc-slot": paneId, children: pane.itemIds.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EmptyPaneLauncher, { paneId }) : columnSlots ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasPaneInlineBodies, { paneId, slots }) })
       ]
     }
@@ -3468,6 +3486,16 @@ function SingleTitle({ item, kind }) {
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "mxc-tab-close", "data-slot": "browser-tab-close", "aria-label": `Close ${title}`, onClick: () => canvas.close(item.id), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(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__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "mxc-panel-title mxc-window-title", "data-slot": "canvas-window-title", "data-truncated": name.truncated ? "" : void 0, title, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-proxy-icon", "data-draggable": "", ...drag, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { className: "mxc-title-icon" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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);
@@ -3918,7 +3946,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));
@@ -3984,6 +4012,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,