@ai-matrx/canvas 0.8.4 → 0.9.0

package/dist/react.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentType, ReactNode, CSSProperties, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';
-import { b as CanvasJson, i as CanvasItem, d as CanvasPaneId, h as CanvasController, a as CanvasWindowId, O as CanvasPresentation, T as CanvasSessionEvent, R as CanvasSessionAttachReason, S as CanvasSessionDetachReason, N as CanvasPreferredTarget, C as CanvasItemId, Q as CanvasRect, e as CanvasStoreBinding, M as CanvasPersistencePort, E as CanvasErrorSink, H as CanvasLayoutRules, _ as ToggleKindInput, G as CanvasKindVisibility, f as CanvasState } from './toggleKind-BoFnqhzq.cjs';
+import { b as CanvasJson, i as CanvasItem, d as CanvasPaneId, h as CanvasController, a as CanvasWindowId, Q as CanvasPresentation, V as CanvasSessionEvent, T as CanvasSessionAttachReason, U as CanvasSessionDetachReason, P as CanvasPreferredTarget, C as CanvasItemId, S as CanvasRect, e as CanvasStoreBinding, O as CanvasPersistencePort, F as CanvasErrorSink, I as CanvasLayoutRules, a0 as ToggleKindInput, H as CanvasKindVisibility, f as CanvasState } from './toggleKind-CI2nBjum.cjs';
 
 /**
  * THE canvas kind registry. A kind is one sort of thing the canvas can show —
@@ -392,13 +392,29 @@ declare function CanvasPaneView({ paneId }: {
     paneId: CanvasPaneId;
 }): react.JSX.Element | null;
 /**
- * Every tab's floor (px): icon + ~10 letters + "…" — still readable. Tabs shrink
- * evenly from 12rem down to this; past it the strip scrolls. Mirrored to CSS as
- * --mxc-tab-min.
+ * Every tab's floor (px): icon + ~10 letters + "…" — still readable. Tabs share
+ * the strip evenly from 12rem down to this; a tab that would go under it is not
+ * drawn (it waits in "All tabs"). Mirrored to CSS as --mxc-tab-min.
  */
 declare const CANVAS_TAB_MIN_WIDTH = 120;
-/** True when `count` tabs at their floor do not fit `width` px: the strip scrolls and offers "All tabs". */
-declare function canvasTabsOverflow(count: number, width: number): boolean;
+/** Room kept for "All tabs" (its chevron and the count of tabs out of the strip) while it shows. */
+declare const CANVAS_TAB_LIST_ROOM = 44;
+/** The run of strip entries drawn whole: `start` (inclusive) to `end` (exclusive). */
+interface CanvasTabWindow {
+    readonly start: number;
+    readonly end: number;
+    /** True when even the current entry alone is wider than the room: it is drawn under its floor (ellipsis). */
+    readonly squeezed: boolean;
+}
+/**
+ * Which strip entries are drawn: every one when they fit at their floor; else
+ * the run that fits WHOLE beside "All tabs" and holds the current entry, moved
+ * as little as possible from `previousStart` (so switching tabs does not
+ * reshuffle the strip). A tab is never drawn sliced at an edge — the rest wait
+ * in "All tabs". `units` is each entry's width in tabs (a split's joined tab
+ * counts its halves). An unmeasured strip (width 0) draws everything.
+ */
+declare function fitCanvasTabWindow(units: readonly number[], current: number, width: number, previousStart?: number): CanvasTabWindow;
 /** One entry of a strip: a tab, or a split's visible tabs drawn as ONE joined tab (Chrome split view). */
 type CanvasStripEntry = {
     readonly type: "tab";
@@ -531,4 +547,4 @@ interface BrowserBarProps {
 /** A browser's back · forward · reload · address bar, for a kind's leading slot or its body. */
 declare function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, trailing, className }: BrowserBarProps): react.JSX.Element;
 
-export { type AnyCanvasKind, BrowserBar, type BrowserBarProps, type BrowserTab, BrowserTabs, type BrowserTabsProps, CANVAS_TAB_MIN_WIDTH, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindIcon, CanvasKindIcons, type CanvasKindProps, type CanvasLauncherEntry, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, type CanvasStripEntry, type CanvasStripTab, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, CanvasToggle, CanvasWindowScope, CanvasWindowTabs, beginCanvasResize, canvasSessionKey, canvasTabsOverflow, defineCanvasKind, getCanvasKind, itemTitle, listCanvasKinds, planCanvasTabStrip, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKindToggle, useCanvasKinds, useCanvasLauncherEntries, useCanvasLauncherEntry, useCanvasMenuItems, useCanvasNativeBodies, useCanvasPresentation, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };
+export { type AnyCanvasKind, BrowserBar, type BrowserBarProps, type BrowserTab, BrowserTabs, type BrowserTabsProps, CANVAS_TAB_LIST_ROOM, CANVAS_TAB_MIN_WIDTH, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindIcon, CanvasKindIcons, type CanvasKindProps, type CanvasLauncherEntry, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, type CanvasStripEntry, type CanvasStripTab, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, type CanvasTabWindow, CanvasToggle, CanvasWindowScope, CanvasWindowTabs, beginCanvasResize, canvasSessionKey, defineCanvasKind, fitCanvasTabWindow, getCanvasKind, itemTitle, listCanvasKinds, planCanvasTabStrip, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKindToggle, useCanvasKinds, useCanvasLauncherEntries, useCanvasLauncherEntry, useCanvasMenuItems, useCanvasNativeBodies, useCanvasPresentation, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };

package/dist/react.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentType, ReactNode, CSSProperties, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';
-import { b as CanvasJson, i as CanvasItem, d as CanvasPaneId, h as CanvasController, a as CanvasWindowId, O as CanvasPresentation, T as CanvasSessionEvent, R as CanvasSessionAttachReason, S as CanvasSessionDetachReason, N as CanvasPreferredTarget, C as CanvasItemId, Q as CanvasRect, e as CanvasStoreBinding, M as CanvasPersistencePort, E as CanvasErrorSink, H as CanvasLayoutRules, _ as ToggleKindInput, G as CanvasKindVisibility, f as CanvasState } from './toggleKind-BoFnqhzq.js';
+import { b as CanvasJson, i as CanvasItem, d as CanvasPaneId, h as CanvasController, a as CanvasWindowId, Q as CanvasPresentation, V as CanvasSessionEvent, T as CanvasSessionAttachReason, U as CanvasSessionDetachReason, P as CanvasPreferredTarget, C as CanvasItemId, S as CanvasRect, e as CanvasStoreBinding, O as CanvasPersistencePort, F as CanvasErrorSink, I as CanvasLayoutRules, a0 as ToggleKindInput, H as CanvasKindVisibility, f as CanvasState } from './toggleKind-CI2nBjum.js';
 
 /**
  * THE canvas kind registry. A kind is one sort of thing the canvas can show —
@@ -392,13 +392,29 @@ declare function CanvasPaneView({ paneId }: {
     paneId: CanvasPaneId;
 }): react.JSX.Element | null;
 /**
- * Every tab's floor (px): icon + ~10 letters + "…" — still readable. Tabs shrink
- * evenly from 12rem down to this; past it the strip scrolls. Mirrored to CSS as
- * --mxc-tab-min.
+ * Every tab's floor (px): icon + ~10 letters + "…" — still readable. Tabs share
+ * the strip evenly from 12rem down to this; a tab that would go under it is not
+ * drawn (it waits in "All tabs"). Mirrored to CSS as --mxc-tab-min.
  */
 declare const CANVAS_TAB_MIN_WIDTH = 120;
-/** True when `count` tabs at their floor do not fit `width` px: the strip scrolls and offers "All tabs". */
-declare function canvasTabsOverflow(count: number, width: number): boolean;
+/** Room kept for "All tabs" (its chevron and the count of tabs out of the strip) while it shows. */
+declare const CANVAS_TAB_LIST_ROOM = 44;
+/** The run of strip entries drawn whole: `start` (inclusive) to `end` (exclusive). */
+interface CanvasTabWindow {
+    readonly start: number;
+    readonly end: number;
+    /** True when even the current entry alone is wider than the room: it is drawn under its floor (ellipsis). */
+    readonly squeezed: boolean;
+}
+/**
+ * Which strip entries are drawn: every one when they fit at their floor; else
+ * the run that fits WHOLE beside "All tabs" and holds the current entry, moved
+ * as little as possible from `previousStart` (so switching tabs does not
+ * reshuffle the strip). A tab is never drawn sliced at an edge — the rest wait
+ * in "All tabs". `units` is each entry's width in tabs (a split's joined tab
+ * counts its halves). An unmeasured strip (width 0) draws everything.
+ */
+declare function fitCanvasTabWindow(units: readonly number[], current: number, width: number, previousStart?: number): CanvasTabWindow;
 /** One entry of a strip: a tab, or a split's visible tabs drawn as ONE joined tab (Chrome split view). */
 type CanvasStripEntry = {
     readonly type: "tab";
@@ -531,4 +547,4 @@ interface BrowserBarProps {
 /** A browser's back · forward · reload · address bar, for a kind's leading slot or its body. */
 declare function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload, onNavigate, trailing, className }: BrowserBarProps): react.JSX.Element;
 
-export { type AnyCanvasKind, BrowserBar, type BrowserBarProps, type BrowserTab, BrowserTabs, type BrowserTabsProps, CANVAS_TAB_MIN_WIDTH, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindIcon, CanvasKindIcons, type CanvasKindProps, type CanvasLauncherEntry, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, type CanvasStripEntry, type CanvasStripTab, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, CanvasToggle, CanvasWindowScope, CanvasWindowTabs, beginCanvasResize, canvasSessionKey, canvasTabsOverflow, defineCanvasKind, getCanvasKind, itemTitle, listCanvasKinds, planCanvasTabStrip, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKindToggle, useCanvasKinds, useCanvasLauncherEntries, useCanvasLauncherEntry, useCanvasMenuItems, useCanvasNativeBodies, useCanvasPresentation, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };
+export { type AnyCanvasKind, BrowserBar, type BrowserBarProps, type BrowserTab, BrowserTabs, type BrowserTabsProps, CANVAS_TAB_LIST_ROOM, CANVAS_TAB_MIN_WIDTH, CanvasColumn, type CanvasColumnProps, type CanvasFloating, CanvasFrame, CanvasHeaderButton, type CanvasHeaderButtonProps, type CanvasHostPorts, type CanvasKind, type CanvasKindIcon, CanvasKindIcons, type CanvasKindProps, type CanvasLauncherEntry, type CanvasMenuEntry, type CanvasMenuItem, CanvasMenuTrigger, type CanvasNativeBodyFrame, type CanvasNativeBodyInfo, type CanvasNativeRect, type CanvasOverlayPort, CanvasPaneView, CanvasPanel, CanvasPanelEmpty, type CanvasPanelProps, CanvasProvider, type CanvasProviderProps, type CanvasShowMenu, type CanvasStripEntry, type CanvasStripTab, CanvasTab, type CanvasTabProps, type CanvasTabStripMode, type CanvasTabWindow, CanvasToggle, CanvasWindowScope, CanvasWindowTabs, beginCanvasResize, canvasSessionKey, defineCanvasKind, fitCanvasTabWindow, getCanvasKind, itemTitle, listCanvasKinds, planCanvasTabStrip, registerCanvasKind, registerCanvasKinds, useCanvas, useCanvasColumnWidth, useCanvasHostPorts, useCanvasIsPresented, useCanvasKind, useCanvasKindToggle, useCanvasKinds, useCanvasLauncherEntries, useCanvasLauncherEntry, useCanvasMenuItems, useCanvasNativeBodies, useCanvasPresentation, useCanvasState, useCanvasWindowId, useOptionalCanvas, useOptionalCanvasState };

package/dist/react.js

@@ -987,6 +987,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,
@@ -1000,7 +1001,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 clampFraction = (value, fallback) => Number.isFinite(value) ? Math.min(0.88, Math.max(0.12, value)) : fallback;
 function resolveCanvasLayoutRules(rules) {
@@ -1012,7 +1016,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) {
@@ -1031,6 +1036,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 = [
@@ -1128,6 +1157,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(),
@@ -1148,6 +1178,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 });
@@ -1178,6 +1216,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,
@@ -1186,7 +1231,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 };
@@ -1251,7 +1297,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)),
@@ -2332,7 +2386,7 @@ function BrowserBar({ url, canGoBack, canGoForward, onBack, onForward, onReload,
             "data-slot": "browser-address",
             className: "mxc-address",
             value: draft,
-            placeholder: "Search or enter an address",
+            placeholder: "Search or enter website",
             spellCheck: false,
             onFocus: (event) => {
               setEditing(true);
@@ -3169,9 +3223,36 @@ function PaneTitle({ item, kind }) {
 }
 var CANVAS_TAB_MIN_WIDTH = 120;
 var TAB_GAP = 2;
-function canvasTabsOverflow(count, width) {
-  if (count <= 1 || width <= 0) return false;
-  return count * CANVAS_TAB_MIN_WIDTH + (count - 1) * TAB_GAP > width;
+var CANVAS_TAB_LIST_ROOM = 44;
+function fitCanvasTabWindow(units, current, width, previousStart = 0) {
+  const n = units.length;
+  const need = (i) => Math.max(1, units[i] ?? 1) * CANVAS_TAB_MIN_WIDTH;
+  const all = units.reduce((sum, _, i) => sum + need(i), 0) + Math.max(0, n - 1) * TAB_GAP;
+  if (n <= 1 || width <= 0 || all <= width) return { start: 0, end: n, squeezed: n === 1 && width > 0 && all > width };
+  const room = width - CANVAS_TAB_LIST_ROOM;
+  const at = Math.min(n - 1, Math.max(0, current));
+  let start = Math.min(Math.max(0, previousStart), at);
+  let used = 0;
+  let end = start;
+  while (end < n && used + need(end) + (end > start ? TAB_GAP : 0) <= room) {
+    used += need(end) + (end > start ? TAB_GAP : 0);
+    end += 1;
+  }
+  if (end <= at) {
+    start = at;
+    end = at + 1;
+    used = need(at);
+    while (start > 0 && used + TAB_GAP + need(start - 1) <= room) {
+      start -= 1;
+      used += TAB_GAP + need(start);
+    }
+  } else {
+    while (start > 0 && used + TAB_GAP + need(start - 1) <= room) {
+      start -= 1;
+      used += TAB_GAP + need(start);
+    }
+  }
+  return { start, end, squeezed: need(at) > room && end - start === 1 };
 }
 function planCanvasTabStrip(tabs, actives) {
   const joined = actives ? tabs.filter((tab) => actives.get(tab.paneId) === tab.itemId) : [];
@@ -3206,9 +3287,12 @@ function TabStrip({
   activeItemId,
   actives
 }) {
+  const canvas = useCanvas();
   const strip = useRef7(null);
   const list = useRef7(null);
   const [width, setWidth] = useState5(0);
+  const windowStart = useRef7(0);
+  const focusAfterMove = useRef7(false);
   const read = useRef7(() => {
   });
   useIsoLayoutEffect4(() => {
@@ -3233,31 +3317,31 @@ function TabStrip({
   useIsoLayoutEffect4(() => {
     read.current();
   }, [tabs.length]);
-  useEffect7(() => {
-    const el = list.current;
-    if (!el) return void 0;
-    const onWheel = (event) => {
-      if (Math.abs(event.deltaY) <= Math.abs(event.deltaX) || el.scrollWidth <= el.clientWidth) return;
-      event.preventDefault();
-      el.scrollLeft += event.deltaY;
-    };
-    el.addEventListener("wheel", onWheel, { passive: false });
-    return () => el.removeEventListener("wheel", onWheel);
-  }, []);
   useIsoLayoutEffect4(() => {
-    const el = list.current;
-    if (!el || !activeItemId) return;
-    const tab = [...el.querySelectorAll("[data-mxc-tab]")].find((node) => node.dataset.mxcTab === activeItemId);
-    if (!tab) return;
-    const target = tab.closest(".mxc-tab-group") ?? tab;
-    const box = el.getBoundingClientRect();
-    const rect = target.getBoundingClientRect();
-    if (rect.left < box.left) el.scrollLeft -= box.left - rect.left;
-    else if (rect.right > box.right) el.scrollLeft += rect.right - box.right;
-  }, [activeItemId, width, tabs.length]);
+    if (!focusAfterMove.current || !activeItemId) return;
+    focusAfterMove.current = false;
+    tabElement(list.current, activeItemId)?.focus();
+  }, [activeItemId]);
   const entries = planCanvasTabStrip(tabs, actives);
-  const overflow = canvasTabsOverflow(tabs.length, width);
+  const entryTabs = (entry) => entry.type === "tab" ? [entry.tab] : entry.tabs;
+  const current = Math.max(
+    0,
+    entries.findIndex((entry) => entryTabs(entry).some((tab) => tab.itemId === activeItemId))
+  );
+  const fit = fitCanvasTabWindow(
+    entries.map((entry) => entryTabs(entry).length),
+    current,
+    width,
+    windowStart.current
+  );
+  useIsoLayoutEffect4(() => {
+    windowStart.current = fit.start;
+  });
+  const shown = entries.slice(fit.start, fit.end);
+  const hidden = tabs.length - shown.reduce((sum, entry) => sum + entryTabs(entry).length, 0);
+  const overflow = hidden > 0;
   const joined = entries.some((entry) => entry.type === "split");
+  const order = entries.flatMap(entryTabs).map((tab) => tab.itemId);
   const isActive = (tab) => actives ? actives.get(tab.paneId) === tab.itemId : tab.itemId === activeItemId;
   const tabView = (tab) => /* @__PURE__ */ jsx7(
     ItemTab,
@@ -3270,6 +3354,22 @@ function TabStrip({
     },
     tab.itemId
   );
+  const onKeyDown = (event) => {
+    const keys = ["ArrowLeft", "ArrowRight", "Home", "End"];
+    if (!keys.includes(event.key) || event.altKey || event.ctrlKey || event.metaKey || order.length < 2) return;
+    const from = event.target.closest("[data-mxc-tab]")?.dataset.mxcTab;
+    const at = from ? order.indexOf(from) : -1;
+    if (at < 0) return;
+    event.preventDefault();
+    const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+    const step = event.key === "ArrowRight" !== rtl ? 1 : -1;
+    const next = event.key === "Home" ? 0 : event.key === "End" ? order.length - 1 : (at + step + order.length) % order.length;
+    const target = order[next];
+    if (!target) return;
+    focusAfterMove.current = true;
+    canvas.activate(target);
+    tabElement(list.current, target)?.focus();
+  };
   return /* @__PURE__ */ jsxs6(
     "div",
     {
@@ -3286,8 +3386,9 @@ function TabStrip({
             role: "tablist",
             "aria-label": "Canvas tabs",
             "aria-multiselectable": joined ? true : void 0,
-            onKeyDown: moveTabFocus,
-            children: entries.map(
+            "data-squeezed": fit.squeezed ? "" : void 0,
+            onKeyDown,
+            children: shown.map(
               (entry) => entry.type === "tab" ? tabView(entry.tab) : /* @__PURE__ */ jsx7(
                 "div",
                 {
@@ -3302,32 +3403,24 @@ function TabStrip({
             )
           }
         ),
-        overflow ? /* @__PURE__ */ jsx7(TabListMenu, { tabs, activeItemId }) : null
+        overflow ? /* @__PURE__ */ jsx7(TabListMenu, { tabs, activeItemId, hidden }) : null
       ]
     }
   );
 }
-function moveTabFocus(event) {
-  const keys = ["ArrowLeft", "ArrowRight", "Home", "End"];
-  if (!keys.includes(event.key) || event.altKey || event.ctrlKey || event.metaKey) return;
-  const tabs = [...event.currentTarget.querySelectorAll('[role="tab"]')];
-  const at = tabs.findIndex((tab) => tab === event.target || tab.contains(event.target));
-  if (at < 0 || tabs.length < 2) return;
-  event.preventDefault();
-  const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
-  const step = event.key === "ArrowRight" !== rtl ? 1 : -1;
-  const next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : (at + step + tabs.length) % tabs.length;
-  const target = tabs[next];
-  target?.focus();
-  target?.click();
-}
-function TabListMenu({ tabs, activeItemId }) {
+function tabElement(list, itemId) {
+  return [...list?.querySelectorAll("[data-mxc-tab]") ?? []].find((node) => node.dataset.mxcTab === itemId);
+}
+function TabListMenu({ tabs, activeItemId, hidden }) {
   const canvas = useCanvas();
   const { ports, layer } = useCanvasInternals();
   const blocking = useRef7(null);
   useEffect7(() => () => blocking.current?.(), []);
   const label = `All tabs (${tabs.length})`;
-  const trigger = (props) => /* @__PURE__ */ jsx7(CanvasHeaderButton, { className: "mxc-tab-list", label, ...props, children: /* @__PURE__ */ jsx7(ChevronDownIcon, {}) });
+  const trigger = (props) => /* @__PURE__ */ jsxs6(CanvasHeaderButton, { className: "mxc-tab-list", label, ...props, children: [
+    /* @__PURE__ */ jsx7("span", { className: "mxc-tab-list-count", "aria-hidden": "true", children: hidden }),
+    /* @__PURE__ */ jsx7(ChevronDownIcon, {})
+  ] });
   const showMenu = ports.showMenu;
   if (showMenu) {
     return trigger({
@@ -3445,10 +3538,9 @@ function PaneMenu({
     return [
       [...kindItems, ...bodyItems, ...hostItems].map((entry) => ({ ...entry, id: `item:${entry.id}` })),
       [
-        ...canSplit ? [
-          { id: "split-right", label: "Split right", icon: /* @__PURE__ */ jsx7(SplitRightIcon, {}), onSelect: () => canvas.splitPane(paneId, "horizontal", moveId) },
-          { id: "split-down", label: "Split down", icon: /* @__PURE__ */ jsx7(SplitDownIcon, {}), onSelect: () => canvas.splitPane(paneId, "vertical", moveId) }
-        ] : [],
+        // Only a split that leaves both panes usable (the layout rules' minimums) is offered.
+        ...canSplit && canvas.fitSplit(paneId, "horizontal") === "horizontal" ? [{ id: "split-right", label: "Split right", icon: /* @__PURE__ */ jsx7(SplitRightIcon, {}), onSelect: () => canvas.splitPane(paneId, "horizontal", moveId) }] : [],
+        ...canSplit && canvas.fitSplit(paneId, "vertical") === "vertical" ? [{ id: "split-down", label: "Split down", icon: /* @__PURE__ */ jsx7(SplitDownIcon, {}), onSelect: () => canvas.splitPane(paneId, "vertical", moveId) }] : [],
         ...activeItem && role === "pop-out" ? [{ id: "dock-back", label: "Dock back", icon: /* @__PURE__ */ jsx7(DockIcon, {}), onSelect: () => void canvas.dockBack(activeItem.id) }] : activeItem && ports.popOut ? [{ id: "pop-out", label: "Pop out", icon: /* @__PURE__ */ jsx7(PopOutIcon, {}), onSelect: () => void canvas.popOut(activeItem.id) }] : []
       ],
       activeItem ? [
@@ -3557,6 +3649,15 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
   const [slots] = useState6(createCanvasSlots);
   const ref = useRef8(null);
   useRegisterCanvasPresence();
+  useEffect8(
+    () => controller.registerPaneMeasure((paneId) => {
+      const section = slots.section(paneId);
+      if (!section?.isConnected) return null;
+      const rect = section.getBoundingClientRect();
+      return rect.width > 0 && rect.height > 0 ? { width: rect.width, height: rect.height } : null;
+    }),
+    [controller, slots]
+  );
   useEffect8(() => {
     const el = ref.current;
     if (!el) return void 0;
@@ -3678,28 +3779,42 @@ function LayoutNodeView({ node }) {
   if (node.type === "pane") return /* @__PURE__ */ jsx8(CanvasPaneView, { paneId: node.paneId });
   return /* @__PURE__ */ jsx8(SplitView, { node });
 }
-function useMeasuredWidth(ref, enabled) {
-  const [width, setWidth] = useState6(0);
+function useMeasuredSize(ref, enabled) {
+  const [size, setSize] = useState6({ width: 0, height: 0 });
   useIsoLayoutEffect5(() => {
     const el = ref.current;
     if (!enabled || !el) return;
-    setWidth(el.getBoundingClientRect().width);
+    const read = () => {
+      const rect = el.getBoundingClientRect();
+      setSize((prev) => prev.width === rect.width && prev.height === rect.height ? prev : { width: rect.width, height: rect.height });
+    };
+    read();
     if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(() => setWidth(el.getBoundingClientRect().width));
+    const observer = new ResizeObserver(read);
     observer.observe(el);
     return () => observer.disconnect();
   }, [enabled]);
-  return width;
+  return size;
+}
+function panesAlong(node, orientation) {
+  if (node.type === "pane") return 1;
+  const counts = node.children.map((child) => panesAlong(child, orientation));
+  return node.orientation === orientation ? counts.reduce((a, b) => a + b, 0) : Math.max(...counts);
+}
+function childMinimums(node, orientation, rules) {
+  const unit = orientation === "vertical" ? rules.paneMinHeight : rules.paneMinWidth;
+  return node.children.map((child) => unit * panesAlong(child, orientation));
 }
 function SplitView({ node }) {
   const canvas = useCanvas();
   const ref = useRef8(null);
   const [liveSizes, setLiveSizes] = useState6(null);
-  const sizes = liveSizes ?? node.sizes;
-  const measuredWidth = useMeasuredWidth(ref, node.orientation === "horizontal" && canvas.rules.paneMinWidth > 0);
-  const stacked = node.orientation === "horizontal" && shouldStackSplit(measuredWidth, node.children.length, canvas.rules);
+  const measured = useMeasuredSize(ref, canvas.rules.paneMinWidth > 0 || canvas.rules.paneMinHeight > 0);
+  const stacked = node.orientation === "horizontal" && shouldStackSplit(measured.width, node.children.length, canvas.rules);
   const orientation = stacked ? "vertical" : node.orientation;
   const horizontal = orientation === "horizontal";
+  const mins = childMinimums(node, orientation, canvas.rules);
+  const sizes = fitCanvasSplitSizes(liveSizes ?? node.sizes, horizontal ? measured.width : measured.height, mins);
   const beginDrag = (index) => (event) => {
     const el = ref.current;
     if (!el) return;
@@ -3708,14 +3823,15 @@ function SplitView({ node }) {
     const rect = el.getBoundingClientRect();
     const total = horizontal ? rect.width : rect.height;
     const origin = horizontal ? event.clientX : event.clientY;
-    const base = [...node.sizes];
+    const base = [...sizes];
     const pair = (base[index] ?? 0) + (base[index + 1] ?? 0);
+    const minFirst = Math.max(CANVAS_MIN_SPLIT_FRACTION, total > 0 ? (mins[index] ?? 0) / total : 0);
+    const minSecond = Math.max(CANVAS_MIN_SPLIT_FRACTION, total > 0 ? (mins[index + 1] ?? 0) / total : 0);
     const target = event.currentTarget;
     const end = beginCanvasResize(horizontal ? "col" : "row");
     const compute = (pos) => {
       const delta = (pos - origin) / total;
-      const min = CANVAS_MIN_SPLIT_FRACTION;
-      const first = Math.min(pair - min, Math.max(min, (base[index] ?? 0) + delta));
+      const first = Math.max(Math.min(pair - minSecond, Math.max(minFirst, (base[index] ?? 0) + delta)), Math.min(minFirst, pair / 2));
       const next = [...base];
       next[index] = first;
       next[index + 1] = pair - first;
@@ -3830,6 +3946,7 @@ function CanvasFrame({ children, className }) {
 export {
   BrowserBar,
   BrowserTabs,
+  CANVAS_TAB_LIST_ROOM,
   CANVAS_TAB_MIN_WIDTH,
   CanvasColumn,
   CanvasFrame,
@@ -3846,8 +3963,8 @@ export {
   CanvasWindowTabs,
   beginCanvasResize,
   canvasSessionKey,
-  canvasTabsOverflow,
   defineCanvasKind,
+  fitCanvasTabWindow,
   getCanvasKind,
   itemTitle,
   listCanvasKinds,