@ai-matrx/canvas 0.1.0 → 0.2.0

package/dist/styles.css

@@ -3,8 +3,13 @@
 /*
  * @ai-matrx/canvas — structural CSS (C26).
  *
- * Every colour comes from a --mxc-* token. Hosts set the token VALUES (see
- * tokens.css for the shipped defaults); this sheet never hardcodes a colour.
+ * Every colour and size comes from a --mxc-* token. Hosts set the token VALUES
+ * (tokens.css ships defaults that follow a design-system theme when one is
+ * present); this sheet never hardcodes a colour.
+ *
+ * The look: panes are cards (radius, hairline border) on the column's frame
+ * background, separated by a gap that is also the split handle — the Claude
+ * desktop / Codex canvas.
  */
 
 .mxc-column {
@@ -15,15 +20,17 @@
   height: 100%;
   min-height: 0;
   flex: none;
-  background: var(--mxc-bg);
+  background: var(--mxc-frame-bg);
   color: var(--mxc-fg);
-  border-left: 1px solid var(--mxc-border);
+  border-left: var(--mxc-column-border-width, 0px) solid var(--mxc-border);
   /* The column owns the top edge of the window: no header sits above it. */
   padding-top: var(--mxc-safe-top, 0px);
   isolation: isolate;
+  font-family: inherit;
 }
 
-.mxc-column[data-fullscreen] {
+.mxc-column[data-fullscreen],
+.mxc-column[data-placement="fill"] {
   width: 100%;
   border-left: 0;
 }
@@ -51,10 +58,21 @@
   user-select: none !important;
 }
 
+:root[data-mxc-resizing="row"],
+:root[data-mxc-resizing="row"] * {
+  cursor: row-resize !important;
+}
+
 .mxc-layout {
   flex: 1 1 auto;
   min-height: 0;
   display: flex;
+  padding: var(--mxc-gap);
+}
+
+.mxc-column[data-placement="docked"]:not([data-fullscreen]) > .mxc-layout {
+  /* The gap on the left edge is the width handle's room. */
+  padding-left: max(var(--mxc-gap), 0px);
 }
 
 .mxc-split {
@@ -74,45 +92,53 @@
   display: flex;
 }
 
+/* The gap between cards IS the handle: transparent, tinted on hover and drag. */
 .mxc-split-handle {
   flex: none;
-  background: var(--mxc-border);
-  touch-action: none;
   position: relative;
+  touch-action: none;
+  border-radius: 999px;
+  background: transparent;
+  transition: background-color 120ms ease-out;
 }
 
 .mxc-split[data-orientation="horizontal"] > .mxc-split-handle {
-  width: 1px;
+  width: max(var(--mxc-gap), 1px);
   cursor: col-resize;
 }
 
 .mxc-split[data-orientation="vertical"] > .mxc-split-handle {
-  height: 1px;
+  height: max(var(--mxc-gap), 1px);
   cursor: row-resize;
 }
 
-/* A wide invisible grab area around the 1px line. */
+/* A grab area at least 7px wide around a thin gap. */
 .mxc-split-handle::after {
   content: "";
   position: absolute;
   inset: -3px;
 }
 
-.mxc-split-handle:hover {
-  background: var(--mxc-accent);
+.mxc-split-handle:hover,
+.mxc-split-handle:active {
+  background: var(--mxc-handle-hover);
 }
 
-.mxc-pane {
+/* ── panel (THE chrome) ─────────────────────────────────────────────────── */
+
+.mxc-panel {
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--mxc-border);
+  border-radius: var(--mxc-radius);
   background: var(--mxc-bg);
-}
-
-.mxc-pane[data-drop] {
-  box-shadow: inset 0 0 0 2px var(--mxc-accent);
+  color: var(--mxc-fg);
 }
 
 .mxc-pane-header {
@@ -120,14 +146,133 @@
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  height: var(--mxc-header-h, 2.75rem);
-  padding: 0 0.25rem 0 0.375rem;
-  border-bottom: 1px solid var(--mxc-border);
+  height: var(--mxc-header-h, 2.25rem);
+  padding: 0 0.375rem 0 0.375rem;
   background: var(--mxc-header-bg);
+  min-width: 0;
 }
 
-.mxc-tabs {
+.mxc-panel-title {
+  flex: 0 1 auto;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0 0.375rem;
+  overflow: hidden;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+  color: var(--mxc-title-fg);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  user-select: none;
+}
+
+.mxc-panel-title[data-draggable] {
+  cursor: grab;
+}
+
+.mxc-title-icon {
+  flex: none;
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--mxc-muted);
+}
+
+/* After the title or tabs: grows to fill the header (a browser bar, "+ new"). */
+.mxc-pane-leading {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+.mxc-pane-leading:empty {
+  min-width: 0.25rem;
+}
+
+.mxc-pane-actions {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+.mxc-pane-body {
+  position: relative;
   flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── header buttons ─────────────────────────────────────────────────────── */
+
+.mxc-icon-button {
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--mxc-muted);
+  cursor: pointer;
+  outline: none;
+  transition: background-color 120ms ease-out, color 120ms ease-out;
+}
+
+.mxc-icon-button[data-size="md"] {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.mxc-icon-button svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.mxc-icon-button[data-size="md"] svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.mxc-icon-button:hover,
+.mxc-icon-button[data-state="open"],
+.mxc-icon-button[aria-pressed="true"] {
+  background: var(--mxc-hover);
+  color: var(--mxc-fg);
+}
+
+.mxc-icon-button:focus-visible {
+  box-shadow: 0 0 0 2px var(--mxc-ring);
+}
+
+.mxc-icon-button[data-available="false"] {
+  cursor: default;
+  color: var(--mxc-disabled);
+  background: transparent;
+}
+
+/* Touch screens: a 40px hit area around the 24px button. */
+@media (pointer: coarse) {
+  .mxc-icon-button::after {
+    content: "";
+    position: absolute;
+    inset: -0.5rem;
+  }
+}
+
+/* ── tabs ───────────────────────────────────────────────────────────────── */
+
+.mxc-tabs {
+  flex: 0 1 auto;
   min-width: 0;
   display: flex;
   align-items: center;
@@ -141,93 +286,168 @@
 }
 
 .mxc-tab {
-  flex: none;
-  display: inline-flex;
+  position: relative;
+  flex: 0 1 10rem;
+  min-width: 4.5rem;
+  max-width: 10rem;
+  display: flex;
   align-items: center;
   gap: 0.375rem;
-  max-width: 13rem;
-  height: 1.875rem;
+  height: 1.75rem;
   padding: 0 0.25rem 0 0.5rem;
-  border-radius: 0.5rem;
-  font-size: 0.8125rem;
-  line-height: 1;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
   color: var(--mxc-muted);
-  cursor: pointer;
+  cursor: default;
   user-select: none;
+  outline: none;
 }
 
 .mxc-tab:hover {
   background: var(--mxc-hover);
-  color: var(--mxc-fg);
 }
 
 .mxc-tab[data-active] {
   background: var(--mxc-tab-active-bg);
   color: var(--mxc-fg);
+  box-shadow: var(--mxc-tab-active-shadow);
 }
 
 .mxc-pane:not([data-focused]) .mxc-tab[data-active] {
-  background: var(--mxc-hover);
+  color: var(--mxc-title-fg);
 }
 
 .mxc-tab:focus-visible {
-  outline: 2px solid var(--mxc-accent);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 2px var(--mxc-ring);
 }
 
 .mxc-tab-icon {
   flex: none;
+  display: inline-flex;
+  width: 0.875rem;
+  height: 0.875rem;
+  opacity: 0.75;
+}
+
+.mxc-tab-icon svg,
+.mxc-favicon {
   width: 0.875rem;
   height: 0.875rem;
 }
 
+.mxc-favicon {
+  border-radius: 0.125rem;
+}
+
 .mxc-tab-title {
+  flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.mxc-tab-note {
+  flex: none;
+  font-size: 0.6875rem;
+  color: var(--mxc-disabled);
+}
+
 .mxc-tab-close {
   flex: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
   border: 0;
-  border-radius: 0.375rem;
+  border-radius: 0.25rem;
   background: transparent;
-  color: inherit;
+  color: var(--mxc-muted);
   opacity: 0;
   cursor: pointer;
+  outline: none;
+}
+
+.mxc-tab-close svg {
+  width: 0.75rem;
+  height: 0.75rem;
 }
 
 .mxc-tab:hover .mxc-tab-close,
 .mxc-tab[data-active] .mxc-tab-close,
 .mxc-tab-close:focus-visible {
-  opacity: 0.7;
+  opacity: 1;
 }
 
 .mxc-tab-close:hover {
-  opacity: 1;
   background: var(--mxc-hover);
+  color: var(--mxc-fg);
 }
 
-.mxc-pane-actions {
-  flex: none;
+.mxc-tab-close:focus-visible {
+  box-shadow: 0 0 0 2px var(--mxc-ring);
+}
+
+/* ── browser bar ────────────────────────────────────────────────────────── */
+
+.mxc-browser-bar {
+  flex: 1 1 auto;
+  min-width: 0;
   display: flex;
   align-items: center;
+  gap: 0.125rem;
+  height: 2.5rem;
+  padding: 0 0.375rem;
 }
 
-.mxc-pane-body {
-  position: relative;
+.mxc-pane-leading > .mxc-browser-bar {
+  height: auto;
+  padding: 0;
+}
+
+.mxc-address-form {
   flex: 1 1 auto;
-  min-height: 0;
+  min-width: 4rem;
+  margin: 0 0 0 0.25rem;
+}
+
+.mxc-address {
+  width: 100%;
+  height: 1.75rem;
+  padding: 0 0.75rem;
+  border: 1px solid var(--mxc-border);
+  border-radius: 999px;
+  background: var(--mxc-input-bg);
+  color: var(--mxc-fg);
+  font: inherit;
+  font-size: 0.75rem;
+  text-align: center;
+  outline: none;
+}
+
+.mxc-address::placeholder {
+  color: var(--mxc-muted);
+}
+
+.mxc-address:focus {
+  background: var(--mxc-tab-active-bg);
+  text-align: left;
+  box-shadow: 0 0 0 2px var(--mxc-ring);
+}
+
+.mxc-browser-bar-trailing {
+  flex: none;
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  gap: 0.125rem;
+  margin-left: 0.25rem;
 }
 
+/* ── bodies ─────────────────────────────────────────────────────────────── */
+
 .mxc-item {
   flex: 1 1 auto;
   min-height: 0;
@@ -240,6 +460,15 @@
   display: none;
 }
 
+/* Where a host's native view sits (a desktop browser tab). */
+.mxc-native-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  margin: 0 var(--mxc-native-inset, 0.375rem) var(--mxc-native-inset, 0.375rem);
+  border-radius: calc(var(--mxc-radius) - 2px);
+  background: var(--mxc-tab-active-bg);
+}
+
 .mxc-loading {
   flex: 1 1 auto;
   background: linear-gradient(90deg, transparent, var(--mxc-hover), transparent);
@@ -252,15 +481,27 @@
   to { background-position: -200% 0; }
 }
 
-.mxc-problem,
-.mxc-empty {
+/* The one-line honest state ("No changes to show", "Files · next release"). */
+.mxc-empty-line {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 3rem;
+  padding: 0 1rem;
+  font-size: 0.75rem;
+  color: var(--mxc-muted);
+  text-align: center;
+}
+
+.mxc-problem {
   margin: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
   padding: 1.5rem;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   color: var(--mxc-muted);
   text-align: center;
 }
@@ -322,6 +563,8 @@
   color: var(--mxc-muted);
 }
 
+/* ── menu ───────────────────────────────────────────────────────────────── */
+
 .mxc-menu {
   z-index: var(--mxc-menu-z, 10000);
   min-width: 11rem;
@@ -330,7 +573,7 @@
   border-radius: 0.625rem;
   background: var(--mxc-bg);
   color: var(--mxc-fg);
-  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35);
+  box-shadow: var(--mxc-float-shadow);
   font-size: 0.8125rem;
 }
 
@@ -366,6 +609,44 @@
   background: var(--mxc-border);
 }
 
+/* ── overlay (the DOM default for tooltips and drop indicators) ─────────── */
+
+.mxc-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--mxc-overlay-z, 10001);
+  pointer-events: none;
+}
+
+.mxc-tooltip {
+  position: fixed;
+  max-width: 18rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.375rem;
+  background: var(--mxc-tooltip-bg);
+  color: var(--mxc-tooltip-fg);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-shadow: var(--mxc-float-shadow);
+}
+
+.mxc-tooltip[data-side="top"] {
+  transform: translateY(-100%);
+}
+
+.mxc-drop-indicator {
+  position: fixed;
+  border-radius: var(--mxc-radius);
+  box-shadow: inset 0 0 0 2px var(--mxc-accent);
+  background: var(--mxc-accent-soft);
+  opacity: 0.6;
+}
+
+/* ── toggle ─────────────────────────────────────────────────────────────── */
+
 .mxc-toggle {
   position: relative;
   display: inline-flex;
@@ -414,7 +695,7 @@
   display: none !important;
 }
 
-/* Phones: the canvas is a full-screen layer over the app. */
+/* Phones: the canvas is a full-screen layer over the app, edge to edge. */
 @media (max-width: 767px) {
   .mxc-phone-only {
     display: inline-flex !important;
@@ -425,7 +706,7 @@
     display: none !important;
   }
 
-  .mxc-column {
+  .mxc-column[data-placement="docked"] {
     position: fixed;
     inset: 0;
     z-index: var(--mxc-mobile-z, 60);
@@ -433,6 +714,16 @@
     border-left: 0;
     padding-top: env(safe-area-inset-top, 0px);
     padding-bottom: env(safe-area-inset-bottom, 0px);
+    --mxc-gap: 0px;
+    --mxc-radius: 0px;
+  }
+
+  .mxc-column[data-placement="docked"] .mxc-panel {
+    border-width: 0;
+  }
+
+  .mxc-column[data-placement="docked"] .mxc-split-handle {
+    background: var(--mxc-border);
   }
 
   .mxc-width-handle {
@@ -448,4 +739,8 @@
     height: 1px;
     cursor: row-resize;
   }
+
+  .mxc-pane-header {
+    height: var(--mxc-header-h-phone, 2.75rem);
+  }
 }

package/dist/tokens.css

@@ -1,49 +1,71 @@
 /*
- * @ai-matrx/canvas — DEFAULT token values (C26). Import this only in a host
- * that has no theme of its own; a themed host maps the --mxc-* tokens to its
- * own design tokens instead.
+ * @ai-matrx/canvas — DEFAULT token values (C26).
+ *
+ * In a host with the AI Matrx design-system theme (HSL triplets such as
+ * --card, --border, --foreground) every value follows that theme, light and
+ * dark. Without one, each var() falls back to the literal shown. A host with
+ * its own palette maps the --mxc-* tokens itself instead of importing this.
  */
 
 :root {
-  --mxc-bg: #ffffff;
-  --mxc-header-bg: #fafafa;
-  --mxc-fg: #18181b;
-  --mxc-muted: #71717a;
-  --mxc-border: #e4e4e7;
-  --mxc-hover: rgba(0, 0, 0, 0.05);
-  --mxc-tab-active-bg: rgba(0, 0, 0, 0.08);
-  --mxc-accent: #2563eb;
-  --mxc-accent-soft: rgba(37, 99, 235, 0.25);
-  --mxc-accent-fg: #ffffff;
-  --mxc-danger: #dc2626;
+  --mxc-frame-bg: hsl(var(--background, 240 5% 96%));
+  --mxc-bg: hsl(var(--card, 0 0% 100%));
+  --mxc-header-bg: transparent;
+  --mxc-fg: hsl(var(--foreground, 240 6% 10%));
+  --mxc-title-fg: hsl(var(--foreground, 240 6% 10%) / 0.8);
+  --mxc-muted: hsl(var(--foreground, 240 6% 10%) / 0.55);
+  --mxc-disabled: hsl(var(--foreground, 240 6% 10%) / 0.28);
+  --mxc-border: hsl(var(--border, 240 6% 88%));
+  --mxc-hover: hsl(var(--foreground, 240 6% 10%) / 0.07);
+  --mxc-handle-hover: hsl(var(--foreground, 240 6% 10%) / 0.15);
+  --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);
+  --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);
+  --mxc-accent-fg: hsl(var(--primary-foreground, 0 0% 100%));
+  --mxc-danger: hsl(var(--destructive, 0 72% 51%));
+  --mxc-tooltip-bg: hsl(var(--foreground, 240 6% 10%));
+  --mxc-tooltip-fg: hsl(var(--background, 0 0% 100%));
+  --mxc-float-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.35);
+  --mxc-radius: 10px;
+  --mxc-gap: 6px;
+  --mxc-header-h: 2.25rem;
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not(.light) {
-    --mxc-bg: #1c1c1f;
-    --mxc-header-bg: #18181b;
-    --mxc-fg: #f4f4f5;
-    --mxc-muted: #a1a1aa;
-    --mxc-border: #3f3f46;
-    --mxc-hover: rgba(255, 255, 255, 0.06);
-    --mxc-tab-active-bg: rgba(255, 255, 255, 0.1);
-    --mxc-accent: #60a5fa;
-    --mxc-accent-soft: rgba(96, 165, 250, 0.3);
-    --mxc-accent-fg: #0b1220;
-    --mxc-danger: #f87171;
+    --mxc-frame-bg: hsl(var(--background, 240 6% 7%));
+    --mxc-bg: hsl(var(--card, 240 5% 11%));
+    --mxc-fg: hsl(var(--foreground, 240 5% 96%));
+    --mxc-title-fg: hsl(var(--foreground, 240 5% 96%) / 0.8);
+    --mxc-muted: hsl(var(--foreground, 240 5% 96%) / 0.55);
+    --mxc-disabled: hsl(var(--foreground, 240 5% 96%) / 0.28);
+    --mxc-border: hsl(var(--border, 240 4% 22%));
+    --mxc-hover: hsl(var(--foreground, 240 5% 96%) / 0.07);
+    --mxc-handle-hover: hsl(var(--foreground, 240 5% 96%) / 0.15);
+    --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-tooltip-bg: hsl(var(--foreground, 240 5% 96%));
+    --mxc-tooltip-fg: hsl(var(--background, 240 6% 7%));
   }
 }
 
 .dark {
-  --mxc-bg: #1c1c1f;
-  --mxc-header-bg: #18181b;
-  --mxc-fg: #f4f4f5;
-  --mxc-muted: #a1a1aa;
-  --mxc-border: #3f3f46;
-  --mxc-hover: rgba(255, 255, 255, 0.06);
-  --mxc-tab-active-bg: rgba(255, 255, 255, 0.1);
-  --mxc-accent: #60a5fa;
-  --mxc-accent-soft: rgba(96, 165, 250, 0.3);
-  --mxc-accent-fg: #0b1220;
-  --mxc-danger: #f87171;
+  --mxc-frame-bg: hsl(var(--background, 240 6% 7%));
+  --mxc-bg: hsl(var(--card, 240 5% 11%));
+  --mxc-fg: hsl(var(--foreground, 240 5% 96%));
+  --mxc-title-fg: hsl(var(--foreground, 240 5% 96%) / 0.8);
+  --mxc-muted: hsl(var(--foreground, 240 5% 96%) / 0.55);
+  --mxc-disabled: hsl(var(--foreground, 240 5% 96%) / 0.28);
+  --mxc-border: hsl(var(--border, 240 4% 22%));
+  --mxc-hover: hsl(var(--foreground, 240 5% 96%) / 0.07);
+  --mxc-handle-hover: hsl(var(--foreground, 240 5% 96%) / 0.15);
+  --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-tooltip-bg: hsl(var(--foreground, 240 5% 96%));
+  --mxc-tooltip-fg: hsl(var(--background, 240 6% 7%));
 }