@dbcdk/react-components 0.0.197 → 0.0.198

package/dist/components/table/tanstackTable.utils.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+var columnLayout_utils = require('./columnLayout.utils');
 var table_utils = require('./table.utils');
 
 function getColumnId(def, index) {
@@ -74,124 +75,59 @@ function getSortPropsFromSorting(sorting) {
   };
 }
 function clamp(value, min, max) {
-  const lowerBounded = Math.max(min, value);
-  if (max == null || !Number.isFinite(max)) return lowerBounded;
-  return Math.min(lowerBounded, max);
+  return Math.min(Math.max(value, min), max);
 }
-function toIntegerTrackWidths(tracks, targetWidth) {
-  const floored = tracks.map((track) => ({
-    id: track.id,
-    width: Math.floor(track.width),
-    fraction: track.width - Math.floor(track.width)
-  }));
-  const baseTotal = floored.reduce((sum, track) => sum + track.width, 0);
-  let remainder = Math.max(0, targetWidth - baseTotal);
-  floored.slice().sort((a, b) => b.fraction - a.fraction).forEach((track) => {
-    if (remainder <= 0) return;
-    track.width += 1;
-    remainder -= 1;
-  });
-  return Object.fromEntries(floored.map((track) => [track.id, track.width]));
+function applyNeighborResize(next, resize) {
+  const proposed = next[resize.columnId];
+  if (proposed == null) return next;
+  const total = resize.startWidth + resize.neighborStartWidth;
+  const min = Math.min(resize.min, resize.startWidth);
+  const max = Math.max(resize.max, resize.startWidth);
+  const neighborMin = Math.min(resize.neighborMin, resize.neighborStartWidth);
+  const neighborMax = Math.max(resize.neighborMax, resize.neighborStartWidth);
+  const width = Math.round(
+    clamp(
+      resize.startWidth + proposed - resize.tanstackStartWidth,
+      Math.max(min, total - neighborMax),
+      Math.min(max, total - neighborMin)
+    )
+  );
+  return { ...next, [resize.columnId]: width, [resize.neighborId]: total - width };
 }
 function buildDistributedColumnWidths(args) {
   const {
     table,
     hasSelection,
-    hasContextMenu = false,
+    hasContextMenu,
+    contextMenuReservePx = table_utils.ROW_ACTIONS_RESERVE_PX,
     defaultMinPx,
     columnSizing,
     availableWidth
   } = args;
-  const leaf = table.getVisibleLeafColumns();
-  const selectionWidth = hasSelection ? table_utils.SELECTION_COLUMN_PX : 0;
-  const contextMenuWidth = hasContextMenu ? 0 : 0;
-  const tracks = leaf.map((c) => {
+  const visibleColumns = table.getVisibleLeafColumns();
+  const tracks = visibleColumns.map((c, index) => {
     var _a, _b, _c, _d;
     const def = c.columnDef;
     const meta = (_a = def.meta) != null ? _a : {};
     const min = Math.max(1, Number((_b = def.minSize) != null ? _b : defaultMinPx));
     const max = def.maxSize != null ? Math.max(min, Number(def.maxSize)) : void 0;
     const resizedPxRaw = columnSizing[c.id];
-    const resizedPx = resizedPxRaw != null ? Math.round(clamp(Number(resizedPxRaw), min, max)) : void 0;
-    if (resizedPx != null) {
-      return {
-        id: c.id,
-        width: resizedPx,
-        weight: 0,
-        min,
-        max: resizedPx,
-        fixed: true
-      };
-    }
+    const reserve = hasContextMenu && index === visibleColumns.length - 1 ? contextMenuReservePx : 0;
+    const fixedWidth = resizedPxRaw != null ? Math.round(clamp(Number(resizedPxRaw), min + reserve, (max != null ? max : Infinity) + reserve)) : void 0;
     const rawWeight = Number((_d = (_c = meta.weight) != null ? _c : def.size) != null ? _d : table_utils.DEFAULT_COLUMN_PX);
     const weight = Number.isFinite(rawWeight) && rawWeight > 0 ? rawWeight : table_utils.DEFAULT_COLUMN_PX;
-    return {
-      id: c.id,
-      width: min,
-      weight,
-      min,
-      max,
-      fixed: false
-    };
+    return { id: c.id, min, max, weight, fixedWidth };
+  });
+  return columnLayout_utils.distributeColumnWidths({
+    tracks,
+    hasSelection,
+    hasContextMenu,
+    contextMenuReservePx,
+    availableWidth
   });
-  const lastTrack = tracks[tracks.length - 1];
-  if (hasContextMenu && lastTrack && !lastTrack.fixed) {
-    lastTrack.min += table_utils.ROW_ACTIONS_RESERVE_PX;
-    lastTrack.width += table_utils.ROW_ACTIONS_RESERVE_PX;
-    if (lastTrack.max != null) lastTrack.max += table_utils.ROW_ACTIONS_RESERVE_PX;
-  }
-  const fixedWidth = selectionWidth + contextMenuWidth + tracks.reduce((sum, track) => sum + track.width, 0);
-  let remaining = Math.max(0, availableWidth - fixedWidth);
-  let active = tracks.filter(
-    (track) => !track.fixed && (track.max == null || track.width < track.max)
-  );
-  while (remaining > 0.5 && active.length > 0) {
-    const totalWeight = active.reduce((sum, track) => sum + track.weight, 0);
-    if (totalWeight <= 0) break;
-    let consumed = 0;
-    const nextActive = [];
-    for (const track of active) {
-      const share = remaining * track.weight / totalWeight;
-      const maxGrow = track.max == null ? share : Math.max(0, track.max - track.width);
-      const growth = Math.min(share, maxGrow);
-      track.width += growth;
-      consumed += growth;
-      if (track.max == null || track.width < track.max - 0.5) {
-        nextActive.push(track);
-      }
-    }
-    if (consumed <= 0.5) break;
-    remaining -= consumed;
-    active = nextActive;
-  }
-  const flexible = tracks.filter((track) => !track.fixed);
-  if (remaining > 0.5 && flexible.length > 0 && flexible.every((track) => track.max != null)) {
-    const stretchable = flexible.filter((track) => track.max > track.min);
-    const totalWeight = stretchable.reduce((sum, track) => sum + track.weight, 0);
-    if (totalWeight > 0) {
-      for (const track of stretchable) {
-        track.width += remaining * track.weight / totalWeight;
-      }
-    }
-  }
-  const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
-  const maxTrackWidth = availableWidth - selectionWidth - contextMenuWidth;
-  const targetTrackWidth = Math.min(
-    floatTrackTotal <= maxTrackWidth ? Math.floor(floatTrackTotal) : Math.ceil(floatTrackTotal),
-    maxTrackWidth
-  );
-  const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
-  const totalWidth = selectionWidth + contextMenuWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
-  return {
-    selectionWidth: hasSelection ? table_utils.SELECTION_COLUMN_PX : void 0,
-    contextMenuWidth: hasContextMenu ? 0 : void 0,
-    widths,
-    totalWidth,
-    availableWidth,
-    shouldOverflow: totalWidth > availableWidth
-  };
 }
 
+exports.applyNeighborResize = applyNeighborResize;
 exports.buildColumnVisibilityFromVisibleIds = buildColumnVisibilityFromVisibleIds;
 exports.buildDistributedColumnWidths = buildDistributedColumnWidths;
 exports.getColumnId = getColumnId;

package/dist/components/table/tanstackTable.utils.d.ts

@@ -1,4 +1,5 @@
 import type { ColumnDef, ColumnSizingState, SortingState, VisibilityState } from '@tanstack/react-table';
+import { type DistributedColumnWidths } from './columnLayout.utils';
 import { ColumnItem } from './Table.types';
 type AnyRecord = Record<string, any>;
 export declare function getColumnId<T>(def: ColumnDef<T, any>, index: number): string;
@@ -11,19 +12,34 @@ export declare function getSortPropsFromSorting(sorting: SortingState): {
     sortById?: string;
     sortDirection: 'asc' | 'desc' | null;
 };
+/** The two columns a drag moves width between, as captured on resize start. */
+export type NeighborResize = {
+    columnId: string;
+    neighborId: string;
+    /** TanStack's own start size; its updates are this plus the drag offset. */
+    tanstackStartWidth: number;
+    startWidth: number;
+    neighborStartWidth: number;
+    min: number;
+    max: number;
+    neighborMin: number;
+    neighborMax: number;
+};
+/**
+ * Applies a TanStack resize update as a move of width between the dragged
+ * column and its right neighbour, so their sum (and every other column) stays
+ * put. Both columns stay within their bounds, widened to their start widths
+ * so a column already outside its bounds doesn't jump when grabbed.
+ */
+export declare function applyNeighborResize(next: ColumnSizingState, resize: NeighborResize): ColumnSizingState;
 export declare function buildDistributedColumnWidths(args: {
     table: any;
     hasSelection: boolean;
     hasContextMenu?: boolean;
+    /** Space the last column reserves for actions; see `getActionsReserve`. */
+    contextMenuReservePx?: number;
     defaultMinPx: number;
     columnSizing: ColumnSizingState;
     availableWidth: number;
-}): {
-    selectionWidth?: number;
-    contextMenuWidth?: number;
-    widths: Record<string, number>;
-    totalWidth: number;
-    availableWidth: number;
-    shouldOverflow: boolean;
-};
+}): DistributedColumnWidths;
 export {};

package/dist/components/table/tanstackTable.utils.js

@@ -1,4 +1,5 @@
-import { DEFAULT_COLUMN_PX, ROW_ACTIONS_RESERVE_PX, SELECTION_COLUMN_PX } from './table.utils';
+import { distributeColumnWidths } from './columnLayout.utils';
+import { ROW_ACTIONS_RESERVE_PX, DEFAULT_COLUMN_PX } from './table.utils';
 
 function getColumnId(def, index) {
   const d = def;
@@ -72,122 +73,56 @@ function getSortPropsFromSorting(sorting) {
   };
 }
 function clamp(value, min, max) {
-  const lowerBounded = Math.max(min, value);
-  if (max == null || !Number.isFinite(max)) return lowerBounded;
-  return Math.min(lowerBounded, max);
+  return Math.min(Math.max(value, min), max);
 }
-function toIntegerTrackWidths(tracks, targetWidth) {
-  const floored = tracks.map((track) => ({
-    id: track.id,
-    width: Math.floor(track.width),
-    fraction: track.width - Math.floor(track.width)
-  }));
-  const baseTotal = floored.reduce((sum, track) => sum + track.width, 0);
-  let remainder = Math.max(0, targetWidth - baseTotal);
-  floored.slice().sort((a, b) => b.fraction - a.fraction).forEach((track) => {
-    if (remainder <= 0) return;
-    track.width += 1;
-    remainder -= 1;
-  });
-  return Object.fromEntries(floored.map((track) => [track.id, track.width]));
+function applyNeighborResize(next, resize) {
+  const proposed = next[resize.columnId];
+  if (proposed == null) return next;
+  const total = resize.startWidth + resize.neighborStartWidth;
+  const min = Math.min(resize.min, resize.startWidth);
+  const max = Math.max(resize.max, resize.startWidth);
+  const neighborMin = Math.min(resize.neighborMin, resize.neighborStartWidth);
+  const neighborMax = Math.max(resize.neighborMax, resize.neighborStartWidth);
+  const width = Math.round(
+    clamp(
+      resize.startWidth + proposed - resize.tanstackStartWidth,
+      Math.max(min, total - neighborMax),
+      Math.min(max, total - neighborMin)
+    )
+  );
+  return { ...next, [resize.columnId]: width, [resize.neighborId]: total - width };
 }
 function buildDistributedColumnWidths(args) {
   const {
     table,
     hasSelection,
-    hasContextMenu = false,
+    hasContextMenu,
+    contextMenuReservePx = ROW_ACTIONS_RESERVE_PX,
     defaultMinPx,
     columnSizing,
     availableWidth
   } = args;
-  const leaf = table.getVisibleLeafColumns();
-  const selectionWidth = hasSelection ? SELECTION_COLUMN_PX : 0;
-  const contextMenuWidth = hasContextMenu ? 0 : 0;
-  const tracks = leaf.map((c) => {
+  const visibleColumns = table.getVisibleLeafColumns();
+  const tracks = visibleColumns.map((c, index) => {
     var _a, _b, _c, _d;
     const def = c.columnDef;
     const meta = (_a = def.meta) != null ? _a : {};
     const min = Math.max(1, Number((_b = def.minSize) != null ? _b : defaultMinPx));
     const max = def.maxSize != null ? Math.max(min, Number(def.maxSize)) : void 0;
     const resizedPxRaw = columnSizing[c.id];
-    const resizedPx = resizedPxRaw != null ? Math.round(clamp(Number(resizedPxRaw), min, max)) : void 0;
-    if (resizedPx != null) {
-      return {
-        id: c.id,
-        width: resizedPx,
-        weight: 0,
-        min,
-        max: resizedPx,
-        fixed: true
-      };
-    }
+    const reserve = hasContextMenu && index === visibleColumns.length - 1 ? contextMenuReservePx : 0;
+    const fixedWidth = resizedPxRaw != null ? Math.round(clamp(Number(resizedPxRaw), min + reserve, (max != null ? max : Infinity) + reserve)) : void 0;
     const rawWeight = Number((_d = (_c = meta.weight) != null ? _c : def.size) != null ? _d : DEFAULT_COLUMN_PX);
     const weight = Number.isFinite(rawWeight) && rawWeight > 0 ? rawWeight : DEFAULT_COLUMN_PX;
-    return {
-      id: c.id,
-      width: min,
-      weight,
-      min,
-      max,
-      fixed: false
-    };
+    return { id: c.id, min, max, weight, fixedWidth };
+  });
+  return distributeColumnWidths({
+    tracks,
+    hasSelection,
+    hasContextMenu,
+    contextMenuReservePx,
+    availableWidth
   });
-  const lastTrack = tracks[tracks.length - 1];
-  if (hasContextMenu && lastTrack && !lastTrack.fixed) {
-    lastTrack.min += ROW_ACTIONS_RESERVE_PX;
-    lastTrack.width += ROW_ACTIONS_RESERVE_PX;
-    if (lastTrack.max != null) lastTrack.max += ROW_ACTIONS_RESERVE_PX;
-  }
-  const fixedWidth = selectionWidth + contextMenuWidth + tracks.reduce((sum, track) => sum + track.width, 0);
-  let remaining = Math.max(0, availableWidth - fixedWidth);
-  let active = tracks.filter(
-    (track) => !track.fixed && (track.max == null || track.width < track.max)
-  );
-  while (remaining > 0.5 && active.length > 0) {
-    const totalWeight = active.reduce((sum, track) => sum + track.weight, 0);
-    if (totalWeight <= 0) break;
-    let consumed = 0;
-    const nextActive = [];
-    for (const track of active) {
-      const share = remaining * track.weight / totalWeight;
-      const maxGrow = track.max == null ? share : Math.max(0, track.max - track.width);
-      const growth = Math.min(share, maxGrow);
-      track.width += growth;
-      consumed += growth;
-      if (track.max == null || track.width < track.max - 0.5) {
-        nextActive.push(track);
-      }
-    }
-    if (consumed <= 0.5) break;
-    remaining -= consumed;
-    active = nextActive;
-  }
-  const flexible = tracks.filter((track) => !track.fixed);
-  if (remaining > 0.5 && flexible.length > 0 && flexible.every((track) => track.max != null)) {
-    const stretchable = flexible.filter((track) => track.max > track.min);
-    const totalWeight = stretchable.reduce((sum, track) => sum + track.weight, 0);
-    if (totalWeight > 0) {
-      for (const track of stretchable) {
-        track.width += remaining * track.weight / totalWeight;
-      }
-    }
-  }
-  const floatTrackTotal = tracks.reduce((sum, track) => sum + track.width, 0);
-  const maxTrackWidth = availableWidth - selectionWidth - contextMenuWidth;
-  const targetTrackWidth = Math.min(
-    floatTrackTotal <= maxTrackWidth ? Math.floor(floatTrackTotal) : Math.ceil(floatTrackTotal),
-    maxTrackWidth
-  );
-  const widths = toIntegerTrackWidths(tracks, targetTrackWidth);
-  const totalWidth = selectionWidth + contextMenuWidth + Object.values(widths).reduce((sum, width) => sum + width, 0);
-  return {
-    selectionWidth: hasSelection ? SELECTION_COLUMN_PX : void 0,
-    contextMenuWidth: hasContextMenu ? 0 : void 0,
-    widths,
-    totalWidth,
-    availableWidth,
-    shouldOverflow: totalWidth > availableWidth
-  };
 }
 
-export { buildColumnVisibilityFromVisibleIds, buildDistributedColumnWidths, getColumnId, getSortPropsFromSorting, mapDefsToColumnItems, sortingEqual };
+export { applyNeighborResize, buildColumnVisibilityFromVisibleIds, buildDistributedColumnWidths, getColumnId, getSortPropsFromSorting, mapDefsToColumnItems, sortingEqual };

package/dist/components/xml-viewer/XmlViewer.cjs

@@ -6,6 +6,7 @@ var lucideReact = require('lucide-react');
 var react = require('react');
 var Menu = require('../../components/menu/Menu');
 var Popover = require('../../components/popover/Popover');
+var ScrollFade = require('../../components/scroll-fade/ScrollFade');
 var usePersistentState = require('../../hooks/usePersistentState');
 var tokenizeXml = require('./tokenizeXml');
 var styles = require('./XmlViewer.module.css');
@@ -72,10 +73,10 @@ function XmlViewer({
       className: [styles__default.default.viewer, borderless ? styles__default.default.borderless : ""].filter(Boolean).join(" "),
       "data-appearance": currentAppearance,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toolbar, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
           {
-            className: styles__default.default.toolbar,
+            className: styles__default.default.toolbarButton,
             "data-surface": currentAppearance === "dark" ? "inverse" : void 0,
             children: /* @__PURE__ */ jsxRuntime.jsx(
               Popover.Popover,
@@ -156,10 +157,11 @@ function XmlViewer({
               }
             )
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollFade.ScrollFade, { children: (scrollRef) => /* @__PURE__ */ jsxRuntime.jsxs(
           "pre",
           {
+            ref: scrollRef,
             className: [
               styles__default.default.codePane,
               styles__default.default[size],
@@ -168,12 +170,15 @@ function XmlViewer({
             ].filter(Boolean).join(" "),
             tabIndex: 0,
             onDoubleClick: handleDoubleClick,
-            children: /* @__PURE__ */ jsxRuntime.jsx("code", { ref: codeRef, children: viewMode === "raw" ? xml : tokens.map((token, index) => {
-              const tokenClassName = TOKEN_CLASS[token.type];
-              return tokenClassName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tokenClassName, children: token.value }, index) : token.value;
-            }) })
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.toolbarSpacer, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "inline", tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, {}) }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("code", { ref: codeRef, children: viewMode === "raw" ? xml : tokens.map((token, index) => {
+                const tokenClassName = TOKEN_CLASS[token.type];
+                return tokenClassName ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tokenClassName, children: token.value }, index) : token.value;
+              }) })
+            ]
           }
-        )
+        ) })
       ]
     }
   );

package/dist/components/xml-viewer/XmlViewer.d.ts

@@ -16,7 +16,7 @@ export interface XmlViewerProps {
      */
     storageKey?: string;
     /**
-     * Removes the outer border, shadow and corner radius, so the viewer sits
+     * Removes the outer border, shadow, corner radius and padding, so the viewer sits
      * flush in a container that already provides its own framing (e.g. a
      * modal).
      */

package/dist/components/xml-viewer/XmlViewer.js

@@ -4,6 +4,7 @@ import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, Settings2 } from '
 import { useMemo, useRef } from 'react';
 import { Menu } from '../../components/menu/Menu';
 import { Popover } from '../../components/popover/Popover';
+import { ScrollFade } from '../../components/scroll-fade/ScrollFade';
 import { usePersistentState } from '../../hooks/usePersistentState';
 import { tokenizeXml } from './tokenizeXml';
 import styles from './XmlViewer.module.css';
@@ -66,10 +67,10 @@ function XmlViewer({
       className: [styles.viewer, borderless ? styles.borderless : ""].filter(Boolean).join(" "),
       "data-appearance": currentAppearance,
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
+        /* @__PURE__ */ jsx("div", { className: styles.toolbar, children: /* @__PURE__ */ jsx(
+          "span",
           {
-            className: styles.toolbar,
+            className: styles.toolbarButton,
             "data-surface": currentAppearance === "dark" ? "inverse" : void 0,
             children: /* @__PURE__ */ jsx(
               Popover,
@@ -150,10 +151,11 @@ function XmlViewer({
               }
             )
           }
-        ),
-        /* @__PURE__ */ jsx(
+        ) }),
+        /* @__PURE__ */ jsx(ScrollFade, { children: (scrollRef) => /* @__PURE__ */ jsxs(
           "pre",
           {
+            ref: scrollRef,
             className: [
               styles.codePane,
               styles[size],
@@ -162,12 +164,15 @@ function XmlViewer({
             ].filter(Boolean).join(" "),
             tabIndex: 0,
             onDoubleClick: handleDoubleClick,
-            children: /* @__PURE__ */ jsx("code", { ref: codeRef, children: viewMode === "raw" ? xml : tokens.map((token, index) => {
-              const tokenClassName = TOKEN_CLASS[token.type];
-              return tokenClassName ? /* @__PURE__ */ jsx("span", { className: tokenClassName, children: token.value }, index) : token.value;
-            }) })
+            children: [
+              /* @__PURE__ */ jsx("span", { className: styles.toolbarSpacer, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Button, { variant: "inline", tabIndex: -1, children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, {}) }) }) }),
+              /* @__PURE__ */ jsx("code", { ref: codeRef, children: viewMode === "raw" ? xml : tokens.map((token, index) => {
+                const tokenClassName = TOKEN_CLASS[token.type];
+                return tokenClassName ? /* @__PURE__ */ jsx("span", { className: tokenClassName, children: token.value }, index) : token.value;
+              }) })
+            ]
           }
-        )
+        ) })
       ]
     }
   );

package/dist/components/xml-viewer/XmlViewer.module.css

@@ -2,6 +2,7 @@
   --xml-pane-bg: var(--color-bg-inverse);
   --xml-pane-border: color-mix(in oklab, var(--color-fg-inverse) 12%, transparent);
   --xml-pane-text: var(--color-fg-inverse);
+  --scroll-fade-color: var(--xml-pane-bg);
 
   --xml-tag: color-mix(in oklab, var(--color-fg-inverse) 66%, var(--color-syntax-accent) 34%);
   --xml-attr-name: color-mix(in oklab, var(--color-fg-inverse) 50%, var(--color-syntax-accent) 50%);
@@ -14,6 +15,10 @@
   --xml-punctuation: color-mix(in oklab, var(--color-fg-inverse) 60%, transparent);
 
   position: relative;
+  display: flex;
+  flex-direction: column;
+  /* In a parent with a definite height, scroll inside instead of overflowing it. */
+  max-height: 100%;
   background: var(--xml-pane-bg);
   border: var(--border-width-thin) solid var(--xml-pane-border);
   border-radius: var(--border-radius-default);
@@ -41,11 +46,61 @@
   box-shadow: none;
 }
 
+.borderless .codePane {
+  padding: 0;
+}
+
+/* Zero-height sticky row: sticks within the nearest scrolling ancestor, which may be outside the viewer. */
 .toolbar {
-  position: absolute;
-  top: var(--spacing-xs);
-  right: var(--spacing-xs);
+  position: sticky;
+  top: 0;
   z-index: 1;
+  display: flex;
+  justify-content: flex-end;
+  flex: none;
+  height: 0;
+}
+
+.toolbar,
+.toolbarSpacer {
+  font-size: var(--font-size-md);
+  line-height: normal;
+  white-space: normal;
+}
+
+.toolbarButton {
+  display: block;
+  margin: var(--spacing-xs) var(--spacing-xs) 0 0;
+  border-radius: var(--border-radius-default);
+  /* Opaque so scrolled text doesn't show through once it's stuck. */
+  background: var(--xml-pane-bg);
+}
+
+.toolbarSpacer {
+  float: right;
+  visibility: hidden;
+  margin-block-start: calc(var(--spacing-xs) - var(--spacing-sm));
+  margin-inline: var(--spacing-xs) calc(var(--spacing-xs) - var(--spacing-sm));
+}
+
+.borderless .toolbarSpacer {
+  margin: 0;
+  padding: var(--spacing-xs) var(--spacing-xs) 0;
+}
+
+/* While the pane scrolls vertically, keep the button clear of its scrollbar
+   (overlay scrollbars take no space, so nothing else moves it). */
+.viewer:has([data-scrollable-y='true']) .toolbarButton {
+  margin-inline-end: var(--spacing-md);
+}
+
+.viewer:has([data-scrollable-y='true']) .toolbarSpacer {
+  margin-inline-end: calc(var(--spacing-md) - var(--spacing-sm));
+}
+
+.viewer.borderless:has([data-scrollable-y='true']) .toolbarSpacer {
+  margin-inline-end: 0;
+  padding-inline-end: var(--spacing-md);
 }
 
 .codePane {

package/dist/hooks/useScrollOverflow.cjs

@@ -0,0 +1,71 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+const NONE = {
+  top: false,
+  bottom: false,
+  left: false,
+  right: false,
+  scrollbarWidth: 0,
+  scrollbarHeight: 0
+};
+const THRESHOLD_PX = 1;
+function measureScrollbars(el) {
+  const style = getComputedStyle(el);
+  const borderX = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth) || 0;
+  const borderY = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth) || 0;
+  return {
+    scrollbarWidth: Math.max(0, el.offsetWidth - el.clientWidth - borderX),
+    scrollbarHeight: Math.max(0, el.offsetHeight - el.clientHeight - borderY)
+  };
+}
+function measure(el, scrollbars) {
+  const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = el;
+  return {
+    top: scrollTop > THRESHOLD_PX,
+    bottom: scrollHeight - clientHeight - scrollTop > THRESHOLD_PX,
+    left: scrollLeft > THRESHOLD_PX,
+    right: scrollWidth - clientWidth - scrollLeft > THRESHOLD_PX,
+    ...scrollbars
+  };
+}
+function sameOverflow(a, b) {
+  return Object.keys(a).every((key) => a[key] === b[key]);
+}
+function useScrollOverflow(el) {
+  const [overflow, setOverflow] = react.useState(NONE);
+  react.useLayoutEffect(() => {
+    if (!el) return;
+    let scrollbars = measureScrollbars(el);
+    const update = () => {
+      const next = measure(el, scrollbars);
+      setOverflow((prev) => sameOverflow(prev, next) ? prev : next);
+    };
+    const updateLayout = () => {
+      scrollbars = measureScrollbars(el);
+      update();
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(updateLayout) : null;
+    resizeObserver == null ? void 0 : resizeObserver.observe(el);
+    const mutationObserver = typeof MutationObserver !== "undefined" ? new MutationObserver(updateLayout) : null;
+    mutationObserver == null ? void 0 : mutationObserver.observe(el, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ["class", "style"]
+    });
+    return () => {
+      el.removeEventListener("scroll", update);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      mutationObserver == null ? void 0 : mutationObserver.disconnect();
+    };
+  }, [el]);
+  return el ? overflow : NONE;
+}
+
+exports.useScrollOverflow = useScrollOverflow;