@dbcdk/react-components 0.0.197 → 0.0.199

package/dist/components/json-viewer/JsonViewerShell.js

@@ -1,8 +1,9 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Search, X, ArrowDown, ArrowUp, ListTree, Braces, Sun, Moon, ClipboardCopy, Settings2 } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Search, X, Settings2, ArrowDown, ArrowUp, ListTree, Braces, Sun, Moon, ClipboardCopy } from 'lucide-react';
 import { Menu } from '../../components/menu/Menu';
 import { Popover } from '../../components/popover/Popover';
+import { ScrollFade } from '../../components/scroll-fade/ScrollFade';
 import styles from './JsonViewer.module.css';
 import { Button } from '../button/Button';
 import { Icon } from '../icon/Icon';
@@ -36,164 +37,167 @@ function JsonViewerShell({
     handleExpandAll,
     handleCollapseAll
   } = state;
-  return /* @__PURE__ */ jsxs(
-    "section",
+  const surface = currentAppearance === "dark" ? "inverse" : void 0;
+  const showMetaRow = Boolean(helperText) || viewMode === "tree" && Boolean(normalizedQuery);
+  const settingsMenu = /* @__PURE__ */ jsx(
+    Popover,
     {
-      className: [styles.viewer, borderless ? styles.borderless : "", className].filter(Boolean).join(" "),
-      "data-appearance": currentAppearance,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
+      matchTriggerWidth: false,
+      minWidth: "200px",
+      trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "inline",
+          "aria-label": "Flere handlinger",
+          "aria-haspopup": "menu",
+          "aria-expanded": isOpen ? true : false,
+          onClick: toggle,
+          children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" }) })
+        }
+      ),
+      children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [
+        /* @__PURE__ */ jsx(Menu.Item, { disabled: viewMode === "raw" || Boolean(normalizedQuery), children: /* @__PURE__ */ jsxs(
+          "button",
           {
-            className: styles.toolbar,
-            "data-surface": currentAppearance === "dark" ? "inverse" : void 0,
+            type: "button",
+            onClick: () => {
+              handleExpandAll();
+              close();
+            },
             children: [
-              /* @__PURE__ */ jsxs("div", { className: styles.toolbarTop, children: [
-                viewMode === "tree" ? /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: styles.searchField, children: [
-                  /* @__PURE__ */ jsx(Search, { className: styles.searchIcon, "aria-hidden": "true" }),
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      id: inputId,
-                      type: "search",
-                      value: queryInput,
-                      onChange: (event) => setQueryInput(event.target.value),
-                      placeholder: searchPlaceholder,
-                      className: styles.searchInput
-                    }
-                  ),
-                  queryInput ? /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: styles.clearButton,
-                      "aria-label": "Ryd s\xF8gning",
-                      onClick: () => {
-                        setQueryInput("");
-                        setQuery("");
-                      },
-                      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-                    }
-                  ) : null
-                ] }) : /* @__PURE__ */ jsx("span", {}),
-                /* @__PURE__ */ jsx("div", { className: styles.actions, children: /* @__PURE__ */ jsx(
-                  Popover,
-                  {
-                    matchTriggerWidth: false,
-                    minWidth: "200px",
-                    trigger: (toggle, _icon, isOpen) => /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        variant: "inline",
-                        "aria-label": "Flere handlinger",
-                        "aria-haspopup": "menu",
-                        "aria-expanded": isOpen ? true : false,
-                        onClick: toggle,
-                        children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" }) })
-                      }
-                    ),
-                    children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [
-                      /* @__PURE__ */ jsx(Menu.Item, { disabled: viewMode === "raw" || Boolean(normalizedQuery), children: /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            handleExpandAll();
-                            close();
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx(ArrowDown, { "aria-hidden": "true" }),
-                            /* @__PURE__ */ jsx("span", { children: "Fold alle ud" })
-                          ]
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx(Menu.Item, { disabled: viewMode === "raw" || Boolean(normalizedQuery), children: /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            handleCollapseAll();
-                            close();
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx(ArrowUp, { "aria-hidden": "true" }),
-                            /* @__PURE__ */ jsx("span", { children: "Fold alle sammen" })
-                          ]
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx(Menu.Separator, {}),
-                      /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            setViewMode((mode) => mode === "raw" ? "tree" : "raw");
-                            close();
-                          },
-                          children: [
-                            viewMode === "raw" ? /* @__PURE__ */ jsx(ListTree, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Braces, { "aria-hidden": "true" }),
-                            /* @__PURE__ */ jsx("span", { children: viewMode === "raw" ? "Vis tr\xE6" : "Vis raw" })
-                          ]
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            handleToggleAppearance();
-                            close();
-                          },
-                          children: [
-                            currentAppearance === "dark" ? /* @__PURE__ */ jsx(Sun, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Moon, { "aria-hidden": "true" }),
-                            /* @__PURE__ */ jsx("span", { children: currentAppearance === "dark" ? "Lys visning" : "M\xF8rk visning" })
-                          ]
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx(Menu.Separator, {}),
-                      /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => {
-                            handleCopyAll();
-                            close();
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx(ClipboardCopy, { "aria-hidden": "true" }),
-                            /* @__PURE__ */ jsx("span", { children: "Kopi\xE9r JSON" })
-                          ]
-                        }
-                      ) })
-                    ] })
-                  }
-                ) })
-              ] }),
-              helperText || viewMode === "tree" && normalizedQuery ? /* @__PURE__ */ jsxs("div", { className: styles.metaRow, children: [
-                helperText ? /* @__PURE__ */ jsx("span", { className: styles.helperText, children: helperText }) : /* @__PURE__ */ jsx("span", {}),
-                /* @__PURE__ */ jsx("span", { className: styles.statusText, children: viewMode === "tree" && normalizedQuery ? `${matches.size} matchende node${matches.size === 1 ? "" : "r"}` : "" })
-              ] }) : null
+              /* @__PURE__ */ jsx(ArrowDown, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { children: "Fold alle ud" })
             ]
           }
-        ),
-        viewMode === "raw" ? /* @__PURE__ */ jsx(
-          "pre",
+        ) }),
+        /* @__PURE__ */ jsx(Menu.Item, { disabled: viewMode === "raw" || Boolean(normalizedQuery), children: /* @__PURE__ */ jsxs(
+          "button",
           {
-            className: [styles.rawPane, deleted ? styles.deleted : ""].filter(Boolean).join(" "),
-            style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
-            children: rawJson
+            type: "button",
+            onClick: () => {
+              handleCollapseAll();
+              close();
+            },
+            children: [
+              /* @__PURE__ */ jsx(ArrowUp, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { children: "Fold alle sammen" })
+            ]
           }
-        ) : /* @__PURE__ */ jsx(
+        ) }),
+        /* @__PURE__ */ jsx(Menu.Separator, {}),
+        /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setViewMode((mode) => mode === "raw" ? "tree" : "raw");
+              close();
+            },
+            children: [
+              viewMode === "raw" ? /* @__PURE__ */ jsx(ListTree, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Braces, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { children: viewMode === "raw" ? "Vis tr\xE6" : "Vis raw" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              handleToggleAppearance();
+              close();
+            },
+            children: [
+              currentAppearance === "dark" ? /* @__PURE__ */ jsx(Sun, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Moon, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { children: currentAppearance === "dark" ? "Lys visning" : "M\xF8rk visning" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Menu.Separator, {}),
+        /* @__PURE__ */ jsx(Menu.Item, { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              handleCopyAll();
+              close();
+            },
+            children: [
+              /* @__PURE__ */ jsx(ClipboardCopy, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { children: "Kopi\xE9r JSON" })
+            ]
+          }
+        ) })
+      ] })
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: [styles.viewer, borderless ? styles.borderless : "", className].filter(Boolean).join(" "),
+      "data-appearance": currentAppearance,
+      children: [
+        viewMode === "tree" || showMetaRow ? /* @__PURE__ */ jsxs("div", { className: styles.toolbar, "data-surface": surface, children: [
+          viewMode === "tree" ? /* @__PURE__ */ jsxs("div", { className: styles.toolbarTop, children: [
+            /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: styles.searchField, children: [
+              /* @__PURE__ */ jsx(Search, { className: styles.searchIcon, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: inputId,
+                  type: "search",
+                  value: queryInput,
+                  onChange: (event) => setQueryInput(event.target.value),
+                  placeholder: searchPlaceholder,
+                  className: styles.searchInput
+                }
+              ),
+              queryInput ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles.clearButton,
+                  "aria-label": "Ryd s\xF8gning",
+                  onClick: () => {
+                    setQueryInput("");
+                    setQuery("");
+                  },
+                  children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: styles.actions, children: settingsMenu })
+          ] }) : null,
+          showMetaRow ? /* @__PURE__ */ jsxs("div", { className: styles.metaRow, children: [
+            helperText ? /* @__PURE__ */ jsx("span", { className: styles.helperText, children: helperText }) : /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsx("span", { className: styles.statusText, children: viewMode === "tree" && normalizedQuery ? `${matches.size} matchende node${matches.size === 1 ? "" : "r"}` : "" })
+          ] }) : null
+        ] }) : null,
+        viewMode === "raw" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: styles.floatingToolbar, children: /* @__PURE__ */ jsx("span", { className: styles.floatingButton, "data-surface": surface, children: settingsMenu }) }),
+          /* @__PURE__ */ jsx(ScrollFade, { children: (scrollRef) => /* @__PURE__ */ jsxs(
+            "pre",
+            {
+              ref: scrollRef,
+              className: [styles.rawPane, deleted ? styles.deleted : ""].filter(Boolean).join(" "),
+              style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: styles.floatingSpacer, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Button, { variant: "inline", tabIndex: -1, children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, {}) }) }) }),
+                rawJson
+              ]
+            }
+          ) })
+        ] }) : /* @__PURE__ */ jsx(ScrollFade, { scrollRef: treePaneRef, children: (scrollRef) => /* @__PURE__ */ jsx(
           "div",
           {
             className: [styles.treePane, deleted ? styles.deleted : ""].filter(Boolean).join(" "),
             role: "tree",
             "aria-label": "JSON-visning",
-            ref: treePaneRef,
+            ref: scrollRef,
             style: maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
             children: hasResults ? children : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: emptySearchText })
           }
-        )
+        ) })
       ]
     }
   );

package/dist/components/line-viewer/LineViewer.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 styles = require('./LineViewer.module.css');
 var tokenizeLineFormat = require('./tokenizeLineFormat');
@@ -37,7 +38,6 @@ function LineViewer({
   borderless = false
 }) {
   const tokens = react.useMemo(() => tokenizeLineFormat.tokenizeLineFormat(lines), [lines]);
-  const codeRef = react.useRef(null);
   const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState.usePersistentState({
     initialValue: appearance,
     storageKey: storageKey ? `${storageKey}:appearance` : void 0,
@@ -56,25 +56,16 @@ function LineViewer({
   const handleCopy = () => {
     void clipboard_utils.copyToClipboard(lines);
   };
-  const handleDoubleClick = () => {
-    const el = codeRef.current;
-    const selection = typeof window !== "undefined" ? window.getSelection() : null;
-    if (!el || !selection) return;
-    const range = document.createRange();
-    range.selectNodeContents(el);
-    selection.removeAllRanges();
-    selection.addRange(range);
-  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
       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,
@@ -155,10 +146,11 @@ function LineViewer({
               }
             )
           }
-        ),
-        /* @__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],
@@ -166,13 +158,15 @@ function LineViewer({
               deleted ? styles__default.default.deleted : ""
             ].filter(Boolean).join(" "),
             tabIndex: 0,
-            onDoubleClick: handleDoubleClick,
-            children: /* @__PURE__ */ jsxRuntime.jsx("code", { ref: codeRef, children: viewMode === "raw" ? lines : 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", { children: viewMode === "raw" ? lines : 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/line-viewer/LineViewer.d.ts

@@ -16,7 +16,7 @@ export interface LineViewerProps {
      */
     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/line-viewer/LineViewer.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, Settings2 } from 'lucide-react';
-import { useMemo, useRef } from 'react';
+import { useMemo } 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 styles from './LineViewer.module.css';
 import { tokenizeLineFormat } from './tokenizeLineFormat';
@@ -31,7 +32,6 @@ function LineViewer({
   borderless = false
 }) {
   const tokens = useMemo(() => tokenizeLineFormat(lines), [lines]);
-  const codeRef = useRef(null);
   const { value: currentAppearance, setValue: setCurrentAppearance } = usePersistentState({
     initialValue: appearance,
     storageKey: storageKey ? `${storageKey}:appearance` : void 0,
@@ -50,25 +50,16 @@ function LineViewer({
   const handleCopy = () => {
     void copyToClipboard(lines);
   };
-  const handleDoubleClick = () => {
-    const el = codeRef.current;
-    const selection = typeof window !== "undefined" ? window.getSelection() : null;
-    if (!el || !selection) return;
-    const range = document.createRange();
-    range.selectNodeContents(el);
-    selection.removeAllRanges();
-    selection.addRange(range);
-  };
   return /* @__PURE__ */ jsxs(
     "section",
     {
       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,
@@ -149,10 +140,11 @@ function LineViewer({
               }
             )
           }
-        ),
-        /* @__PURE__ */ jsx(
+        ) }),
+        /* @__PURE__ */ jsx(ScrollFade, { children: (scrollRef) => /* @__PURE__ */ jsxs(
           "pre",
           {
+            ref: scrollRef,
             className: [
               styles.codePane,
               styles[size],
@@ -160,13 +152,15 @@ function LineViewer({
               deleted ? styles.deleted : ""
             ].filter(Boolean).join(" "),
             tabIndex: 0,
-            onDoubleClick: handleDoubleClick,
-            children: /* @__PURE__ */ jsx("code", { ref: codeRef, children: viewMode === "raw" ? lines : 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", { children: viewMode === "raw" ? lines : 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/line-viewer/LineViewer.module.css

@@ -2,6 +2,7 @@
   --line-pane-bg: var(--color-bg-inverse);
   --line-pane-border: color-mix(in oklab, var(--color-fg-inverse) 12%, transparent);
   --line-pane-text: var(--color-fg-inverse);
+  --scroll-fade-color: var(--line-pane-bg);
 
   --line-tag: color-mix(in oklab, var(--color-fg-inverse) 66%, var(--color-syntax-accent) 34%);
   --line-indicator: color-mix(in oklab, var(--color-fg-inverse) 46%, transparent);
@@ -20,6 +21,10 @@
   --line-continuation: color-mix(in oklab, var(--color-fg-inverse) 46%, 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(--line-pane-bg);
   border: var(--border-width-thin) solid var(--line-pane-border);
   border-radius: var(--border-radius-default);
@@ -49,11 +54,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(--line-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/components/page-layout/PageLayout.module.css

@@ -19,7 +19,7 @@
 
   /* Structural bottom breathing room for all page content, so it doesn't sit
      flush against the viewport edge. */
-  --page-layout-content-padding-bottom: var(--spacing-xl);
+  --page-layout-content-padding-bottom: var(--spacing-md);
 }
 
 /* Viewport handling:

package/dist/components/scroll-fade/ScrollFade.cjs

@@ -0,0 +1,42 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var useScrollOverflow = require('../../hooks/useScrollOverflow');
+var refs_utils = require('../../utils/refs.utils');
+var styles = require('./ScrollFade.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function ScrollFade({
+  children,
+  scrollRef,
+  className
+}) {
+  const [scrollElement, setScrollElement] = react.useState(null);
+  const overflow = useScrollOverflow.useScrollOverflow(scrollElement);
+  const ref = react.useMemo(() => refs_utils.mergeRefs(setScrollElement, scrollRef), [scrollRef]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [styles__default.default.frame, className].filter(Boolean).join(" "),
+      "data-scrollable-y": overflow.top || overflow.bottom,
+      style: {
+        "--scroll-fade-scrollbar-width": `${overflow.scrollbarWidth}px`,
+        "--scroll-fade-scrollbar-height": `${overflow.scrollbarHeight}px`
+      },
+      children: [
+        children(ref),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.fadeTop, "data-visible": overflow.top, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.fadeBottom, "data-visible": overflow.bottom, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.fadeLeft, "data-visible": overflow.left, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.fadeRight, "data-visible": overflow.right, "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+
+exports.ScrollFade = ScrollFade;

package/dist/components/scroll-fade/ScrollFade.d.ts

@@ -0,0 +1,18 @@
+import type { JSX, ReactNode, Ref } from 'react';
+export interface ScrollFadeProps<E extends HTMLElement = HTMLElement> {
+    /**
+     * Renders the scroll container. Attach the given ref to the element that
+     * scrolls (`overflow: auto`). It fills the frame and shrinks with it.
+     */
+    children: (scrollRef: (node: E | null) => void) => ReactNode;
+    /** Also receives the scroll container, e.g. for a virtualizer. */
+    scrollRef?: Ref<E>;
+    className?: string;
+}
+/**
+ * Fades the edges of a scroll container that hide more content, so overflow is
+ * discoverable without restyling the native scrollbars. The fades blend into
+ * `--scroll-fade-color` (default: the surface background), which callers set
+ * to the background behind the content; `--scroll-fade-size` sets their depth.
+ */
+export declare function ScrollFade<E extends HTMLElement = HTMLElement>({ children, scrollRef, className, }: ScrollFadeProps<E>): JSX.Element;