@ai-matrx/canvas 0.10.34 → 0.10.36

package/dist/react.d.cts

@@ -645,7 +645,11 @@ interface BrowserBarProps {
     readonly trailing?: ReactNode;
     readonly className?: string;
 }
-/** A browser's back · forward · reload · address bar, for a kind's leading slot or its body. */
+/**
+ * A browser's toolbar row, as Safari draws it: Back and Forward in one capsule, the address field
+ * as a centred pill that shows only the site's host until it is clicked (then the whole address,
+ * selected) with Reload inside its trailing edge, and the page's own actions in a capsule after it.
+ */
 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 };

package/dist/react.d.ts

@@ -645,7 +645,11 @@ interface BrowserBarProps {
     readonly trailing?: ReactNode;
     readonly className?: string;
 }
-/** A browser's back · forward · reload · address bar, for a kind's leading slot or its body. */
+/**
+ * A browser's toolbar row, as Safari draws it: Back and Forward in one capsule, the address field
+ * as a centred pill that shows only the site's host until it is clicked (then the whole address,
+ * selected) with Reload inside its trailing edge, and the page's own actions in a capsule after it.
+ */
 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 };

package/dist/react.js

@@ -2268,14 +2268,6 @@ var AlertIcon = (p) => /* @__PURE__ */ jsxs2(Glyph, { ...p, children: [
   /* @__PURE__ */ jsx3("path", { d: "M12 8v4" }),
   /* @__PURE__ */ jsx3("path", { d: "M12 16h.01" })
 ] });
-var ArrowLeftIcon = (p) => /* @__PURE__ */ jsxs2(Glyph, { ...p, children: [
-  /* @__PURE__ */ jsx3("path", { d: "m12 19-7-7 7-7" }),
-  /* @__PURE__ */ jsx3("path", { d: "M19 12H5" })
-] });
-var ArrowRightIcon = (p) => /* @__PURE__ */ jsxs2(Glyph, { ...p, children: [
-  /* @__PURE__ */ jsx3("path", { d: "M5 12h14" }),
-  /* @__PURE__ */ jsx3("path", { d: "m12 5 7 7-7 7" })
-] });
 var RotateCwIcon = (p) => /* @__PURE__ */ jsxs2(Glyph, { ...p, children: [
   /* @__PURE__ */ jsx3("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }),
   /* @__PURE__ */ jsx3("path", { d: "M21 3v5h-5" })
@@ -2300,6 +2292,8 @@ var LayoutGridIcon = (p) => /* @__PURE__ */ jsxs2(Glyph, { ...p, children: [
   /* @__PURE__ */ jsx3("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" }),
   /* @__PURE__ */ jsx3("rect", { width: "7", height: "7", x: "3", y: "14", rx: "1" })
 ] });
+var ChevronLeftIcon = (p) => /* @__PURE__ */ jsx3(Glyph, { ...p, children: /* @__PURE__ */ jsx3("path", { d: "m15 18-6-6 6-6" }) });
+var ChevronRightIcon = (p) => /* @__PURE__ */ jsx3(Glyph, { ...p, children: /* @__PURE__ */ jsx3("path", { d: "m9 18 6-6-6-6" }) });
 var ChevronDownIcon = (p) => /* @__PURE__ */ jsx3(Glyph, { ...p, children: /* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" }) });
 
 // src/react/chrome.tsx
@@ -2524,47 +2518,66 @@ function BrowserTabs({ tabs, activeId, onSelect, onClose, onNew, newLabel = "New
     onNew ? /* @__PURE__ */ jsx4(CanvasHeaderButton, { label: newLabel, "data-slot": "browser-tab-new", onClick: onNew, children: /* @__PURE__ */ jsx4(PlusIcon, {}) }) : null
   ] });
 }
+function addressDisplay(url) {
+  if (!url) return "";
+  try {
+    const parsed = new URL(url);
+    if (parsed.protocol === "http:" || parsed.protocol === "https:") return parsed.host.replace(/^www\./, "") || url;
+    return url;
+  } catch {
+    return url;
+  }
+}
 function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, trailing, className }) {
   const [draft, setDraft] = useState3(url);
   const [editing, setEditing] = useState3(false);
   useEffect5(() => {
     if (!editing) setDraft(url);
   }, [url, editing]);
+  const shown = addressDisplay(url);
   return /* @__PURE__ */ jsxs3("div", { "data-slot": "browser-bar", className: cx("mxc-browser-bar", className), children: [
-    /* @__PURE__ */ jsx4(CanvasHeaderButton, { size: "md", label: "Back", available: canGoBack, onClick: onBack, children: /* @__PURE__ */ jsx4(ArrowLeftIcon, {}) }),
-    /* @__PURE__ */ jsx4(CanvasHeaderButton, { size: "md", label: "Forward", available: canGoForward, onClick: onForward, children: /* @__PURE__ */ jsx4(ArrowRightIcon, {}) }),
-    /* @__PURE__ */ jsx4(CanvasHeaderButton, { size: "md", label: "Reload", onClick: onReload, children: /* @__PURE__ */ jsx4(RotateCwIcon, {}) }),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsxs3("div", { role: "group", "aria-label": "History", className: "mxc-capsule", children: [
+      /* @__PURE__ */ jsx4(CanvasHeaderButton, { size: "md", label: "Back", available: canGoBack, onClick: onBack, children: /* @__PURE__ */ jsx4(ChevronLeftIcon, {}) }),
+      /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "mxc-capsule-divider" }),
+      /* @__PURE__ */ jsx4(CanvasHeaderButton, { size: "md", label: "Forward", available: canGoForward, onClick: onForward, children: /* @__PURE__ */ jsx4(ChevronRightIcon, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs3(
       "form",
       {
         className: "mxc-address-form",
+        "data-editing": editing ? "" : void 0,
         onSubmit: (event) => {
           event.preventDefault();
           setEditing(false);
           onNavigate(draft.trim());
           event.currentTarget.elements.namedItem("address")?.blur();
         },
-        children: /* @__PURE__ */ jsx4(
-          "input",
-          {
-            name: "address",
-            "aria-label": "Address",
-            "data-slot": "browser-address",
-            className: "mxc-address",
-            value: draft,
-            placeholder: "Search or enter website",
-            spellCheck: false,
-            onFocus: (event) => {
-              setEditing(true);
-              event.currentTarget.select();
-            },
-            onBlur: () => setEditing(false),
-            onChange: (event) => setDraft(event.target.value)
-          }
-        )
+        children: [
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              name: "address",
+              "aria-label": "Address",
+              "data-slot": "browser-address",
+              "data-shown": !editing && shown ? "host" : void 0,
+              className: "mxc-address",
+              value: draft,
+              placeholder: "Search or enter website",
+              spellCheck: false,
+              onFocus: (event) => {
+                setEditing(true);
+                event.currentTarget.select();
+              },
+              onBlur: () => setEditing(false),
+              onChange: (event) => setDraft(event.target.value)
+            }
+          ),
+          !editing && shown ? /* @__PURE__ */ jsx4("span", { "aria-hidden": true, "data-slot": "browser-address-host", className: "mxc-address-host", children: shown }) : null,
+          url ? /* @__PURE__ */ jsx4(CanvasHeaderButton, { label: "Reload", className: "mxc-address-reload", onClick: onReload, children: /* @__PURE__ */ jsx4(RotateCwIcon, {}) }) : null
+        ]
       }
     ),
-    trailing ? /* @__PURE__ */ jsx4("div", { "data-slot": "browser-bar-trailing", className: "mxc-browser-bar-trailing", children: trailing }) : null
+    trailing ? /* @__PURE__ */ jsx4("div", { "data-slot": "browser-bar-trailing", className: "mxc-browser-bar-trailing mxc-capsule", children: trailing }) : null
   ] });
 }
 
@@ -3330,7 +3343,7 @@ function CanvasPaneView({ paneId }) {
       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(ArrowLeftIcon, {}) }) : null,
+        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,
           {
@@ -3338,7 +3351,7 @@ function CanvasPaneView({ paneId }) {
             label: "Forward",
             shortcut: canvasShortcutHint("canvas.forward", isMac()),
             onClick: () => void canvas.forward(active.id),
-            children: /* @__PURE__ */ jsx7(ArrowRightIcon, {})
+            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" }),