@ai-matrx/canvas 0.10.33 → 0.10.35

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.10.35
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/canvas/v0.10.34..npm/canvas/v0.10.35 -- apps/shared/canvas`).
+No source changes intended and no consumer action required.
+
+## 0.10.34
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/canvas/v0.10.33..npm/canvas/v0.10.34 -- apps/shared/canvas`).
+No source changes intended and no consumer action required.
+
 ## 0.10.33
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/react.cjs

@@ -2320,14 +2320,6 @@ var AlertIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ..
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 8v4" }),
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 16h.01" })
 ] });
-var ArrowLeftIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m12 19-7-7 7-7" }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19 12H5" })
-] });
-var ArrowRightIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 12h14" }),
-  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m12 5 7 7-7 7" })
-] });
 var RotateCwIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph, { ...p, children: [
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }),
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 3v5h-5" })
@@ -2352,6 +2344,8 @@ var LayoutGridIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Glyph,
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" }),
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "7", height: "7", x: "3", y: "14", rx: "1" })
 ] });
+var ChevronLeftIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Glyph, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m15 18-6-6 6-6" }) });
+var ChevronRightIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Glyph, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m9 18 6-6-6-6" }) });
 var ChevronDownIcon = (p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Glyph, { ...p, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 9 6 6 6-6" }) });
 
 // src/react/chrome.tsx
@@ -2576,47 +2570,66 @@ function BrowserTabs({ tabs, activeId, onSelect, onClose, onNew, newLabel = "New
     onNew ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { label: newLabel, "data-slot": "browser-tab-new", onClick: onNew, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(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] = (0, import_react5.useState)(url);
   const [editing, setEditing] = (0, import_react5.useState)(false);
   (0, import_react5.useEffect)(() => {
     if (!editing) setDraft(url);
   }, [url, editing]);
+  const shown = addressDisplay(url);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { "data-slot": "browser-bar", className: cx("mxc-browser-bar", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { size: "md", label: "Back", available: canGoBack, onClick: onBack, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ArrowLeftIcon, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { size: "md", label: "Forward", available: canGoForward, onClick: onForward, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ArrowRightIcon, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { size: "md", label: "Reload", onClick: onReload, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RotateCwIcon, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { role: "group", "aria-label": "History", className: "mxc-capsule", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { size: "md", label: "Back", available: canGoBack, onClick: onBack, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronLeftIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": true, className: "mxc-capsule-divider" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { size: "md", label: "Forward", available: canGoForward, onClick: onForward, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronRightIcon, {}) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "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__ */ (0, import_jsx_runtime4.jsx)(
-          "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__ */ (0, import_jsx_runtime4.jsx)(
+            "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__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": true, "data-slot": "browser-address-host", className: "mxc-address-host", children: shown }) : null,
+          url ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CanvasHeaderButton, { label: "Reload", className: "mxc-address-reload", onClick: onReload, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RotateCwIcon, {}) }) : null
+        ]
       }
     ),
-    trailing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-slot": "browser-bar-trailing", className: "mxc-browser-bar-trailing", children: trailing }) : null
+    trailing ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-slot": "browser-bar-trailing", className: "mxc-browser-bar-trailing mxc-capsule", children: trailing }) : null
   ] });
 }
 
@@ -3382,7 +3395,7 @@ function CanvasPaneView({ paneId }) {
       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)(ArrowLeftIcon, {}) }) : null,
+        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,
           {
@@ -3390,7 +3403,7 @@ function CanvasPaneView({ paneId }) {
             label: "Forward",
             shortcut: canvasShortcutHint("canvas.forward", isMac()),
             onClick: () => void canvas.forward(active.id),
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrowRightIcon, {})
+            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" }),