@adecore/ui 0.31.12 → 0.33.0

package/dist/workspace/Workspace.js

@@ -1,30 +1,280 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import 'react';
 import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
 import { WorkspaceContext } from './context.js';
-const isPresent = (node) => node !== undefined && node !== null && node !== false;
-export function Workspace({ layout = 'standard', toolbar, sidebar, sidePanel, sidebarWidth = 248, sidePanelWidth = 320, sidebarOpen, sidePanelOpen, children, className, ref, render, style, ...props }) {
-    const hasSidebar = isPresent(sidebar);
-    const hasPanel = isPresent(sidePanel);
-    const leftOpen = hasSidebar && (sidebarOpen ?? true);
-    const rightOpen = hasPanel && (sidePanelOpen ?? true);
-    const hasToolbar = isPresent(toolbar);
-    const element = useRender({
-        render,
-        ref,
-        defaultTagName: 'div',
-        props: {
-            ...props,
-            className: clsx('ade-workspace', className),
-            style,
-            'data-layout': layout,
-            'data-toolbar': hasToolbar || undefined,
-            'data-sidebar': leftOpen || undefined,
-            'data-side-panel': rightOpen || undefined,
-            children: (_jsxs(_Fragment, { children: [hasSidebar && (_jsx("aside", { className: "ade-workspace-sidebar", "data-auto": sidebarWidth === 'auto' || undefined, style: { width: sidebarWidth }, children: sidebar })), _jsxs("div", { className: "ade-workspace-center", children: [hasToolbar && _jsx("div", { className: "ade-workspace-toolbar", children: toolbar }), _jsx("div", { className: "ade-workspace-content", children: children })] }), hasPanel && (_jsx("aside", { className: "ade-workspace-side-panel", "data-auto": sidePanelWidth === 'auto' || undefined, style: { width: sidePanelWidth }, children: sidePanel }))] }))
-        }
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const isPresent = node => node !== undefined && node !== null && node !== false;
+export function Workspace(t0) {
+  const $ = _c(66);
+  let children;
+  let className;
+  let props;
+  let ref;
+  let render;
+  let sidePanel;
+  let sidePanelOpen;
+  let sidebar;
+  let sidebarOpen;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  let toolbar;
+  if ($[0] !== t0) {
+    ({
+      layout: t1,
+      toolbar,
+      sidebar,
+      sidePanel,
+      sidebarWidth: t2,
+      sidePanelWidth: t3,
+      sidebarOpen,
+      sidePanelOpen,
+      children,
+      className,
+      ref,
+      render,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = ref;
+    $[5] = render;
+    $[6] = sidePanel;
+    $[7] = sidePanelOpen;
+    $[8] = sidebar;
+    $[9] = sidebarOpen;
+    $[10] = style;
+    $[11] = t1;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = toolbar;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    ref = $[4];
+    render = $[5];
+    sidePanel = $[6];
+    sidePanelOpen = $[7];
+    sidebar = $[8];
+    sidebarOpen = $[9];
+    style = $[10];
+    t1 = $[11];
+    t2 = $[12];
+    t3 = $[13];
+    toolbar = $[14];
+  }
+  const layout = t1 === undefined ? "standard" : t1;
+  const sidebarWidth = t2 === undefined ? 248 : t2;
+  const sidePanelWidth = t3 === undefined ? 320 : t3;
+  let t4;
+  if ($[15] !== sidebar) {
+    t4 = isPresent(sidebar);
+    $[15] = sidebar;
+    $[16] = t4;
+  } else {
+    t4 = $[16];
+  }
+  const hasSidebar = t4;
+  let t5;
+  if ($[17] !== sidePanel) {
+    t5 = isPresent(sidePanel);
+    $[17] = sidePanel;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  const hasPanel = t5;
+  const leftOpen = hasSidebar && (sidebarOpen ?? true);
+  const rightOpen = hasPanel && (sidePanelOpen ?? true);
+  let t6;
+  if ($[19] !== toolbar) {
+    t6 = isPresent(toolbar);
+    $[19] = toolbar;
+    $[20] = t6;
+  } else {
+    t6 = $[20];
+  }
+  const hasToolbar = t6;
+  let t7;
+  if ($[21] !== className) {
+    t7 = clsx("ade-workspace", className);
+    $[21] = className;
+    $[22] = t7;
+  } else {
+    t7 = $[22];
+  }
+  const t8 = hasToolbar || undefined;
+  const t9 = leftOpen || undefined;
+  const t10 = rightOpen || undefined;
+  let t11;
+  if ($[23] !== hasSidebar || $[24] !== sidebar || $[25] !== sidebarWidth) {
+    t11 = hasSidebar && /*#__PURE__*/_jsx("aside", {
+      className: "ade-workspace-sidebar",
+      "data-auto": sidebarWidth === "auto" || undefined,
+      style: {
+        width: sidebarWidth
+      },
+      children: sidebar
     });
-    const context = useMemo(() => ({ layout, edges: { top: !hasToolbar, right: !rightOpen, bottom: true, left: !leftOpen } }), [layout, hasToolbar, rightOpen, leftOpen]);
-    return _jsx(WorkspaceContext, { value: context, children: element });
-}
+    $[23] = hasSidebar;
+    $[24] = sidebar;
+    $[25] = sidebarWidth;
+    $[26] = t11;
+  } else {
+    t11 = $[26];
+  }
+  let t12;
+  if ($[27] !== hasToolbar || $[28] !== toolbar) {
+    t12 = hasToolbar && /*#__PURE__*/_jsx("div", {
+      className: "ade-workspace-toolbar",
+      children: toolbar
+    });
+    $[27] = hasToolbar;
+    $[28] = toolbar;
+    $[29] = t12;
+  } else {
+    t12 = $[29];
+  }
+  let t13;
+  if ($[30] !== children) {
+    t13 = /*#__PURE__*/_jsx("div", {
+      className: "ade-workspace-content",
+      children: children
+    });
+    $[30] = children;
+    $[31] = t13;
+  } else {
+    t13 = $[31];
+  }
+  let t14;
+  if ($[32] !== t12 || $[33] !== t13) {
+    t14 = /*#__PURE__*/_jsxs("div", {
+      className: "ade-workspace-center",
+      children: [t12, t13]
+    });
+    $[32] = t12;
+    $[33] = t13;
+    $[34] = t14;
+  } else {
+    t14 = $[34];
+  }
+  let t15;
+  if ($[35] !== hasPanel || $[36] !== sidePanel || $[37] !== sidePanelWidth) {
+    t15 = hasPanel && /*#__PURE__*/_jsx("aside", {
+      className: "ade-workspace-side-panel",
+      "data-auto": sidePanelWidth === "auto" || undefined,
+      style: {
+        width: sidePanelWidth
+      },
+      children: sidePanel
+    });
+    $[35] = hasPanel;
+    $[36] = sidePanel;
+    $[37] = sidePanelWidth;
+    $[38] = t15;
+  } else {
+    t15 = $[38];
+  }
+  let t16;
+  if ($[39] !== t11 || $[40] !== t14 || $[41] !== t15) {
+    t16 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t11, t14, t15]
+    });
+    $[39] = t11;
+    $[40] = t14;
+    $[41] = t15;
+    $[42] = t16;
+  } else {
+    t16 = $[42];
+  }
+  let t17;
+  if ($[43] !== layout || $[44] !== props || $[45] !== style || $[46] !== t10 || $[47] !== t16 || $[48] !== t7 || $[49] !== t8 || $[50] !== t9) {
+    t17 = {
+      ...props,
+      className: t7,
+      style,
+      "data-layout": layout,
+      "data-toolbar": t8,
+      "data-sidebar": t9,
+      "data-side-panel": t10,
+      children: t16
+    };
+    $[43] = layout;
+    $[44] = props;
+    $[45] = style;
+    $[46] = t10;
+    $[47] = t16;
+    $[48] = t7;
+    $[49] = t8;
+    $[50] = t9;
+    $[51] = t17;
+  } else {
+    t17 = $[51];
+  }
+  let t18;
+  if ($[52] !== ref || $[53] !== render || $[54] !== t17) {
+    t18 = {
+      render,
+      ref,
+      defaultTagName: "div",
+      props: t17
+    };
+    $[52] = ref;
+    $[53] = render;
+    $[54] = t17;
+    $[55] = t18;
+  } else {
+    t18 = $[55];
+  }
+  const element = useRender(t18);
+  const t19 = !hasToolbar;
+  const t20 = !rightOpen;
+  const t21 = !leftOpen;
+  let t22;
+  if ($[56] !== t19 || $[57] !== t20 || $[58] !== t21) {
+    t22 = {
+      top: t19,
+      right: t20,
+      bottom: true,
+      left: t21
+    };
+    $[56] = t19;
+    $[57] = t20;
+    $[58] = t21;
+    $[59] = t22;
+  } else {
+    t22 = $[59];
+  }
+  let t23;
+  if ($[60] !== layout || $[61] !== t22) {
+    t23 = {
+      layout,
+      edges: t22
+    };
+    $[60] = layout;
+    $[61] = t22;
+    $[62] = t23;
+  } else {
+    t23 = $[62];
+  }
+  const context = t23;
+  let t24;
+  if ($[63] !== context || $[64] !== element) {
+    t24 = /*#__PURE__*/_jsx(WorkspaceContext, {
+      value: context,
+      children: element
+    });
+    $[63] = context;
+    $[64] = element;
+    $[65] = t24;
+  } else {
+    t24 = $[65];
+  }
+  return t24;
+}

package/dist/workspace/context.js

@@ -1,5 +1,10 @@
 import { createContext } from 'react';
 export const WorkspaceContext = createContext({
-    layout: 'standard',
-    edges: { top: true, right: true, bottom: true, left: true }
-});
+  layout: 'standard',
+  edges: {
+    top: true,
+    right: true,
+    bottom: true,
+    left: true
+  }
+});

package/dist/workspace/geometry.js

@@ -1,155 +1,178 @@
 import { findSplitNode } from './model.js';
 function distribute(total, weights, minimums) {
-    const floor = minimums.reduce((sum, size) => sum + size, 0);
-    if (floor >= total) {
-        return minimums.map((size) => (floor ? (size * total) / floor : total / minimums.length));
+  const floor = minimums.reduce((sum, size) => sum + size, 0);
+  if (floor >= total) {
+    return minimums.map(size => floor ? size * total / floor : total / minimums.length);
+  }
+  const result = weights.map(() => 0);
+  const pending = new Set(weights.map((_, i) => i));
+  let remaining = total;
+  while (pending.size) {
+    const sum = [...pending].reduce((value, i) => value + weights[i], 0);
+    const small = [...pending].filter(i => remaining * weights[i] / sum < minimums[i]);
+    if (!small.length) {
+      pending.forEach(i => {
+        result[i] = remaining * weights[i] / sum;
+      });
+      break;
     }
-    const result = weights.map(() => 0);
-    const pending = new Set(weights.map((_, i) => i));
-    let remaining = total;
-    while (pending.size) {
-        const sum = [...pending].reduce((value, i) => value + weights[i], 0);
-        const small = [...pending].filter((i) => (remaining * weights[i]) / sum < minimums[i]);
-        if (!small.length) {
-            pending.forEach((i) => {
-                result[i] = (remaining * weights[i]) / sum;
-            });
-            break;
-        }
-        small.forEach((i) => {
-            result[i] = minimums[i];
-            remaining -= minimums[i];
-            pending.delete(i);
-        });
-    }
-    return result;
+    small.forEach(i => {
+      result[i] = minimums[i];
+      remaining -= minimums[i];
+      pending.delete(i);
+    });
+  }
+  return result;
 }
 export function splitGeometry(layout, width, height, gap, minimum) {
-    const result = { panes: [], dividers: [] };
-    const minimums = new Map();
-    const measure = (node) => {
-        if (node.type === 'pane') {
-            const value = minimum(node);
-            const safe = {
-                width: Math.max(0, Number.isFinite(value.width) ? value.width : 0),
-                height: Math.max(0, Number.isFinite(value.height) ? value.height : 0)
-            };
-            minimums.set(node.id, safe);
-            return safe;
-        }
-        const children = node.children.map(measure);
-        const horizontal = node.axis === 'horizontal';
-        const value = {
-            width: horizontal
-                ? children.reduce((sum, item) => sum + item.width, 0) + gap * (children.length - 1)
-                : Math.max(...children.map((item) => item.width)),
-            height: horizontal
-                ? Math.max(...children.map((item) => item.height))
-                : children.reduce((sum, item) => sum + item.height, 0) + gap * (children.length - 1)
-        };
-        minimums.set(node.id, value);
-        return value;
+  const result = {
+    panes: [],
+    dividers: []
+  };
+  const minimums = new Map();
+  const measure = node => {
+    if (node.type === 'pane') {
+      const value = minimum(node);
+      const safe = {
+        width: Math.max(0, Number.isFinite(value.width) ? value.width : 0),
+        height: Math.max(0, Number.isFinite(value.height) ? value.height : 0)
+      };
+      minimums.set(node.id, safe);
+      return safe;
+    }
+    const children = node.children.map(measure);
+    const horizontal = node.axis === 'horizontal';
+    const value = {
+      width: horizontal ? children.reduce((sum, item) => sum + item.width, 0) + gap * (children.length - 1) : Math.max(...children.map(item => item.width)),
+      height: horizontal ? Math.max(...children.map(item => item.height)) : children.reduce((sum, item) => sum + item.height, 0) + gap * (children.length - 1)
     };
-    const walk = (node, rect) => {
-        if (node.type === 'pane') {
-            result.panes.push({ ...rect, pane: node });
-            return;
-        }
-        const horizontal = node.axis === 'horizontal';
-        const axisLength = horizontal ? rect.width : rect.height;
-        const spacing = Math.min(gap, axisLength / (node.children.length - 1));
-        const available = Math.max(0, axisLength - spacing * (node.children.length - 1));
-        const limits = node.children.map((child) => minimums.get(child.id)[horizontal ? 'width' : 'height']);
-        const lengths = distribute(available, node.sizes, limits);
-        let offset = 0;
-        node.children.forEach((child, i) => {
-            const end = Math.round(offset + lengths[i]);
-            const start = Math.round(offset);
-            walk(child, horizontal ? { ...rect, x: rect.x + start, width: end - start } : { ...rect, y: rect.y + start, height: end - start });
-            if (i < node.children.length - 1) {
-                result.dividers.push({
-                    ...rect,
-                    ...(horizontal ? { x: rect.x + end, width: spacing } : { y: rect.y + end, height: spacing }),
-                    splitId: node.id,
-                    index: i,
-                    axis: node.axis,
-                    lengths,
-                    minimums: limits
-                });
-            }
-            offset += lengths[i] + spacing;
+    minimums.set(node.id, value);
+    return value;
+  };
+  const walk = (node, rect) => {
+    if (node.type === 'pane') {
+      result.panes.push({
+        ...rect,
+        pane: node
+      });
+      return;
+    }
+    const horizontal = node.axis === 'horizontal';
+    const axisLength = horizontal ? rect.width : rect.height;
+    const spacing = Math.min(gap, axisLength / (node.children.length - 1));
+    const available = Math.max(0, axisLength - spacing * (node.children.length - 1));
+    const limits = node.children.map(child => minimums.get(child.id)[horizontal ? 'width' : 'height']);
+    const lengths = distribute(available, node.sizes, limits);
+    let offset = 0;
+    node.children.forEach((child, i) => {
+      const end = Math.round(offset + lengths[i]);
+      const start = Math.round(offset);
+      walk(child, horizontal ? {
+        ...rect,
+        x: rect.x + start,
+        width: end - start
+      } : {
+        ...rect,
+        y: rect.y + start,
+        height: end - start
+      });
+      if (i < node.children.length - 1) {
+        result.dividers.push({
+          ...rect,
+          ...(horizontal ? {
+            x: rect.x + end,
+            width: spacing
+          } : {
+            y: rect.y + end,
+            height: spacing
+          }),
+          splitId: node.id,
+          index: i,
+          axis: node.axis,
+          lengths,
+          minimums: limits
         });
-    };
-    const root = layout.maximized ? (findSplitNode(layout.root, layout.maximized) ?? layout.root) : layout.root;
-    measure(root);
-    walk(root, { x: 0, y: 0, width: Math.max(0, width), height: Math.max(0, height) });
-    return result;
+      }
+      offset += lengths[i] + spacing;
+    });
+  };
+  const root = layout.maximized ? findSplitNode(layout.root, layout.maximized) ?? layout.root : layout.root;
+  measure(root);
+  walk(root, {
+    x: 0,
+    y: 0,
+    width: Math.max(0, width),
+    height: Math.max(0, height)
+  });
+  return result;
 }
 export function resizeSplit(divider, delta, symmetric = false, snapDistance = 0, minimumShare = 0) {
-    const lengths = [...divider.lengths];
-    const { index } = divider;
-    const total = lengths.reduce((sum, size) => sum + size, 0);
-    if (total <= 0 || lengths.some((size) => size <= 0)) {
-        return lengths.map(() => 1 / lengths.length);
-    }
-    const mirror = lengths.length - divider.index - 2;
-    const affected = new Set([index, index + 1, ...(symmetric ? [mirror, mirror + 1] : [])]);
-    const span = [...affected].reduce((sum, i) => sum + lengths[i], 0);
-    const share = Number.isFinite(minimumShare) ? Math.max(0, Math.min(1 / affected.size, minimumShare)) : 0;
-    const min = divider.minimums.map((size, i) => Math.min(lengths[i], Math.max(size, affected.has(i) ? span * share : 0)));
-    if (symmetric && mirror !== index) {
-        const changes = lengths.map(() => 0);
-        changes[index]++;
-        changes[index + 1]--;
-        changes[mirror]--;
-        changes[mirror + 1]++;
-        let lower = -Infinity;
-        let upper = Infinity;
-        changes.forEach((coefficient, i) => {
-            if (coefficient > 0) {
-                lower = Math.max(lower, (min[i] - lengths[i]) / coefficient);
-            }
-            if (coefficient < 0) {
-                upper = Math.min(upper, (lengths[i] - min[i]) / -coefficient);
-            }
-        });
-        const change = Math.max(lower, Math.min(delta, upper));
-        return lengths.map((size, i) => Math.max(Number.EPSILON, (size + changes[i] * change) / total));
-    }
-    const change = Math.max(min[index] - lengths[index], Math.min(delta, lengths[index + 1] - min[index + 1]));
-    const pair = lengths[index] + lengths[index + 1];
-    const middle = pair / 2;
-    const next = lengths[index] + change;
-    // A snap must not cross either pane's minimum, including minimums inherited from nested splits.
-    lengths[index] = Math.abs(next - middle) <= snapDistance && middle >= min[index] && middle >= min[index + 1] ? middle : next;
-    lengths[index + 1] = pair - lengths[index];
-    return lengths.map((size) => Math.max(Number.EPSILON, size / total));
+  const lengths = [...divider.lengths];
+  const {
+    index
+  } = divider;
+  const total = lengths.reduce((sum, size) => sum + size, 0);
+  if (total <= 0 || lengths.some(size => size <= 0)) {
+    return lengths.map(() => 1 / lengths.length);
+  }
+  const mirror = lengths.length - divider.index - 2;
+  const affected = new Set([index, index + 1, ...(symmetric ? [mirror, mirror + 1] : [])]);
+  const span = [...affected].reduce((sum, i) => sum + lengths[i], 0);
+  const share = Number.isFinite(minimumShare) ? Math.max(0, Math.min(1 / affected.size, minimumShare)) : 0;
+  const min = divider.minimums.map((size, i) => Math.min(lengths[i], Math.max(size, affected.has(i) ? span * share : 0)));
+  if (symmetric && mirror !== index) {
+    const changes = lengths.map(() => 0);
+    changes[index]++;
+    changes[index + 1]--;
+    changes[mirror]--;
+    changes[mirror + 1]++;
+    let lower = -Infinity;
+    let upper = Infinity;
+    changes.forEach((coefficient, i) => {
+      if (coefficient > 0) {
+        lower = Math.max(lower, (min[i] - lengths[i]) / coefficient);
+      }
+      if (coefficient < 0) {
+        upper = Math.min(upper, (lengths[i] - min[i]) / -coefficient);
+      }
+    });
+    const change = Math.max(lower, Math.min(delta, upper));
+    return lengths.map((size, i) => Math.max(Number.EPSILON, (size + changes[i] * change) / total));
+  }
+  const change = Math.max(min[index] - lengths[index], Math.min(delta, lengths[index + 1] - min[index + 1]));
+  const pair = lengths[index] + lengths[index + 1];
+  const middle = pair / 2;
+  const next = lengths[index] + change;
+  // A snap must not cross either pane's minimum, including minimums inherited from nested splits.
+  lengths[index] = Math.abs(next - middle) <= snapDistance && middle >= min[index] && middle >= min[index + 1] ? middle : next;
+  lengths[index + 1] = pair - lengths[index];
+  return lengths.map(size => Math.max(Number.EPSILON, size / total));
 }
 export function paneRadius(rect, width, height, edges, radius) {
-    const left = rect.x === 0 && edges.left;
-    const top = rect.y === 0 && edges.top;
-    const right = rect.x + rect.width >= width && edges.right;
-    const bottom = rect.y + rect.height >= height && edges.bottom;
-    return [top || left, top || right, bottom || right, bottom || left].map((flush) => `${flush ? 0 : radius}px`).join(' ');
+  const left = rect.x === 0 && edges.left;
+  const top = rect.y === 0 && edges.top;
+  const right = rect.x + rect.width >= width && edges.right;
+  const bottom = rect.y + rect.height >= height && edges.bottom;
+  return [top || left, top || right, bottom || right, bottom || left].map(flush => `${flush ? 0 : radius}px`).join(' ');
 }
 export function splitSideAt(rect, x, y) {
-    const horizontal = (x - rect.x) / rect.width;
-    const vertical = (y - rect.y) / rect.height;
-    const nearest = Math.min(horizontal, 1 - horizontal, vertical, 1 - vertical);
-    if (nearest > 0.25) {
-        return undefined;
-    }
-    if (nearest === horizontal) {
-        return 'left';
-    }
-    if (nearest === 1 - horizontal) {
-        return 'right';
-    }
-    return nearest === vertical ? 'top' : 'bottom';
+  const horizontal = (x - rect.x) / rect.width;
+  const vertical = (y - rect.y) / rect.height;
+  const nearest = Math.min(horizontal, 1 - horizontal, vertical, 1 - vertical);
+  if (nearest > 0.25) {
+    return undefined;
+  }
+  if (nearest === horizontal) {
+    return 'left';
+  }
+  if (nearest === 1 - horizontal) {
+    return 'right';
+  }
+  return nearest === vertical ? 'top' : 'bottom';
 }
 export function tabGapAt(rects, x) {
-    const index = rects.findIndex((rect) => x < (rect.left + rect.right) / 2);
-    return index < 0 ? rects.length : index;
+  const index = rects.findIndex(rect => x < (rect.left + rect.right) / 2);
+  return index < 0 ? rects.length : index;
 }
 /**
  * The scrollLeft that brings a tab fully into view and clear of the edge fades, or the current one
@@ -157,16 +180,16 @@ export function tabGapAt(rects, x) {
  * only where the scroll position leaves one. A tab wider than the room between the fades shows its start.
  */
 export function tabRevealScrollLeft(view, start, width, fade) {
-    const max = Math.max(0, view.scrollWidth - view.clientWidth);
-    const end = start + width;
-    const visibleStart = (left) => left + (left > 0 ? fade : 0);
-    const visibleEnd = (left) => left + view.clientWidth - (left < max - 1 ? fade : 0);
-    const clamp = (left) => Math.round(Math.min(max, Math.max(0, left)));
-    if (start >= visibleStart(view.scrollLeft) && end <= visibleEnd(view.scrollLeft)) {
-        return view.scrollLeft;
-    }
-    if (start < visibleStart(view.scrollLeft) || width > view.clientWidth - 2 * fade) {
-        return clamp(start - fade);
-    }
-    return clamp(end + fade - view.clientWidth);
-}
+  const max = Math.max(0, view.scrollWidth - view.clientWidth);
+  const end = start + width;
+  const visibleStart = left => left + (left > 0 ? fade : 0);
+  const visibleEnd = left => left + view.clientWidth - (left < max - 1 ? fade : 0);
+  const clamp = left => Math.round(Math.min(max, Math.max(0, left)));
+  if (start >= visibleStart(view.scrollLeft) && end <= visibleEnd(view.scrollLeft)) {
+    return view.scrollLeft;
+  }
+  if (start < visibleStart(view.scrollLeft) || width > view.clientWidth - 2 * fade) {
+    return clamp(start - fade);
+  }
+  return clamp(end + fade - view.clientWidth);
+}