@ai-matrx/canvas 0.4.0 → 0.5.0

package/dist/styles.css

@@ -12,37 +12,88 @@
  * desktop / Codex canvas.
  */
 
+/*
+ * MOTION — one contract for opening, putting away, expanding and restoring:
+ * the column's WIDTH transitions over --mxc-motion-duration on
+ * --mxc-motion-ease (default 600ms, cubic-bezier(0.4, 0, 0.2, 1) — the AI
+ * Matrx shell sidebar's slide: an even ease-in-out that travels once and
+ * stops, never a spring). The inner column keeps its width while the outer
+ * one slides, so content moves instead of reflowing. A host that reflows
+ * beside the column transitions the same property pair. Off while an edge is
+ * dragged and under prefers-reduced-motion.
+ */
 .mxc-column {
   position: relative;
   display: flex;
-  flex-direction: column;
-  width: var(--mxc-width, 640px);
+  justify-content: flex-end;
+  width: 0;
   height: 100%;
   min-height: 0;
   flex: none;
+  overflow: hidden;
   background: var(--mxc-frame-bg);
   color: var(--mxc-fg);
+  isolation: isolate;
+  font-family: inherit;
+  transition: width var(--mxc-motion-duration, 600ms) var(--mxc-motion-ease, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.mxc-column[data-open] {
+  width: var(--mxc-width, 640px);
+}
+
+.mxc-column[data-open][data-fullscreen],
+.mxc-column[data-open][data-placement="fill"] {
+  width: 100%;
+}
+
+/* What slides: the column's content at its own width, right-aligned in the moving edge. */
+.mxc-column-inner {
+  position: relative;
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  width: var(--mxc-width, 640px);
+  height: 100%;
+  min-height: 0;
   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;
+  box-sizing: border-box;
 }
 
-.mxc-column[data-fullscreen],
-.mxc-column[data-placement="fill"] {
+.mxc-column[data-fullscreen] > .mxc-column-inner,
+.mxc-column[data-placement="fill"] > .mxc-column-inner {
   width: 100%;
   border-left: 0;
 }
 
+/* Put away: hidden once the slide has finished (state, scroll and focus targets survive). */
+.mxc-column:not([data-open]) > .mxc-column-inner {
+  visibility: hidden;
+  transition: visibility 0s linear var(--mxc-motion-duration, 600ms);
+}
+
+:root[data-mxc-resizing] .mxc-column {
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mxc-column,
+  .mxc-column:not([data-open]) > .mxc-column-inner {
+    transition: none;
+  }
+}
+
+/* Inside the column's left gap, so the sliding edge never clips it. */
 .mxc-width-handle {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: -3px;
-  width: 6px;
+  left: 0;
+  width: max(var(--mxc-gap), 6px);
   cursor: col-resize;
-  z-index: 2;
+  z-index: 3;
   touch-action: none;
 }
 
@@ -173,6 +224,24 @@
   cursor: grab;
 }
 
+/* One tab as a title, with its own close (a lone tab is never a trap). */
+.mxc-single-title {
+  position: relative;
+  padding-right: 0.25rem;
+}
+
+.mxc-single-title > .mxc-tab-close {
+  position: static;
+  transform: none;
+  opacity: 0.7;
+  pointer-events: auto;
+}
+
+.mxc-single-title > .mxc-tab-close:hover,
+.mxc-single-title > .mxc-tab-close:focus-visible {
+  opacity: 1;
+}
+
 .mxc-title-icon {
   flex: none;
   width: 0.875rem;
@@ -208,6 +277,61 @@
   flex-direction: column;
 }
 
+/* Where the pane's bodies are placed (they live in the column's body layer). */
+.mxc-pane-slot {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── the stable body layer ──────────────────────────────────────────────── */
+
+.mxc-bodies {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.mxc-item-host {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  pointer-events: auto;
+  /* The panel's bottom corners, inside its 1px border. */
+  border-radius: 0 0 max(0px, calc(var(--mxc-radius) - 1px)) max(0px, calc(var(--mxc-radius) - 1px));
+}
+
+/* A pane rendered on its own keeps its bodies in flow. */
+.mxc-item-host[data-inline] {
+  position: relative;
+  flex: 1 1 auto;
+  width: auto;
+  height: auto;
+  border-radius: 0;
+}
+
+.mxc-item-host[data-inline][data-visible="false"] {
+  display: none;
+}
+
+/* Hidden, never unmounted: content-visibility keeps scroll and skips rendering. */
+.mxc-item-host[data-visible="false"],
+.mxc-item-host[data-placed="false"] {
+  visibility: hidden;
+  content-visibility: hidden;
+  pointer-events: none;
+}
+
 /* ── header buttons ─────────────────────────────────────────────────────── */
 
 .mxc-icon-button {
@@ -285,33 +409,46 @@
   display: none;
 }
 
+/*
+ * TAB DENSITY (Claude Code / Codex): 12.5px text, a 14px icon, 6px side
+ * padding. Tabs shrink evenly from 8rem to a 3.25rem floor (icon + a few
+ * letters), then the strip scrolls. The active tab keeps icon + ~10 letters.
+ * The close button is OVERLAID on the tab's end and costs no width while
+ * hidden; shown (hover, active, focus) the title fades under it.
+ */
 .mxc-tab {
   position: relative;
-  flex: 0 1 10rem;
-  min-width: 4.5rem;
-  max-width: 10rem;
+  flex: 1 1 8rem;
+  min-width: 3.25rem;
+  max-width: 12rem;
   display: flex;
   align-items: center;
-  gap: 0.375rem;
-  height: 1.75rem;
-  padding: 0 0.25rem 0 0.5rem;
+  gap: 0.3125rem;
+  height: 1.625rem;
+  padding: 0 0.375rem;
   border-radius: 0.375rem;
-  font-size: 0.75rem;
+  font-size: 0.78125rem;
   line-height: 1rem;
   color: var(--mxc-muted);
   cursor: default;
   user-select: none;
   outline: none;
+  box-sizing: border-box;
+}
+
+.mxc-tab[data-active] {
+  min-width: min(6.5rem, 100%);
+  background: var(--mxc-tab-active-bg);
+  color: var(--mxc-fg);
+  box-shadow: var(--mxc-tab-active-shadow);
 }
 
 .mxc-tab:hover {
   background: var(--mxc-hover);
 }
 
-.mxc-tab[data-active] {
+.mxc-tab[data-active]:hover {
   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] {
@@ -344,10 +481,23 @@
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
+  text-overflow: clip;
   white-space: nowrap;
 }
 
+/* The close shows: the title's end fades out from under it. */
+.mxc-tab:hover .mxc-tab-title,
+.mxc-tab[data-active] .mxc-tab-title,
+.mxc-tab:focus-within .mxc-tab-title {
+  -webkit-mask-image: linear-gradient(to left, transparent 1.125rem, #000 1.875rem);
+  mask-image: linear-gradient(to left, transparent 1.125rem, #000 1.875rem);
+}
+
+.mxc-tab:not(:hover):not([data-active]):not(:focus-within) .mxc-tab-title {
+  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 0.75rem);
+  mask-image: linear-gradient(to left, transparent 0, #000 0.75rem);
+}
+
 .mxc-tab-note {
   flex: none;
   font-size: 0.6875rem;
@@ -355,7 +505,10 @@
 }
 
 .mxc-tab-close {
-  flex: none;
+  position: absolute;
+  top: 50%;
+  right: 0.1875rem;
+  transform: translateY(-50%);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -367,6 +520,7 @@
   background: transparent;
   color: var(--mxc-muted);
   opacity: 0;
+  pointer-events: none;
   cursor: pointer;
   outline: none;
 }
@@ -380,6 +534,7 @@
 .mxc-tab[data-active] .mxc-tab-close,
 .mxc-tab-close:focus-visible {
   opacity: 1;
+  pointer-events: auto;
 }
 
 .mxc-tab-close:hover {
@@ -391,6 +546,14 @@
   box-shadow: 0 0 0 2px var(--mxc-ring);
 }
 
+/* Touch screens have no hover: every tab's close is reachable. */
+@media (pointer: coarse) {
+  .mxc-tab .mxc-tab-close {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
 /* ── browser bar ────────────────────────────────────────────────────────── */
 
 /* In a body column it keeps its own height; in a header's leading slot it fills the width. */
@@ -550,11 +713,25 @@
 
 .mxc-launcher {
   margin: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: min(32rem, 100%);
+  padding: 1.5rem;
+  box-sizing: border-box;
+}
+
+.mxc-launcher-heading {
+  margin: 0 0 0.375rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: var(--mxc-muted);
+}
+
+.mxc-launcher-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
   gap: 0.5rem;
-  width: min(32rem, 100%);
-  padding: 1.5rem;
 }
 
 .mxc-launcher-item {
@@ -691,6 +868,12 @@
   pointer-events: none;
 }
 
+/* CanvasKindIcons — a header's tool cluster: tap targets touching, like every header set. */
+.mxc-kind-icons {
+  display: inline-flex;
+  align-items: center;
+}
+
 /* CanvasFrame — for hosts without their own shell. */
 .mxc-frame {
   display: flex;
@@ -725,16 +908,28 @@
     display: none !important;
   }
 
+  /* Slides in from the right edge, the full width of the screen. */
   .mxc-column[data-placement="docked"] {
     position: fixed;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: auto;
     z-index: var(--mxc-mobile-z, 60);
+    width: 0;
+    --mxc-gap: 0px;
+    --mxc-radius: 0px;
+  }
+
+  .mxc-column[data-placement="docked"][data-open] {
     width: 100%;
+  }
+
+  .mxc-column[data-placement="docked"] > .mxc-column-inner {
+    width: 100vw;
     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 {

package/dist/{toggleKind-A9v45oSb.d.cts → toggleKind-BD78LnMB.d.cts}

@@ -37,6 +37,20 @@ type CanvasWindowId = string & {
     readonly [windowIdBrand]: true;
 };
 declare const CANVAS_MAIN_WINDOW: CanvasWindowId;
+/**
+ * Where a tab was before it navigated in place (`controller.navigate`). Plain
+ * JSON, so history persists with the layout; Back reopens the last entry.
+ */
+interface CanvasHistoryEntry {
+    readonly kind: string;
+    readonly key: string;
+    readonly title: string | null;
+    readonly data: CanvasJson;
+}
+/** The built-in "New tab" item: the launcher, shown as a tab. Never registered as a kind. */
+declare const CANVAS_LAUNCHER_KIND = "canvas.launcher";
+/** How many steps Back can go in one tab. Older entries fall off. */
+declare const CANVAS_HISTORY_LIMIT = 50;
 interface CanvasItem {
     readonly id: CanvasItemId;
     /** Registered kind id (see `registerCanvasKind`). */
@@ -48,6 +62,14 @@ interface CanvasItem {
     readonly data: CanvasJson;
     readonly openedAt: number;
     readonly updatedAt: number;
+    /** Earlier contents of this tab, oldest first (navigate in place). Absent = no Back. */
+    readonly history?: readonly CanvasHistoryEntry[] | undefined;
+    /**
+     * The mounted body's identity. Minted when the item is created and kept by
+     * `rekey`, so a draft that receives its durable id keeps its live body.
+     * Absent on items saved before 0.5.0 (the item id stands in).
+     */
+    readonly instance?: string | undefined;
 }
 interface CanvasPane {
     readonly id: CanvasPaneId;
@@ -122,6 +144,15 @@ interface CanvasState extends CanvasWindowFrame {
 type CanvasOpenTarget = "focused" | "split-right" | "split-down" | {
     readonly paneId: CanvasPaneId;
 };
+/** Where a NEW item of a kind prefers to open while the canvas already shows something. */
+type CanvasPreferredTarget = "focused" | "split-right" | "split-down";
+/** What a tab navigates to in place. */
+interface CanvasNavigateInput {
+    readonly kind: string;
+    readonly key: string;
+    readonly title?: string | null | undefined;
+    readonly data?: CanvasJson | undefined;
+}
 interface CanvasOpenInput {
     readonly kind: string;
     /** Which window a NEW item opens in. Default: the controller's window (main). An existing item stays where it is. */
@@ -184,6 +215,19 @@ type CanvasAction = {
         itemId: CanvasItemId;
         key: string;
     };
+} | {
+    type: `${typeof P}navigate`;
+    payload: {
+        itemId: CanvasItemId;
+        to: CanvasNavigateInput;
+        now: number;
+    };
+} | {
+    type: `${typeof P}back`;
+    payload: {
+        itemId: CanvasItemId;
+        now: number;
+    };
 } | {
     type: `${typeof P}closeItem`;
     payload: {
@@ -288,6 +332,10 @@ declare const canvasActions: {
     }) => CanvasAction;
     /** Gives an item a new identity in place (e.g. a draft that was just saved and now has an id). */
     readonly rekey: (itemId: CanvasItemId, key: string) => CanvasAction;
+    /** Replaces a tab's content with another item in place, remembering what it showed (Back returns). */
+    readonly navigate: (itemId: CanvasItemId, to: CanvasNavigateInput) => CanvasAction;
+    /** Returns a tab to what it showed before its last navigate. */
+    readonly back: (itemId: CanvasItemId) => CanvasAction;
     readonly closeItem: (itemId: CanvasItemId) => CanvasAction;
     readonly closeOthers: (itemId: CanvasItemId) => CanvasAction;
     readonly activate: (itemId: CanvasItemId) => CanvasAction;
@@ -521,6 +569,11 @@ interface CanvasControllerOptions {
     readonly windowPorts?: (() => CanvasWindowPorts) | undefined;
     /** Session hooks for a kind, or undefined when the kind is not session-backed. */
     readonly sessions?: ((kind: string) => CanvasSessionHooks | undefined) | undefined;
+    /**
+     * Where a NEW item of a kind opens while the canvas already shows something
+     * (a kind's `preferredTarget`). An explicit `target` always wins.
+     */
+    readonly preferredTarget?: ((kind: string) => CanvasPreferredTarget | undefined) | undefined;
 }
 interface CanvasController {
     readonly store: CanvasStoreBinding;
@@ -537,6 +590,17 @@ interface CanvasController {
     }): boolean;
     /** Gives an item a new identity in place (a draft that was saved and now has a durable id). */
     rekey(itemId: CanvasItemId, key: string): CanvasItemId | null;
+    /**
+     * Replaces a tab's content with another item IN PLACE and records history,
+     * so the pane header offers Back. Identity still holds: when the target is
+     * already open, it is focused where it is (a launcher tab then closes; any
+     * other tab keeps what it shows). Returns the item now shown, or null.
+     */
+    navigate(itemId: CanvasItemId, to: CanvasNavigateInput): CanvasItemId | null;
+    /** Returns a tab to what it showed before (see navigate). Null when it has no history. */
+    back(itemId: CanvasItemId): CanvasItemId | null;
+    /** Opens the launcher as a new tab in a pane (default: this window's focused pane), or focuses the one already there. */
+    newTab(paneId?: CanvasPaneId): CanvasItemId;
     close(itemId: CanvasItemId): void;
     closeOthers(itemId: CanvasItemId): void;
     activate(itemId: CanvasItemId): void;
@@ -573,6 +637,46 @@ interface CanvasController {
 }
 declare function createCanvasController(options: CanvasControllerOptions): CanvasController;
 
+/**
+ * Presentation — what a body knows about the space the canvas gives it.
+ *
+ * A body rendered in the canvas is told so, and told its live shape: a tall
+ * narrow pane is not a wide page. Content that lays itself out in a direction
+ * (a graph, a timeline, a row of cards) reads `orientation` and flows down a
+ * portrait pane instead of across it. Pure data and pure functions, so a
+ * desktop main process can compute the same answer for a native view.
+ */
+type CanvasPresentationOrientation = "portrait" | "landscape" | "square";
+interface CanvasPresentation {
+    /** Always "canvas" — a body rendered anywhere else gets no presentation at all. */
+    readonly host: "canvas";
+    /** The body's size in CSS pixels, live. */
+    readonly width: number;
+    readonly height: number;
+    readonly orientation: CanvasPresentationOrientation;
+    /** Narrower than `CANVAS_NARROW_WIDTH`: one column of content at most. */
+    readonly isNarrow: boolean;
+    /** The canvas is expanded to fill the space its host gives it. */
+    readonly isFullscreen: boolean;
+    /** How many panes the window's canvas shows right now. */
+    readonly paneCount: number;
+}
+/** Under this width (px) a body is narrow. */
+declare const CANVAS_NARROW_WIDTH = 480;
+declare function canvasOrientation(width: number, height: number): CanvasPresentationOrientation;
+declare function canvasPresentation(input: {
+    readonly width: number;
+    readonly height: number;
+    readonly isFullscreen: boolean;
+    readonly paneCount: number;
+}): CanvasPresentation;
+/**
+ * Which way content with a layout direction should flow: "vertical" (top to
+ * bottom) in a portrait or narrow body, "horizontal" (left to right) otherwise
+ * and outside the canvas.
+ */
+declare function preferredFlowDirection(presentation: CanvasPresentation | null | undefined): "vertical" | "horizontal";
+
 /**
  * "Toggle or focus this kind" — what a toolbar icon does (the desktop's
  * Terminal/Review/Browser icons, the web's quick-tool launchers):
@@ -602,4 +706,4 @@ interface ToggleKindInput {
 /** Returns what the item is after the click. */
 declare function toggleKind(controller: CanvasController, input: ToggleKindInput): CanvasKindVisibility;
 
-export { createLocalStorageCanvasPersistence as $, type CanvasOpenInput as A, type CanvasOpenTarget as B, type CanvasItemId as C, type CanvasOrientation as D, type CanvasPersistencePort as E, type CanvasRect as F, type CanvasSessionAttachReason as G, type CanvasSessionDetachReason as H, type CanvasSessionEvent as I, type CanvasSessionHooks as J, type CanvasSplitId as K, type CanvasWindowCloseMode as L, type CanvasWindowFrame as M, type CanvasWindowPorts as N, bindCanvasToReduxStore as O, canvasActions as P, canvasReducer as Q, type ReduxStoreLike as R, canvasWindowFrame as S, type ToggleKindInput as T, canvasWindowOfPane as U, clampDraggedCanvasWidth as V, consoleCanvasErrorSink as W, createCanvasController as X, createCanvasStore as Y, createInitialCanvasState as Z, createKeyValueCanvasPersistence as _, type CanvasWindowId as a, defaultCanvasWidth as a0, fitCanvasWidth as a1, foldCanvasWindows as a2, isCanvasAction as a3, listCanvasWindowIds as a4, resolveCanvasLayoutRules as a5, sanitizeCanvasSnapshot as a6, selectCanvasKindVisibility as a7, shouldStackSplit as a8, toPersistableSnapshot as a9, toggleKind as aa, type CanvasJson as b, type CanvasLayoutNode as c, type CanvasPaneId as d, type CanvasStoreBinding as e, type CanvasState as f, type CanvasAction as g, type CanvasController as h, type CanvasItem as i, type CanvasExtraWindow as j, type CanvasPane as k, canvasWindowOfItem as l, CANVAS_DEFAULT_KEY as m, CANVAS_DEFAULT_WIDTH as n, CANVAS_DESKTOP_LAYOUT_RULES as o, CANVAS_MAIN_WINDOW as p, CANVAS_MIN_SPLIT_FRACTION as q, CANVAS_MIN_WIDTH as r, CANVAS_STORAGE_KEY as s, CANVAS_WEB_LAYOUT_RULES as t, type CanvasControllerOptions as u, type CanvasErrorReport as v, type CanvasErrorSink as w, type CanvasKeyValueStore as x, type CanvasKindVisibility as y, type CanvasLayoutRules as z };
+export { canvasPresentation as $, type CanvasErrorSink as A, type CanvasKeyValueStore as B, type CanvasItemId as C, type CanvasKindVisibility as D, type CanvasLayoutRules as E, type CanvasNavigateInput as F, type CanvasOpenInput as G, type CanvasOpenTarget as H, type CanvasOrientation as I, type CanvasPersistencePort as J, type CanvasPreferredTarget as K, type CanvasPresentation as L, type CanvasPresentationOrientation as M, type CanvasRect as N, type CanvasSessionAttachReason as O, type CanvasSessionDetachReason as P, type CanvasSessionEvent as Q, type CanvasSessionHooks as R, type CanvasSplitId as S, type CanvasWindowCloseMode as T, type CanvasWindowFrame as U, type CanvasWindowPorts as V, type ReduxStoreLike as W, type ToggleKindInput as X, bindCanvasToReduxStore as Y, canvasActions as Z, canvasOrientation as _, type CanvasWindowId as a, canvasReducer as a0, canvasWindowFrame as a1, canvasWindowOfPane as a2, clampDraggedCanvasWidth as a3, consoleCanvasErrorSink as a4, createCanvasController as a5, createCanvasStore as a6, createInitialCanvasState as a7, createKeyValueCanvasPersistence as a8, createLocalStorageCanvasPersistence as a9, defaultCanvasWidth as aa, fitCanvasWidth as ab, foldCanvasWindows as ac, isCanvasAction as ad, listCanvasWindowIds as ae, preferredFlowDirection as af, resolveCanvasLayoutRules as ag, sanitizeCanvasSnapshot as ah, selectCanvasKindVisibility as ai, shouldStackSplit as aj, toPersistableSnapshot as ak, toggleKind as al, type CanvasJson as b, type CanvasLayoutNode as c, type CanvasPaneId as d, type CanvasStoreBinding as e, type CanvasState as f, type CanvasAction as g, type CanvasController as h, type CanvasItem as i, type CanvasExtraWindow as j, type CanvasHistoryEntry as k, type CanvasPane as l, canvasWindowOfItem as m, CANVAS_DEFAULT_KEY as n, CANVAS_DEFAULT_WIDTH as o, CANVAS_DESKTOP_LAYOUT_RULES as p, CANVAS_HISTORY_LIMIT as q, CANVAS_LAUNCHER_KIND as r, CANVAS_MAIN_WINDOW as s, CANVAS_MIN_SPLIT_FRACTION as t, CANVAS_MIN_WIDTH as u, CANVAS_NARROW_WIDTH as v, CANVAS_STORAGE_KEY as w, CANVAS_WEB_LAYOUT_RULES as x, type CanvasControllerOptions as y, type CanvasErrorReport as z };