@ai-matrx/canvas 0.10.34 → 0.10.36

package/dist/styles.css

@@ -533,6 +533,8 @@
   max-width: 12rem;
   display: flex;
   align-items: center;
+  /* macOS tabs (Safari, Terminal, Finder) centre their icon and name. */
+  justify-content: center;
   gap: 0.25rem;
   height: 1.625rem;
   padding: 0 0.375rem;
@@ -546,9 +548,9 @@
   box-sizing: border-box;
 }
 
-/* The active tab always shows its close: its room is reserved. */
+/* The active tab always shows its close: its room is reserved (at the leading edge, as macOS tabs put it). */
 .mxc-tab[data-active]:has(> .mxc-tab-close) {
-  padding-right: 1.25rem;
+  padding-left: 1.25rem;
 }
 
 /* The active tab: the same width rules as every tab (no flex-shrink of its own — 0.7.0 live: it ran under "All tabs"). */
@@ -655,7 +657,7 @@
 @media (hover: hover) {
   .mxc-tab:not([data-active]):hover:has(> .mxc-tab-close),
   .mxc-tab:not([data-active]):focus-within:has(> .mxc-tab-close) {
-    padding-right: 1.25rem;
+    padding-left: 1.25rem;
   }
 }
 
@@ -668,7 +670,7 @@
 .mxc-tab-close {
   position: absolute;
   top: 50%;
-  right: 0.1875rem;
+  left: 0.1875rem;
   transform: translateY(-50%);
   display: inline-flex;
   align-items: center;
@@ -716,43 +718,95 @@
 
 /* ── browser bar ────────────────────────────────────────────────────────── */
 
-/* In a body column it keeps its own height; in a header's leading slot it fills the width. */
+/*
+ * Safari's toolbar row (macOS 26): Back and Forward in one capsule, the address
+ * as a centred pill showing the site's host until clicked, Reload inside its
+ * trailing edge, the page's actions in a capsule after it. 8px apart.
+ * In a body column it keeps its own height; in a header's leading slot it fills the width.
+ */
 .mxc-browser-bar {
-  flex: none;
+  flex: 1 1 auto;
   min-width: 0;
   display: flex;
   align-items: center;
-  gap: 0.125rem;
-  height: 2.5rem;
-  padding: 0 0.375rem;
+  gap: 0.5rem;
+  height: 2.75rem;
+  padding: 0 0.5rem;
 }
 
 .mxc-pane-leading > .mxc-browser-bar {
-  flex: 1 1 auto;
   height: auto;
   padding: 0;
 }
 
+/* A glass capsule of related buttons (Back | Forward; a page's actions). */
+.mxc-capsule {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  height: 2rem;
+  padding: 0 0.125rem;
+  border-radius: 999px;
+  background: var(--mxc-capsule-bg);
+  box-shadow: var(--mxc-capsule-shadow);
+}
+
+.mxc-capsule > .mxc-icon-button {
+  border-radius: 999px;
+}
+
+.mxc-capsule-divider {
+  flex: none;
+  width: 1px;
+  height: 1rem;
+  background: var(--mxc-border);
+}
+
 .mxc-address-form {
+  position: relative;
   flex: 1 1 auto;
-  min-width: 4rem;
-  margin: 0 0 0 0.25rem;
+  min-width: 6rem;
+  display: flex;
+  align-items: center;
+  margin: 0;
 }
 
 .mxc-address {
   width: 100%;
-  height: 1.75rem;
-  padding: 0 0.75rem;
-  border: 1px solid var(--mxc-border);
+  height: 2rem;
+  padding: 0 2rem;
+  border: 0;
   border-radius: 999px;
-  background: var(--mxc-input-bg);
+  background: var(--mxc-capsule-bg);
+  box-shadow: var(--mxc-capsule-shadow);
   color: var(--mxc-fg);
   font: inherit;
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   text-align: center;
   outline: none;
 }
 
+/* Not being typed in: the field keeps the whole address (its value, its accessible name), and the
+   host is what shows, centred, as Safari's does. */
+.mxc-address[data-shown="host"] {
+  color: transparent;
+}
+
+.mxc-address-host {
+  position: absolute;
+  inset: 0 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  font-size: 0.8125rem;
+  color: var(--mxc-fg);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+
 .mxc-address::placeholder {
   color: var(--mxc-muted);
 }
@@ -760,15 +814,27 @@
 .mxc-address:focus {
   background: var(--mxc-tab-active-bg);
   text-align: left;
-  box-shadow: 0 0 0 2px var(--mxc-ring);
+  padding-left: 0.875rem;
+  box-shadow: 0 0 0 3px var(--mxc-ring);
+}
+
+.mxc-address-reload {
+  position: absolute;
+  right: 0.25rem;
+  border-radius: 999px;
+}
+
+/* No page yet: no Reload, so the placeholder gets the whole pill. */
+.mxc-address-form:not(:has(> .mxc-address-reload)) > .mxc-address {
+  padding: 0 0.875rem;
+}
+
+.mxc-address-form[data-editing] > .mxc-address-reload {
+  display: none;
 }
 
 .mxc-browser-bar-trailing {
-  flex: none;
-  display: flex;
-  align-items: center;
-  gap: 0.125rem;
-  margin-left: 0.25rem;
+  margin-left: 0;
 }
 
 /* ── bodies ─────────────────────────────────────────────────────────────── */

package/dist/tokens.css

@@ -21,6 +21,9 @@
   --mxc-tab-active-bg: hsl(var(--background, 0 0% 100%));
   --mxc-tab-active-shadow: 0 0 0 0.5px hsl(var(--border, 240 6% 85%)), 0 1px 2px hsl(var(--foreground, 240 6% 10%) / 0.06);
   --mxc-input-bg: hsl(var(--muted, 240 5% 96%) / 0.5);
+  /* Safari's glass capsules (Back | Forward, the address pill): raised on the toolbar. */
+  --mxc-capsule-bg: hsl(var(--background, 0 0% 100%));
+  --mxc-capsule-shadow: 0 0 0 0.5px hsl(var(--foreground, 240 6% 10%) / 0.12), 0 1px 3px hsl(var(--foreground, 240 6% 10%) / 0.08);
   --mxc-ring: hsl(var(--ring, 217 91% 60%) / 0.6);
   --mxc-accent: hsl(var(--primary, 221 83% 53%));
   --mxc-accent-soft: hsl(var(--primary, 221 83% 53%) / 0.18);
@@ -51,6 +54,8 @@
     --mxc-tab-active-bg: hsl(var(--background, 240 6% 7%));
     --mxc-tab-active-shadow: 0 0 0 0.5px hsl(var(--border, 240 4% 22%)), 0 1px 2px rgb(0 0 0 / 0.3);
     --mxc-input-bg: hsl(var(--muted, 240 4% 16%) / 0.5);
+    --mxc-capsule-bg: hsl(var(--foreground, 240 5% 96%) / 0.1);
+    --mxc-capsule-shadow: 0 0 0 0.5px hsl(var(--foreground, 240 5% 96%) / 0.12), 0 1px 3px rgb(0 0 0 / 0.3);
     --mxc-tooltip-bg: hsl(var(--foreground, 240 5% 96%));
     --mxc-tooltip-fg: hsl(var(--background, 240 6% 7%));
   }
@@ -69,6 +74,8 @@
   --mxc-tab-active-bg: hsl(var(--background, 240 6% 7%));
   --mxc-tab-active-shadow: 0 0 0 0.5px hsl(var(--border, 240 4% 22%)), 0 1px 2px rgb(0 0 0 / 0.3);
   --mxc-input-bg: hsl(var(--muted, 240 4% 16%) / 0.5);
+  --mxc-capsule-bg: hsl(var(--foreground, 240 5% 96%) / 0.1);
+  --mxc-capsule-shadow: 0 0 0 0.5px hsl(var(--foreground, 240 5% 96%) / 0.12), 0 1px 3px rgb(0 0 0 / 0.3);
   --mxc-tooltip-bg: hsl(var(--foreground, 240 5% 96%));
   --mxc-tooltip-fg: hsl(var(--background, 240 6% 7%));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/canvas",
-  "version": "0.10.34",
+  "version": "0.10.36",
   "description": "The AI Matrx canvas: a docked right-hand column with split panes, tabs, full screen, a kind registry, Redux-compatible state and persistence.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -103,5 +103,5 @@
     "check:package": "pnpm build && node ../scripts/check-exports-agreement.mjs && publint && pnpm verify:tarball",
     "verify:tarball": "node scripts/verify-tarball.mjs"
   },
-  "gitHead": "776d512c11dbe2d4909742a217ecc47fcfa2116f"
+  "gitHead": "9f444022a727510773f188bf82b090fc5687e7f8"
 }