@ai-matrx/canvas 0.8.5 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.9.0
+
+Live walk of 0.8.5 (localhost, 2026-10-07): the scrolling strip showed the tabs beside the current one sliced at its edges ("uick Chat", "aved items", "atchpad"), and at 375px the second tab was just "("; Quick Notes / Notifications / Quick Chat stacked in an 800px window left Notifications its header and one row.
+
+- **A tab is drawn whole or not at all** (JetBrains' single-row tabs; a scrolling strip — VS Code, Firefox — always leaves half-tabs at its edges). Tabs still shrink evenly from 12rem to the 120px floor; past it the strip draws the run of tabs that fits whole beside "All tabs" and holds the current tab, moving as little as possible when you switch (`fitCanvasTabWindow`). "All tabs (N)" shows how many tabs are out of the strip. The tab list no longer scrolls (no wheel-scroll); Left/Right/Home/End walk every tab, drawn or not. A strip narrower than one tab (a phone header) draws the current tab alone, its name ending in "…".
+- **Panes keep a usable height.** New rule `paneMinHeight` (`CANVAS_PANE_MIN_HEIGHT` 200px, web and desktop). A split draws no child shorter than its minimum (`fitCanvasSplitSizes`; stored shares unchanged, divider drags stop at it). A new split — `open` with `split-down`/`split-right` (a kind's `preferredTarget` included) or `splitPane` — that cannot give both panes their minimum goes the other axis when that fits, else the new tab joins the focused pane (`fitCanvasSplit`, measured by the column through the new `controller.registerPaneMeasure`; `controller.fitSplit(paneId, orientation)` answers it). The pane menu offers only the splits that fit.
+- **Removed:** `canvasTabsOverflow` (no consumer). **Added:** `fitCanvasTabWindow`, `CANVAS_TAB_LIST_ROOM`, `CanvasTabWindow`, `fitCanvasSplit`, `fitCanvasSplitSizes`, `CANVAS_PANE_MIN_HEIGHT`, `CanvasPaneMeasure`.
+
+### Consumer action
+
+- None for hosts that render `<CanvasColumn/>`. CSS that targeted `.mxc-tabs` scrolling: gone. A host passing a full `CanvasLayoutRules` object may add `paneMinHeight` (missing → 200 via `resolveCanvasLayoutRules`; 0 turns it off).
+
 ## 0.8.5
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/README.md

@@ -67,9 +67,9 @@ Navigating to something already open elsewhere focuses it there (a launcher tab
 
 **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.
 
-**The strip** (Chrome's model). Tabs share the strip evenly — 12rem each with room — and shrink together to one readable floor, icon + ~10 letters + "…" (`CANVAS_TAB_MIN_WIDTH`, 120px); a cut name always ends in an ellipsis and every tab's tooltip is its full name. Past the floor the tab list scrolls sideways (wheel, trackpad; the current tab is kept in view) and "All tabs (N)" lists every tab (`canvasTabsOverflow` is the rule). A tab never shrinks to an icon sliver and nothing in the header overlaps another control.
+**The strip** (Chrome's model). Tabs share the strip evenly — 12rem each with room — and shrink together to one readable floor, icon + ~10 letters + "…" (`CANVAS_TAB_MIN_WIDTH`, 120px); a cut name always ends in an ellipsis and every tab's tooltip is its full name. Past the floor the strip draws only the tabs that fit WHOLE, a run around the current tab that moves as little as possible (`fitCanvasTabWindow`), and "All tabs (N)" lists every tab and shows how many are out of the strip — a tab is never sliced at an edge (JetBrains' single-row tabs; a scrolling strip, as in VS Code or Firefox, leaves half-tabs at both edges). The arrow keys walk every tab. A tab never shrinks to an icon sliver and nothing in the header overlaps another control.
 
-**Splits.** A split canvas keeps ONE window-wide tab strip above its panes (`CanvasWindowTabs`), never one per pane: every pane's tabs are in it, the panes' visible tabs are drawn as ONE joined tab (the focused pane's half strongest; `planCanvasTabStrip`), and its "+" opens in the focused pane. Each pane header keeps its own Back/Forward, title, kind controls and menu. A side-by-side split whose panes would be narrower than `paneMinWidth` (web: `CANVAS_PANE_MIN_WIDTH`, 280px) renders stacked under the same one strip; the tree is unchanged.
+**Splits.** A split canvas keeps ONE window-wide tab strip above its panes (`CanvasWindowTabs`), never one per pane: every pane's tabs are in it, the panes' visible tabs are drawn as ONE joined tab (the focused pane's half strongest; `planCanvasTabStrip`), and its "+" opens in the focused pane. Each pane header keeps its own Back/Forward, title, kind controls and menu. A side-by-side split whose panes would be narrower than `paneMinWidth` (web: `CANVAS_PANE_MIN_WIDTH`, 280px) renders stacked under the same one strip; the tree is unchanged. Every pane keeps `paneMinHeight` (`CANVAS_PANE_MIN_HEIGHT`, 200px): a split draws no child shorter (`fitCanvasSplitSizes`), and a new split that cannot give both panes their minimum goes the other axis, or the new tab joins the focused pane (`fitCanvasSplit`; the pane menu offers only splits that fit).
 
 **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.
 
@@ -150,9 +150,10 @@ toggleKind(controller, { kind: "terminal" }); // absent → open · behind → f
 | `defaultWidth` | 640 | `{ fraction: 0.36 }` |
 | `minWidth` | 360 | 360 |
 | `centreMinWidth` (the canvas shrinks first) | 600 | 520 |
-| `stackSplit` (split down: first pane's share) | 0.5 | 0.7 |
+| `stackSplit` (split down: first pane's share) | 0.7 | 0.7 |
 | `sideSplit` | 0.5 | 0.5 |
-| `paneMinWidth` (narrower side-by-side panes stack) | 0 (never) | 360 |
+| `paneMinWidth` (narrower side-by-side panes stack) | 280 | 360 |
+| `paneMinHeight` (no pane shorter; a split that cannot fit goes the other way or opens as a tab) | 200 | 200 |
 
 Expand is one flag per window; it fills whatever the host placed the column in (`useCanvasColumnWidth()` returns `null`).
 

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_HEIGHT: () => CANVAS_PANE_MIN_HEIGHT,
   CANVAS_PANE_MIN_WIDTH: () => CANVAS_PANE_MIN_WIDTH,
   CANVAS_PHONE_MAX_WIDTH: () => CANVAS_PHONE_MAX_WIDTH,
   CANVAS_SHORTCUTS: () => CANVAS_SHORTCUTS,
@@ -56,6 +57,8 @@ __export(src_exports, {
   createRemoteCanvasStore: () => createRemoteCanvasStore,
   defaultCanvasWidth: () => defaultCanvasWidth,
   findNonJson: () => findNonJson,
+  fitCanvasSplit: () => fitCanvasSplit,
+  fitCanvasSplitSizes: () => fitCanvasSplitSizes,
   fitCanvasWidth: () => fitCanvasWidth,
   foldCanvasWindows: () => foldCanvasWindows,
   isCanvasAction: () => isCanvasAction,
@@ -1116,6 +1119,7 @@ function toPersistableSnapshot(state, isRestorable) {
 
 // src/core/rules.ts
 var CANVAS_PANE_MIN_WIDTH = 280;
+var CANVAS_PANE_MIN_HEIGHT = 200;
 var CANVAS_WEB_LAYOUT_RULES = {
   defaultWidth: CANVAS_DEFAULT_WIDTH,
   minWidth: CANVAS_MIN_WIDTH,
@@ -1129,7 +1133,10 @@ var CANVAS_WEB_LAYOUT_RULES = {
   sideSplit: 0.5,
   // 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
+  paneMinWidth: CANVAS_PANE_MIN_WIDTH,
+  // 2026-10-07 live: Quick Notes / Notifications / Quick Chat stacked in an 800px window left
+  // Notifications its header and one row.
+  paneMinHeight: CANVAS_PANE_MIN_HEIGHT
 };
 var CANVAS_DESKTOP_LAYOUT_RULES = {
   defaultWidth: { fraction: 0.36 },
@@ -1137,7 +1144,8 @@ var CANVAS_DESKTOP_LAYOUT_RULES = {
   centreMinWidth: 520,
   stackSplit: 0.7,
   sideSplit: 0.5,
-  paneMinWidth: 360
+  paneMinWidth: 360,
+  paneMinHeight: CANVAS_PANE_MIN_HEIGHT
 };
 var clampFraction = (value, fallback) => Number.isFinite(value) ? Math.min(0.88, Math.max(0.12, value)) : fallback;
 function resolveCanvasLayoutRules(rules) {
@@ -1149,7 +1157,8 @@ function resolveCanvasLayoutRules(rules) {
     centreMinWidth: positive(merged.centreMinWidth, CANVAS_WEB_LAYOUT_RULES.centreMinWidth),
     stackSplit: clampFraction(merged.stackSplit, 0.5),
     sideSplit: clampFraction(merged.sideSplit, 0.5),
-    paneMinWidth: positive(merged.paneMinWidth, 0)
+    paneMinWidth: positive(merged.paneMinWidth, 0),
+    paneMinHeight: positive(merged.paneMinHeight, 0)
   };
 }
 function defaultCanvasWidth(rules, region) {
@@ -1168,6 +1177,30 @@ function clampDraggedCanvasWidth(next, region, rules) {
 function shouldStackSplit(width, children, rules) {
   return rules.paneMinWidth > 0 && width > 0 && width < rules.paneMinWidth * children;
 }
+function fitCanvasSplit(size, orientation, rules) {
+  if (!size || size.width <= 0 || size.height <= 0) return orientation;
+  const sideFits = rules.paneMinWidth <= 0 || size.width >= 2 * rules.paneMinWidth;
+  const stackFits = rules.paneMinHeight <= 0 || size.height >= 2 * rules.paneMinHeight;
+  if (orientation === "horizontal") return sideFits || stackFits ? "horizontal" : null;
+  return stackFits ? "vertical" : sideFits ? "horizontal" : null;
+}
+function fitCanvasSplitSizes(sizes, total, mins) {
+  if (!(total > 0) || sizes.length === 0) return [...sizes];
+  const sum = sizes.reduce((a, b) => a + b, 0) || 1;
+  const px = sizes.map((s) => s / sum * total);
+  const floor = mins.map((m) => Number.isFinite(m) && m > 0 ? m : 0);
+  const needed = floor.reduce((a, b) => a + b, 0);
+  if (needed >= total) return needed > 0 ? floor.map((m) => m / needed) : px.map((p) => p / total);
+  const short = px.reduce((acc, p, i) => acc + Math.max(0, (floor[i] ?? 0) - p), 0);
+  if (short <= 0) return px.map((p) => p / total);
+  const spare = px.map((p, i) => Math.max(0, p - (floor[i] ?? 0)));
+  const spareSum = spare.reduce((a, b) => a + b, 0);
+  return px.map((p, i) => {
+    const min = floor[i] ?? 0;
+    if (p <= min) return min / total;
+    return (p - short * (spare[i] ?? 0) / spareSum) / total;
+  });
+}
 
 // src/core/commands.ts
 var CANVAS_SHORTCUTS = [
@@ -1265,6 +1298,7 @@ function createCanvasController(options) {
     options,
     onError: options.onError ?? consoleCanvasErrorSink,
     rules: resolveCanvasLayoutRules(options.layoutRules),
+    measures: /* @__PURE__ */ new Set(),
     presentations: /* @__PURE__ */ new Map(),
     presentationListeners: /* @__PURE__ */ new Set(),
     views: /* @__PURE__ */ new Map(),
@@ -1285,6 +1319,14 @@ function view(shared, windowId) {
     for (const listener of [...shared.presentationListeners]) listener();
   };
   const shareFor = (orientation) => orientation === "vertical" ? rules.stackSplit : rules.sideSplit;
+  const measurePane = (paneId) => {
+    for (const measure of shared.measures) {
+      const size = measure(paneId);
+      if (size) return size;
+    }
+    return null;
+  };
+  const fitSplit = (paneId, orientation) => fitCanvasSplit(measurePane(paneId), orientation, rules);
   const acceptable = (input) => {
     if (input.kind !== CANVAS_LAUNCHER_KIND && options.isKnownKind && !options.isKnownKind(input.kind)) {
       onError({ code: "unknown-kind", message: `No canvas kind "${input.kind}" is registered.`, detail: input });
@@ -1315,6 +1357,13 @@ function view(shared, windowId) {
     if (holding) return { paneId: holding };
     return state.panes[frame2.focusedPaneId]?.activeItemId ? preferred : "focused";
   };
+  const splitTargetFor = (asked, forWindow) => {
+    const state = store.getState();
+    const frame2 = canvasWindowFrame(state, forWindow ? canvasWindowId(forWindow) : windowId);
+    if (!frame2) return asked;
+    const fitted = fitSplit(frame2.focusedPaneId, asked === "split-down" ? "vertical" : "horizontal");
+    return fitted === null ? "focused" : fitted === "vertical" ? "split-down" : "split-right";
+  };
   const controller = {
     store,
     windowId,
@@ -1323,7 +1372,8 @@ function view(shared, windowId) {
     getState: () => store.getState(),
     open(input) {
       if (!acceptable(input)) return null;
-      const target = input.target ?? preferredTargetFor(input);
+      const asked = input.target ?? preferredTargetFor(input);
+      const target = asked === "split-down" || asked === "split-right" ? splitTargetFor(asked, input.windowId) : asked;
       const splitShare = target === "split-down" ? rules.stackSplit : target === "split-right" ? rules.sideSplit : void 0;
       const withTarget = input.target === target ? input : { ...input, target };
       const resolved = withTarget.windowId || windowId === CANVAS_MAIN_WINDOW ? withTarget : { ...withTarget, windowId };
@@ -1388,7 +1438,15 @@ function view(shared, windowId) {
     activate: (itemId) => dispatch(canvasActions.activate(itemId)),
     focusPane: (paneId) => dispatch(canvasActions.focusPane(paneId)),
     moveItem: (itemId, toPaneId, index) => dispatch(canvasActions.moveItem(itemId, toPaneId, index)),
-    splitPane: (paneId, orientation, moveItemId) => dispatch(canvasActions.splitPane(paneId, orientation, moveItemId, shareFor(orientation))),
+    splitPane(paneId, orientation, moveItemId) {
+      const fitted = fitSplit(paneId, orientation);
+      if (fitted) dispatch(canvasActions.splitPane(paneId, fitted, moveItemId, shareFor(fitted)));
+    },
+    fitSplit,
+    registerPaneMeasure(measure) {
+      shared.measures.add(measure);
+      return () => void shared.measures.delete(measure);
+    },
     closePane: (paneId) => dispatch(canvasActions.closePane(paneId)),
     resizeSplit: (splitId, sizes) => dispatch(canvasActions.resizeSplit(splitId, sizes)),
     show: (w = windowId) => dispatch(canvasActions.setOpen(true, w)),