@ai-matrx/canvas 0.10.35 → 0.10.37

package/dist/styles.css

@@ -1191,3 +1191,190 @@
     height: var(--mxc-header-h-phone, 2.75rem);
   }
 }
+
+/* ── the macOS look (CanvasProvider look="mac") ─────────────────────────────
+ *
+ * A pane is a section of a Mac window, never a card: the column sits flush
+ * against the window's edge behind one hairline (Xcode's editor beside its
+ * navigator, Mail's viewer beside its list), panes are split by hairlines,
+ * and each pane's header is the unified toolbar's band over it — 52pt, the
+ * active tab's title centred in bold with its proxy icon (Terminal's
+ * "user — bash — 80×24", Finder's folder name), or the kind's Toolbar in its
+ * place (Safari's toolbar: Back | Forward, the centred address pill, Share).
+ * Two or more tabs get macOS's tab bar under the band: equal tabs across the
+ * whole row, the current one raised to the content's colour.
+ */
+.mxc-column[data-look="mac"] {
+  background: var(--mxc-bg);
+}
+
+.mxc-column[data-look="mac"][data-placement="docked"]:not([data-fullscreen]) > .mxc-column-inner {
+  border-left: 1px solid var(--mxc-border);
+}
+
+.mxc-column[data-look="mac"] > .mxc-column-inner > .mxc-layout {
+  padding: 0;
+}
+
+.mxc-column[data-look="mac"] .mxc-width-handle {
+  width: 5px;
+  left: -2px;
+}
+
+.mxc-column[data-look="mac"] .mxc-width-handle:hover,
+.mxc-column[data-look="mac"] .mxc-width-handle:focus-visible {
+  background: transparent;
+}
+
+.mxc-column[data-look="mac"] .mxc-panel {
+  border: 0;
+  border-radius: 0;
+  background: var(--mxc-bg);
+}
+
+/* Panes meet at one hairline (an NSSplitView's thin divider); the grab area stays 7px. */
+.mxc-column[data-look="mac"] .mxc-split-handle,
+.mxc-column[data-look="mac"] .mxc-split-handle:hover,
+.mxc-column[data-look="mac"] .mxc-split-handle:active {
+  border-radius: 0;
+  background: var(--mxc-border);
+}
+
+.mxc-column[data-look="mac"] .mxc-pane-header {
+  height: var(--mxc-toolbar-h, 52px);
+  gap: 0.375rem;
+  padding: 0 0.625rem 0 max(0.625rem, var(--mxc-header-inset-start, 0px));
+  border-bottom: 1px solid var(--mxc-border);
+  background: var(--mxc-header-bg);
+}
+
+/* The window's title: centred in the band, bold, its proxy icon before it. */
+.mxc-column[data-look="mac"] .mxc-window-title {
+  flex: 1 1 0;
+  justify-content: center;
+  gap: 0.375rem;
+  padding: 0 0.5rem;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  line-height: 1rem;
+  color: var(--mxc-fg);
+}
+
+.mxc-column[data-look="mac"] .mxc-pane:not([data-focused]) .mxc-window-title {
+  color: var(--mxc-title-fg);
+}
+
+.mxc-column[data-look="mac"] .mxc-proxy-icon {
+  flex: none;
+  display: inline-flex;
+  cursor: grab;
+}
+
+.mxc-column[data-look="mac"] .mxc-window-title .mxc-title-icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--mxc-accent);
+}
+
+/* The toolbar band's buttons are the toolbar's 28pt items. */
+.mxc-column[data-look="mac"] .mxc-pane-header .mxc-icon-button {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 999px;
+}
+
+.mxc-column[data-look="mac"] .mxc-pane-header .mxc-icon-button svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* A kind's Toolbar IS the band's middle (Safari): no row of its own. */
+.mxc-column[data-look="mac"] .mxc-pane-leading > .mxc-item-toolbar {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  overflow: visible;
+}
+
+/* Safari's address pill: centred in the band, never wider than it reads. */
+.mxc-column[data-look="mac"] .mxc-browser-bar {
+  height: auto;
+  padding: 0;
+}
+
+.mxc-column[data-look="mac"] .mxc-address-form {
+  max-width: 30rem;
+  margin: 0 auto;
+}
+
+.mxc-column[data-look="mac"] .mxc-address {
+  height: 2.25rem;
+}
+
+.mxc-column[data-look="mac"] .mxc-capsule {
+  height: 2.25rem;
+  padding: 0 0.25rem;
+}
+
+/* macOS's tab bar: under the toolbar band, tabs sharing the whole row equally. */
+.mxc-column[data-look="mac"] .mxc-tab-bar {
+  flex: none;
+  display: flex;
+  height: 1.75rem;
+  border-bottom: 1px solid var(--mxc-border);
+  background: var(--mxc-tab-bar-bg, var(--mxc-hover));
+}
+
+.mxc-column[data-look="mac"] .mxc-tab-bar > .mxc-tabstrip,
+.mxc-column[data-look="mac"] .mxc-tab-bar .mxc-tabs {
+  flex: 1 1 0;
+  gap: 0;
+  height: 100%;
+}
+
+.mxc-column[data-look="mac"] .mxc-tab-bar .mxc-tab {
+  flex: 1 1 0;
+  width: auto;
+  max-width: none;
+  height: 100%;
+  border-radius: 0;
+  border-left: 1px solid var(--mxc-border);
+  box-shadow: none;
+  font-size: 0.8125rem;
+  background: transparent;
+}
+
+.mxc-column[data-look="mac"] .mxc-tab-bar .mxc-tab:first-child {
+  border-left: 0;
+}
+
+.mxc-column[data-look="mac"] .mxc-tab-bar .mxc-tab[data-active] {
+  background: var(--mxc-bg);
+  color: var(--mxc-fg);
+}
+
+.mxc-column[data-look="mac"] .mxc-tab-bar .mxc-tab:not([data-active]):hover {
+  background: var(--mxc-hover);
+}
+
+/* The window-wide strip of a split: the same tab bar, flush. */
+.mxc-column[data-look="mac"] .mxc-window-tabs {
+  height: 1.75rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid var(--mxc-border);
+  border-radius: 0;
+  background: var(--mxc-tab-bar-bg, var(--mxc-hover));
+}
+
+/* A native body (a web page) is full bleed in its section: no inset, no rounded card. */
+.mxc-column[data-look="mac"] .mxc-native-body {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  border-radius: 0;
+  background: var(--mxc-bg);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/canvas",
-  "version": "0.10.35",
+  "version": "0.10.37",
   "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": "833de2279a3cad3c9cb980582697be6ebc7da1a4"
+  "gitHead": "6fad0a48d61a6a3407a22128d1068ac383574567"
 }