@ai-matrx/canvas 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 0.7.0
+
+Second independent live sweep (admin, clone):
+
+- **Splits never make unusable panes.** A 3-way split of a 640px canvas gave 154/154/308px panes whose headers overlapped. The web now has `paneMinWidth` = `CANVAS_PANE_MIN_WIDTH` (280px): a side-by-side split whose panes would be narrower renders STACKED (the layout tree is unchanged; a wider canvas gets the columns back).
+- **Tabs: a name in full when there is room, an ellipsis when there is not, a menu past that** (Chrome / VS Code). Tabs shrink — the active tab least (`flex-shrink: 0.2`) — to a floor of icon + ~6 letters + "…" (`CANVAS_TAB_MIN_WIDTH` 78px; active `CANVAS_ACTIVE_TAB_MIN_WIDTH` 100px). A name really cut (`data-truncated`, measured >1px) ends in "…" (a lone tab's title too). Tabs that do not fit at their floor go into **"All tabs (N)"** (every tab by name, the current one marked; host-drawn through `showMenu` when the host draws menus); the active tab is always shown. At the narrowest the strip is the active tab's title and that menu. The strip no longer scrolls: the scroll chevrons (which sat over "+" and "⋮") are gone, the strip is `flex-basis: 0` + `overflow: hidden`, and nothing in the header overlaps another control. The wheel over an overflowing strip steps through tabs. Pure rule: `fitCanvasTabs(count, activeIndex, width)`.
+- **Phones: one pane, the header always describes it.** The pane menu offers no Split on a phone. The presented pane is the focused one only when it holds a tab, else the first pane that does (`selectCanvasPresentedPaneId`) — header and body read the same pane (a split used to show "Quick Chat" over an empty launcher, with no Back).
+- **A toggle never leaves an empty canvas.** `toggleKind` (header toggles, `CanvasKindIcons`) closing the canvas's LAST tab also puts the canvas away.
+- **Edge drags select nothing.** The width handle and split handles run through `beginCanvasResize`: the page's selection is cleared and `selectstart` is refused for the drag (on top of `user-select: none`); a lost pointer capture ends the drag.
+- **Forward.** `CanvasItem.forward` (JSON, persisted): Back pushes what it leaves; Forward (`controller.forward`, reducer `forward`, `selectCanvasCanGoForward`) returns the SAME live body Back left; a navigate elsewhere ends the trail. The header shows Forward beside Back only when there is somewhere to go. Shortcut data: `canvas.back` (⌘[) and `canvas.forward` (⌘]) — `web: false` (browsers own those keys).
+- **One pane menu.** A body offers its own actions with `useCanvasMenuItems(itemId, items)`; they join the pane's one "⋮" menu after the kind's `menuItems` and before the host's `itemActions` and the pane actions (Split, Pop out, Close). Read when the menu opens. A body never draws a second overflow button in the header.
+
+### Consumer action
+
+- A kind body that portals its own overflow ("…") into the pane header: offer those actions through `useCanvasMenuItems` instead.
+- A kind `HeaderAction` drawn with tap-target buttons: the pane header is a solid bar — use `TapTargetButtonTransparent` (the placement rules: glass only floats).
+- CSS that targeted `.mxc-tabs-scroll` or the strip's fade: gone (the strip no longer scrolls).
+
+## 0.6.1
+
+Live measurement of 0.6.0 (a 756px pane, five tabs, Quick Chat's header actions present):
+
+- **The strip takes the header's free width** (`flex: 1`). Sized to its own intrinsic width, the browser undercut every text tab by 2–3px and cut each name; now tabs lay out in real room ("+" sits at the strip's end).
+- **No ellipsis.** System fonts overflow their intrinsic width by a fraction of a pixel, which put "…" on names that fit ("Quick Ch…"). Titles clip; a name really cut (`data-truncated` on the tab, measured: more than 1px) fades at its end.
+- **Room for names:** only the active tab reserves its (always shown) close's room — a background tab's close overlays on hover with the name fading under it; icon gap 4px; an empty leading slot takes no room and no gap (the actions keep the end with `margin-left: auto`).
+
+### Consumer action
+
+- None.
+
 ## 0.6.0
 
 Independent live sweep (admin, clone):

package/README.md

@@ -58,15 +58,30 @@ Every pane header has "+" (a launcher tab). Choosing in the launcher NAVIGATES t
 ```ts
 canvas.navigate(item.id, { kind: "doc", key: docId, data: { docId } }); // records history; Back returns
 canvas.back(item.id);
+canvas.forward(item.id); // after Back: the same live body Back left
 ```
 
 Navigating to something already open elsewhere focuses it there (a launcher tab closes; any other tab keeps what it shows). History is plain JSON and persists. A lone tab shown as a title keeps its own close.
 
 **Back never throws a body away.** The newest `CANVAS_KEEP_ALIVE_DEPTH` (5) steps Back can reach, and the 5 most recent contents Back stepped away from (`item.kept`), keep their bodies mounted and hidden. Back returns the SAME live body; choosing a content Back left (Quick Chat again from the launcher) revives its body — a typed draft is still there. Older steps still work but mount fresh. Closing the tab disposes every kept body.
 
-**The strip.** A tab is as wide as its name (up to 12rem); tabs shrink evenly only when the header runs out of room (floor 4.5rem), then the strip scrolls — the clipped edge fades and chevrons page it. The active tab stays in view.
+**Forward.** After Back the header also shows Forward (`selectCanvasCanGoForward`); it returns the same live body Back left. A navigate somewhere new ends the forward trail. Shortcut data `canvas.back` / `canvas.forward` (⌘[ / ⌘]) is for a desktop host; browsers own those keys.
 
-**Phones** (`CANVAS_PHONE_MAX_WIDTH`, 767px): the column presents ONE pane — the focused one — whose strip carries every pane's tabs; choosing a tab from another pane presents that pane. The layout tree is untouched, so a wider screen gets its split back.
+**The strip.** A tab is as wide as its name (up to 12rem). Short of room, tabs shrink — the active tab least — to icon + ~6 letters + "…" (`CANVAS_TAB_MIN_WIDTH`; the active tab keeps `CANVAS_ACTIVE_TAB_MIN_WIDTH`); a name really cut ends in an ellipsis and every tab's tooltip is its full name. Tabs that do not fit at their floor are reached from "All tabs (N)"; the active tab is always shown. At the narrowest the strip is the active tab's title and that menu. Nothing scrolls and nothing in the header overlaps another control (`fitCanvasTabs` is the rule).
+
+**Splits.** A side-by-side split whose panes would be narrower than `paneMinWidth` (web: `CANVAS_PANE_MIN_WIDTH`, 280px) renders stacked; the tree is unchanged.
+
+**Phones** (`CANVAS_PHONE_MAX_WIDTH`, 767px): the column presents ONE pane — the focused one when it holds a tab, else the first that does (`selectCanvasPresentedPaneId`) — whose strip carries every pane's tabs; choosing a tab from another pane presents that pane. The pane menu offers no Split. The layout tree is untouched, so a wider screen gets its split back.
+
+## One pane menu
+
+A pane has ONE menu: the kind's `menuItems`, then what the body offers right now, then the host's `itemActions`, then Split / Pop out / Close. A body adds its own actions — never a second overflow button in the header:
+
+```tsx
+useCanvasMenuItems(item.id, [{ id: "next", label: "Next record", onSelect: goNext }]);
+```
+
+A kind's `HeaderAction` sits on the solid pane header: draw tap-target buttons with `TapTargetButtonTransparent` (glass only floats).
 
 ## A page's own launcher entries
 

package/dist/index.cjs

@@ -30,6 +30,7 @@ __export(src_exports, {
   CANVAS_MIN_SPLIT_FRACTION: () => CANVAS_MIN_SPLIT_FRACTION,
   CANVAS_MIN_WIDTH: () => CANVAS_MIN_WIDTH,
   CANVAS_NARROW_WIDTH: () => CANVAS_NARROW_WIDTH,
+  CANVAS_PANE_MIN_WIDTH: () => CANVAS_PANE_MIN_WIDTH,
   CANVAS_PHONE_MAX_WIDTH: () => CANVAS_PHONE_MAX_WIDTH,
   CANVAS_SHORTCUTS: () => CANVAS_SHORTCUTS,
   CANVAS_STORAGE_KEY: () => CANVAS_STORAGE_KEY,
@@ -70,6 +71,7 @@ __export(src_exports, {
   sanitizeCanvasSnapshot: () => sanitizeCanvasSnapshot,
   selectCanvasActiveItem: () => selectCanvasActiveItem,
   selectCanvasCanGoBack: () => selectCanvasCanGoBack,
+  selectCanvasCanGoForward: () => selectCanvasCanGoForward,
   selectCanvasExtraWindow: () => selectCanvasExtraWindow,
   selectCanvasFocusedPaneId: () => selectCanvasFocusedPaneId,
   selectCanvasIsFullscreen: () => selectCanvasIsFullscreen,
@@ -82,6 +84,7 @@ __export(src_exports, {
   selectCanvasLayout: () => selectCanvasLayout,
   selectCanvasPane: () => selectCanvasPane,
   selectCanvasPaneCount: () => selectCanvasPaneCount,
+  selectCanvasPresentedPaneId: () => selectCanvasPresentedPaneId,
   selectCanvasWidth: () => selectCanvasWidth,
   selectCanvasWindowItemCount: () => selectCanvasWindowItemCount,
   selectCanvasWindowOfItem: () => selectCanvasWindowOfItem,
@@ -267,6 +270,8 @@ var canvasActions = {
   navigate: (itemId, to) => ({ type: `${P}navigate`, payload: { itemId, to, now: Date.now() } }),
   /** Returns a tab to what it showed before its last navigate. */
   back: (itemId) => ({ type: `${P}back`, payload: { itemId, now: Date.now() } }),
+  /** Re-does the last Back (the step Back left), with that step's live body. */
+  forward: (itemId) => ({ type: `${P}forward`, payload: { itemId, now: Date.now() } }),
   closeItem: (itemId) => ({ type: `${P}closeItem`, payload: { itemId } }),
   closeOthers: (itemId) => ({ type: `${P}closeOthers`, payload: { itemId } }),
   activate: (itemId) => ({ type: `${P}activate`, payload: { itemId } }),
@@ -467,6 +472,7 @@ function newItem(kind, key, title, data, now, steps) {
   const id = canvasItemId(kind, key);
   const history = steps?.history ?? [];
   const kept = steps?.kept ?? [];
+  const forward = steps?.forward ?? [];
   return {
     id,
     kind,
@@ -478,7 +484,8 @@ function newItem(kind, key, title, data, now, steps) {
     // A reused instance is the SAME live body coming back (Back, or returning to a kept step).
     instance: steps?.instance ?? `${now.toString(36)}:${id}`,
     ...history.length > 0 ? { history: history.slice(-CANVAS_HISTORY_LIMIT) } : {},
-    ...kept.length > 0 ? { kept: kept.slice(-CANVAS_KEEP_ALIVE_DEPTH) } : {}
+    ...kept.length > 0 ? { kept: kept.slice(-CANVAS_KEEP_ALIVE_DEPTH) } : {},
+    ...forward.length > 0 ? { forward: forward.slice(-CANVAS_HISTORY_LIMIT) } : {}
   };
 }
 function historyEntry(item) {
@@ -524,12 +531,14 @@ function sanitizeHistory(raw) {
 function sanitizeItem(item) {
   const history = sanitizeHistory(item.history);
   const kept = sanitizeHistory(item.kept).slice(-CANVAS_KEEP_ALIVE_DEPTH);
-  const { history: _history, kept: _kept, instance, ...rest } = item;
+  const forward = sanitizeHistory(item.forward);
+  const { history: _history, kept: _kept, forward: _forward, instance, ...rest } = item;
   return {
     ...rest,
     ...typeof instance === "string" && instance ? { instance } : {},
     ...history.length > 0 ? { history } : {},
-    ...kept.length > 0 ? { kept } : {}
+    ...kept.length > 0 ? { kept } : {},
+    ...forward.length > 0 ? { forward } : {}
   };
 }
 function clampWidth(width) {
@@ -720,6 +729,9 @@ function canvasReducer(state = createInitialCanvasState(), action) {
       const keptIndex = keptAll.findIndex((entry) => canvasItemId(entry.kind, entry.key) === targetId);
       const revived = keptIndex >= 0 ? keptAll[keptIndex] : void 0;
       const kept = keptAll.filter((_, i) => i !== keptIndex);
+      const forwardAll = current.forward ?? [];
+      const nextForward = forwardAll[forwardAll.length - 1];
+      const forward = nextForward && canvasItemId(nextForward.kind, nextForward.key) === targetId ? forwardAll.slice(0, -1) : [];
       return replaceInPlace(
         state,
         current,
@@ -729,7 +741,7 @@ function canvasReducer(state = createInitialCanvasState(), action) {
           to.title !== void 0 ? to.title : revived?.title ?? null,
           to.data !== void 0 ? to.data : revived?.data ?? null,
           now,
-          { history, kept, instance: revived?.instance }
+          { history, kept, forward, instance: revived?.instance }
         )
       );
     }
@@ -745,10 +757,36 @@ function canvasReducer(state = createInitialCanvasState(), action) {
         return focusExisting(canvasReducer(state, canvasActions.closeItem(itemId)), targetId);
       }
       const kept = [...(current.kept ?? []).filter((k) => canvasItemId(k.kind, k.key) !== itemId), historyEntry(current)];
+      const forward = [...current.forward ?? [], historyEntry(current)];
       return replaceInPlace(
         state,
         current,
-        newItem(entry.kind, entry.key, entry.title, entry.data, now, { history: history.slice(0, -1), kept, instance: entry.instance })
+        newItem(entry.kind, entry.key, entry.title, entry.data, now, { history: history.slice(0, -1), kept, forward, instance: entry.instance })
+      );
+    }
+    case `${P}forward`: {
+      const { itemId, now } = action.payload;
+      const current = state.items[itemId];
+      const forwardAll = current?.forward ?? [];
+      const entry = forwardAll[forwardAll.length - 1];
+      if (!current || !entry || !paneOf(state, itemId)) return state;
+      const targetId = canvasItemId(entry.kind, entry.key);
+      if (targetId === itemId) return state;
+      if (state.items[targetId]) {
+        return focusExisting(canvasReducer(state, canvasActions.closeItem(itemId)), targetId);
+      }
+      const keptAll = current.kept ?? [];
+      const revived = keptAll.find((k) => canvasItemId(k.kind, k.key) === targetId);
+      const kept = keptAll.filter((k) => canvasItemId(k.kind, k.key) !== targetId);
+      return replaceInPlace(
+        state,
+        current,
+        newItem(entry.kind, entry.key, entry.title, entry.data, now, {
+          history: [...current.history ?? [], historyEntry(current)],
+          kept,
+          forward: forwardAll.slice(0, -1),
+          instance: revived?.instance ?? entry.instance
+        })
       );
     }
     case `${P}closeItem`: {
@@ -1077,6 +1115,7 @@ function toPersistableSnapshot(state, isRestorable) {
 }
 
 // src/core/rules.ts
+var CANVAS_PANE_MIN_WIDTH = 280;
 var CANVAS_WEB_LAYOUT_RULES = {
   defaultWidth: CANVAS_DEFAULT_WIDTH,
   minWidth: CANVAS_MIN_WIDTH,
@@ -1084,7 +1123,9 @@ var CANVAS_WEB_LAYOUT_RULES = {
   // Split down 70/30 like the desktop: what opens below (notifications, a feed) is the smaller pane.
   stackSplit: 0.7,
   sideSplit: 0.5,
-  paneMinWidth: 0
+  // A pane narrower than this cannot show a header (Back, a readable tab, "+", the menu, close) and a
+  // body side by side with another: a split right that would go under it stacks instead.
+  paneMinWidth: CANVAS_PANE_MIN_WIDTH
 };
 var CANVAS_DESKTOP_LAYOUT_RULES = {
   defaultWidth: { fraction: 0.36 },
@@ -1131,6 +1172,9 @@ var CANVAS_SHORTCUTS = [
   { id: "canvas.toggleFullscreen", accelerator: "CmdOrCtrl+Shift+Enter", when: "canvas-focus", label: "Expand canvas", web: true },
   { id: "canvas.splitRight", accelerator: "CmdOrCtrl+Alt+\\", when: "canvas-focus", label: "Split right", web: true },
   { id: "canvas.splitDown", accelerator: "CmdOrCtrl+Alt+Shift+\\", when: "canvas-focus", label: "Split down", web: true },
+  // Browsers own ⌘[ / ⌘] for their own history: data for a desktop host (and the header's Back / Forward).
+  { id: "canvas.back", accelerator: "CmdOrCtrl+[", when: "canvas-focus", label: "Back", web: false },
+  { id: "canvas.forward", accelerator: "CmdOrCtrl+]", when: "canvas-focus", label: "Forward", web: false },
   { id: "canvas.closeTab", accelerator: "CmdOrCtrl+W", when: "canvas-focus", label: "Close tab", web: false },
   { id: "canvas.nextTab", accelerator: "Ctrl+Tab", when: "canvas-focus", label: "Next tab", web: false },
   { id: "canvas.previousTab", accelerator: "Ctrl+Shift+Tab", when: "canvas-focus", label: "Previous tab", web: false }
@@ -1180,11 +1224,17 @@ function runCanvasCommand(controller, id, windowId = controller.windowId) {
       if (!frame2?.isOpen || !pane) return false;
       controller.splitPane(pane.id, id === "canvas.splitRight" ? "horizontal" : "vertical", pane.itemIds.length > 1 ? pane.activeItemId ?? void 0 : void 0);
       return true;
+    case "canvas.back":
+      if (!frame2?.isOpen || !pane?.activeItemId) return false;
+      return controller.back(pane.activeItemId) !== null;
+    case "canvas.forward":
+      if (!frame2?.isOpen || !pane?.activeItemId) return false;
+      return controller.forward(pane.activeItemId) !== null;
     default:
       return false;
   }
 }
-var CODE_FOR = { "\\": "Backslash", Tab: "Tab", Escape: "Escape", Enter: "Enter" };
+var CODE_FOR = { "\\": "Backslash", "[": "BracketLeft", "]": "BracketRight", Tab: "Tab", Escape: "Escape", Enter: "Enter" };
 function matchesCanvasAccelerator(input, accelerator, isMac) {
   const parts = accelerator.split("+");
   const key = parts.pop() ?? "";
@@ -1301,6 +1351,13 @@ function view(shared, windowId) {
       dispatch(canvasActions.back(itemId));
       return canvasItemId(entry.kind, entry.key);
     },
+    forward(itemId) {
+      const forward = store.getState().items[itemId]?.forward ?? [];
+      const entry = forward[forward.length - 1];
+      if (!entry) return null;
+      dispatch(canvasActions.forward(itemId));
+      return canvasItemId(entry.kind, entry.key);
+    },
     newTab(paneId) {
       const state = store.getState();
       const frame2 = canvasWindowFrame(state, windowId);
@@ -1584,6 +1641,16 @@ function selectCanvasItemHistory(s, itemId) {
   return s.items[itemId]?.history ?? NO_HISTORY;
 }
 var selectCanvasCanGoBack = (s, itemId) => (s.items[itemId]?.history?.length ?? 0) > 0;
+var selectCanvasCanGoForward = (s, itemId) => (s.items[itemId]?.forward?.length ?? 0) > 0;
+function selectCanvasPresentedPaneId(s, windowId) {
+  const f = frame(s, windowId);
+  if (!f) return null;
+  const ids = listPaneIds(f.layout);
+  const holds = (id) => (s.panes[id]?.itemIds.length ?? 0) > 0;
+  const focused = ids.find((id) => id === f.focusedPaneId);
+  if (focused && holds(focused)) return focused;
+  return ids.find(holds) ?? focused ?? ids[0] ?? null;
+}
 
 // src/core/presentation.ts
 var CANVAS_PHONE_MAX_WIDTH = 767;
@@ -1633,7 +1700,9 @@ function toggleKind(controller, input) {
   const before = selectCanvasKindVisibility(controller.getState(), input.kind, key);
   if (before === "visible") {
     if ((input.whenVisible ?? "close") === "close") {
+      const windowId = canvasWindowOfItem(controller.getState(), itemId);
       controller.close(itemId);
+      if (windowId && selectCanvasWindowItemCount(controller.getState(), windowId) === 0) controller.hide(windowId);
     } else {
       controller.hide(canvasWindowOfItem(controller.getState(), itemId) ?? void 0);
     }