@ai-matrx/canvas 0.8.4 → 0.9.0

package/dist/react.cjs

@@ -34,6 +34,7 @@ var react_exports = {};
 __export(react_exports, {
   BrowserBar: () => BrowserBar,
   BrowserTabs: () => BrowserTabs,
+  CANVAS_TAB_LIST_ROOM: () => CANVAS_TAB_LIST_ROOM,
   CANVAS_TAB_MIN_WIDTH: () => CANVAS_TAB_MIN_WIDTH,
   CanvasColumn: () => CanvasColumn,
   CanvasFrame: () => CanvasFrame,
@@ -50,8 +51,8 @@ __export(react_exports, {
   CanvasWindowTabs: () => CanvasWindowTabs,
   beginCanvasResize: () => beginCanvasResize,
   canvasSessionKey: () => canvasSessionKey,
-  canvasTabsOverflow: () => canvasTabsOverflow,
   defineCanvasKind: () => defineCanvasKind,
+  fitCanvasTabWindow: () => fitCanvasTabWindow,
   getCanvasKind: () => getCanvasKind,
   itemTitle: () => itemTitle,
   listCanvasKinds: () => listCanvasKinds,
@@ -1055,6 +1056,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,
@@ -1068,7 +1070,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) {
@@ -1080,7 +1085,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) {
@@ -1099,6 +1105,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 = [
@@ -1196,6 +1226,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(),
@@ -1216,6 +1247,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 });
@@ -1246,6 +1285,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,
@@ -1254,7 +1300,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 };
@@ -1319,7 +1366,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)),
@@ -2378,7 +2433,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);
@@ -3215,9 +3270,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) : [];
@@ -3252,9 +3334,12 @@ function TabStrip({
   activeItemId,
   actives
 }) {
+  const canvas = useCanvas();
   const strip = (0, import_react9.useRef)(null);
   const list = (0, import_react9.useRef)(null);
   const [width, setWidth] = (0, import_react9.useState)(0);
+  const windowStart = (0, import_react9.useRef)(0);
+  const focusAfterMove = (0, import_react9.useRef)(false);
   const read = (0, import_react9.useRef)(() => {
   });
   useIsoLayoutEffect4(() => {
@@ -3279,31 +3364,31 @@ function TabStrip({
   useIsoLayoutEffect4(() => {
     read.current();
   }, [tabs.length]);
-  (0, import_react9.useEffect)(() => {
-    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__ */ (0, import_jsx_runtime7.jsx)(
     ItemTab,
@@ -3316,6 +3401,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__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
@@ -3332,8 +3433,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__ */ (0, import_jsx_runtime7.jsx)(
                 "div",
                 {
@@ -3348,32 +3450,24 @@ function TabStrip({
             )
           }
         ),
-        overflow ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabListMenu, { tabs, activeItemId }) : null
+        overflow ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(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 = (0, import_react9.useRef)(null);
   (0, import_react9.useEffect)(() => () => blocking.current?.(), []);
   const label = `All tabs (${tabs.length})`;
-  const trigger = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CanvasHeaderButton, { className: "mxc-tab-list", label, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronDownIcon, {}) });
+  const trigger = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CanvasHeaderButton, { className: "mxc-tab-list", label, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mxc-tab-list-count", "aria-hidden": "true", children: hidden }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronDownIcon, {})
+  ] });
   const showMenu = ports.showMenu;
   if (showMenu) {
     return trigger({
@@ -3491,10 +3585,9 @@ function PaneMenu({
     return [
       [...kindItems, ...bodyItems, ...hostItems].map((entry) => ({ ...entry, id: `item:${entry.id}` })),
       [
-        ...canSplit ? [
-          { id: "split-right", label: "Split right", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SplitRightIcon, {}), onSelect: () => canvas.splitPane(paneId, "horizontal", moveId) },
-          { id: "split-down", label: "Split down", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(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__ */ (0, import_jsx_runtime7.jsx)(SplitRightIcon, {}), onSelect: () => canvas.splitPane(paneId, "horizontal", moveId) }] : [],
+        ...canSplit && canvas.fitSplit(paneId, "vertical") === "vertical" ? [{ id: "split-down", label: "Split down", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SplitDownIcon, {}), onSelect: () => canvas.splitPane(paneId, "vertical", moveId) }] : [],
         ...activeItem && role === "pop-out" ? [{ id: "dock-back", label: "Dock back", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DockIcon, {}), onSelect: () => void canvas.dockBack(activeItem.id) }] : activeItem && ports.popOut ? [{ id: "pop-out", label: "Pop out", icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopOutIcon, {}), onSelect: () => void canvas.popOut(activeItem.id) }] : []
       ],
       activeItem ? [
@@ -3603,6 +3696,15 @@ function CanvasColumn({ className, style, onLiveWidth, placement = "docked" }) {
   const [slots] = (0, import_react10.useState)(createCanvasSlots);
   const ref = (0, import_react10.useRef)(null);
   useRegisterCanvasPresence();
+  (0, import_react10.useEffect)(
+    () => 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]
+  );
   (0, import_react10.useEffect)(() => {
     const el = ref.current;
     if (!el) return void 0;
@@ -3724,28 +3826,42 @@ function LayoutNodeView({ node }) {
   if (node.type === "pane") return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CanvasPaneView, { paneId: node.paneId });
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SplitView, { node });
 }
-function useMeasuredWidth(ref, enabled) {
-  const [width, setWidth] = (0, import_react10.useState)(0);
+function useMeasuredSize(ref, enabled) {
+  const [size, setSize] = (0, import_react10.useState)({ 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 = (0, import_react10.useRef)(null);
   const [liveSizes, setLiveSizes] = (0, import_react10.useState)(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;
@@ -3754,14 +3870,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;