@textui/widgets 0.2.0 → 0.4.0

package/dist/control/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/control/select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAiB,YAAY,EAAE,MAAM,cAAc,CAAC;AAK1E,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,QAAQ;IAC3C,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;CACxC;AAED,eAAO,MAAM,MAAM,sCAuLjB,CAAC"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/control/select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAiB,YAAY,EAAE,MAAM,cAAc,CAAC;AAK1E,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,QAAQ;IAC3C,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;CACxC;AAED,eAAO,MAAM,MAAM,sCAiMjB,CAAC"}

package/dist/control/select.js

@@ -146,6 +146,16 @@ export const Select = defineComponent('Select', (props) => {
         direction: 'column',
         border: { style: theme.border, color: focus.focused ? 'focus' : 'border' },
         padding: [0, 1],
+        /*
+         * The terminal cursor, parked at the start of the value.
+         *
+         * There is nothing to type here, so this is not a caret - it is the
+         * strongest "you are here" a terminal has, and a control that gives it up
+         * on focus is one whose only remaining signal is the colour of its border.
+         * Tabbing from a text field used to look like the focus had stayed behind
+         * in the field, because the cursor had.
+         */
+        cursor: focus.focused ? 0 : undefined,
         ...rest,
     }, h('box', {
         direction: 'row',

package/dist/data/feed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feed.d.ts","sourceRoot":"","sources":["../../src/data/feed.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAiB7C,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,UAAU,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,IAAI,2DA8Kf,CAAC"}
+{"version":3,"file":"feed.d.ts","sourceRoot":"","sources":["../../src/data/feed.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAkB7C,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACvC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,UAAU,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,IAAI,2DAmRf,CAAC"}

package/dist/data/feed.js

@@ -1,6 +1,7 @@
 import { chorded, defineComponent, h, useFocus, useInput, useMeasure, useRef, useScrollExtent, useState, } from '@textui/core';
 import { sizedByLayout } from '../viewport.js';
-import { FeedEntry, FeedScrollbar } from './shared.js';
+import { FeedEntry } from './shared.js';
+import { ScrollThumb } from './scroll-thumb.js';
 /**
  * A viewport over entries of any height.
  *
@@ -28,6 +29,20 @@ export const Feed = defineComponent('Feed', (props) => {
     const measured = useMeasure();
     const extent = useScrollExtent();
     const heights = useRef([]);
+    /**
+     * The width those heights were measured at.
+     *
+     * A height is a statement about a width - what a paragraph wrapped to in a
+     * pane this wide - so a resize does not make them stale, it makes them
+     * about a layout that no longer exists. Kept and compared rather than
+     * ignored, because the alternative is a feed that scrolls to the wrong
+     * place for ever after the window is dragged.
+     */
+    const heightsAt = useRef(-1);
+    /** One handler for every entry, so an entry's props do not change with it. */
+    const report = useRef((index, height) => {
+        heights.current[index] = height;
+    });
     // The catalog's rule, and this has to follow it like every other viewport:
     // given `flex`, a `height`, a `maxHeight` or a `basis`, the layout decided
     // the size and the feed fills it and scrolls; given none of those, the
@@ -169,10 +184,88 @@ export const Feed = defineComponent('Feed', (props) => {
         scrollTo(event.name === 'pageup' ? top - page : top + page);
         return true;
     }, { global: true, enabled: pageKeys === 'always' });
-    const drawn = entries.map((entry, i) => h(FeedEntry, {
-        key: i,
-        onHeight: (height) => { heights.current[i] = height; },
-    }, entry));
+    if (measured.width !== heightsAt.current) {
+        heightsAt.current = measured.width;
+        heights.current = [];
+    }
+    /*
+     * Which entries are far enough away not to be worth drawing.
+     *
+     * A feed lays out every entry it holds, and laying one out means wrapping
+     * its text - so a viewport thirty rows tall over a transcript of six
+     * hundred entries spent every frame measuring the five hundred and seventy
+     * nobody can see. That cost is paid per *frame*, not per change: a
+     * keystroke in a field elsewhere on the screen, a caret blinking, a
+     * spinner. It is why a long conversation is heavy to type into and a short
+     * one is not.
+     *
+     * An entry is skipped only once it has been measured, which is what keeps
+     * this honest: the first frame draws everything and learns every height,
+     * and from then on the ones outside the window are replaced by a box of
+     * exactly the height they had. Nothing is estimated, so the extent, the
+     * scrollbar and the position of every entry are what they would have been
+     * had all of them been drawn.
+     *
+     * A screenful either side, so scrolling and paging land on something that
+     * is already there rather than on a frame of blanks.
+     */
+    const view = Math.max(1, measured.height);
+    const skipped = [];
+    {
+        let y = 0;
+        for (let i = 0; i < count; i++) {
+            const height = heights.current[i];
+            // Zero is not a height that has been learned, whatever wrote it: an
+            // entry standing in for itself at nothing tall is one that can never
+            // be drawn again to find out how tall it is.
+            if (height === undefined || height <= 0) {
+                skipped[i] = false;
+                continue;
+            }
+            skipped[i] = fills && (y + height < top - view || y > top + view + view);
+            y += height;
+        }
+    }
+    /*
+     * A run of skipped entries is one box, not one box each.
+     *
+     * Skipping the *contents* of an entry took the wrapping away, which was the
+     * expensive part, and left everything else: an entry standing in for itself
+     * is still a component to reconcile and still a box to measure, four times a
+     * frame, at every level of the tree above it. Six hundred entries with
+     * thirty on screen was five hundred and seventy of those, and they cost the
+     * same whether or not anything in them had changed.
+     *
+     * The window is contiguous, so there are at most two runs - everything above
+     * it and everything below - and each collapses to a single box of exactly
+     * the height its entries had. The entries that *are* drawn keep their own
+     * index as their key, so scrolling moves the boundary without disturbing the
+     * identity of anything still on screen.
+     */
+    const drawn = [];
+    let gap = 0;
+    let gapFrom = 0;
+    const closeGap = () => {
+        if (gap <= 0)
+            return;
+        drawn.push(h('box', { key: `gap:${String(gapFrom)}`, height: gap }));
+        gap = 0;
+    };
+    for (let i = 0; i < count; i++) {
+        if (skipped[i]) {
+            if (gap === 0)
+                gapFrom = i;
+            gap += heights.current[i];
+            continue;
+        }
+        closeGap();
+        drawn.push(h(FeedEntry, {
+            key: i,
+            index: i,
+            onHeight: report.current,
+        }, entries[i]));
+    }
+    closeGap();
     // Content-sized: draw everything and let the box grow. Clamping to a
     // measurement here would clamp to how tall this happened to be last frame,
     // which for a box sized *by* its own content is nothing at all - the entries
@@ -198,7 +291,20 @@ export const Feed = defineComponent('Feed', (props) => {
             return true;
         },
     }, h('box', { flex: 1, direction: 'column', scrollTop: top, overflow: 'scroll' }, ...drawn), 
+    // `ScrollThumb`, the one every other viewport in the library draws. This
+    // one had its own: a column filled with the border glyph, taking no offset
+    // and saying nothing about where in the conversation you were or how much
+    // of it there is. Against the panel it sits inside, it read as a second
+    // border - and a bar that cannot be told from a frame is not a bar.
+    //
     // Only when there is somewhere to scroll. A track down the side of a feed
     // that fits is chrome that states something untrue.
-    scrollbar && limit > 0 ? h(FeedScrollbar, {}) : null);
+    scrollbar && limit > 0
+        ? h(ScrollThumb, {
+            total: total || measured.height,
+            rows: measured.height,
+            offset: top,
+            focused: focus.focused,
+        })
+        : null);
 });

package/dist/data/shared.d.ts

@@ -4,9 +4,15 @@ import type { BoxProps } from '@textui/core';
  *
  * Through a ref rather than state, deliberately: a height arriving must not
  * schedule a render, or every measurement would cause the next measurement.
+ *
+ * It reports its `index` to one shared handler rather than taking a closure
+ * that already knows it. A closure per entry is a new prop on every entry
+ * every time the feed itself re-renders, and a changed prop is a re-render -
+ * so a feed that redrew for its own reasons dragged every entry it holds
+ * along with it, however little any of them had changed.
  */
 export declare const FeedEntry: (props: BoxProps & {
-    onHeight(height: number): void;
+    index: number;
+    onHeight(index: number, height: number): void;
 }) => import("@textui/core").RenderOutput;
-export declare const FeedScrollbar: (props: Record<string, never>) => import("@textui/core").RenderOutput;
 //# sourceMappingURL=shared.d.ts.map

package/dist/data/shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/data/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C;;;;;GAKG;AACH,eAAO,MAAM,SAAS;qBAAiD,MAAM,GAAG,IAAI;yCAQnF,CAAC;AAEF,eAAO,MAAM,aAAa,uEAGxB,CAAC"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/data/shared.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAG7C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS;WACb,MAAM;oBACG,MAAM,UAAU,MAAM,GAAG,IAAI;yCAW9C,CAAC"}

package/dist/data/shared.js

@@ -1,17 +1,21 @@
-import { defineComponent, h, useEffect, useMeasure, useTheme } from '@textui/core';
+import { defineComponent, h, useEffect, useMeasure } from '@textui/core';
 /**
  * An entry that reports how tall it turned out to be.
  *
  * Through a ref rather than state, deliberately: a height arriving must not
  * schedule a render, or every measurement would cause the next measurement.
+ *
+ * It reports its `index` to one shared handler rather than taking a closure
+ * that already knows it. A closure per entry is a new prop on every entry
+ * every time the feed itself re-renders, and a changed prop is a re-render -
+ * so a feed that redrew for its own reasons dragged every entry it holds
+ * along with it, however little any of them had changed.
  */
 export const FeedEntry = defineComponent('FeedEntry', (props) => {
-    const { onHeight, children, ...rest } = props;
+    const { index, onHeight, children, ...rest } = props;
     const measured = useMeasure();
-    useEffect(() => { onHeight(measured.height); }, [measured.height]);
+    useEffect(() => {
+        onHeight(index, measured.height);
+    }, [measured.height]);
     return h('box', { direction: 'column', ...rest }, children);
 });
-export const FeedScrollbar = defineComponent('FeedScrollbar', () => {
-    const theme = useTheme();
-    return h('box', { width: 1, fill: theme.borderChars().left, fg: 'borderSubtle' });
-});

package/dist/shells/workbench-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"workbench-shell.d.ts","sourceRoot":"","sources":["../../src/shells/workbench-shell.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,iFA6DzB,CAAC"}
+{"version":3,"file":"workbench-shell.d.ts","sourceRoot":"","sources":["../../src/shells/workbench-shell.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,iFAmEzB,CAAC"}

package/dist/shells/workbench-shell.js

@@ -30,6 +30,12 @@ export const WorkbenchShell = defineComponent('WorkbenchShell', (props) => {
     }, h(SurfaceArea, { surface: 'header' }), h('box', { direction: 'row', flex: 1 }, h(SurfaceArea, { surface: 'rail' }), showSidebar
         ? h('box', {
             width: 24,
+            // Rigid. Sideways, the layout shrinks a child with a plain `width`
+            // before it clips anything - which is how terminals have always
+            // narrowed, and wrong for chrome: an overflowing pane beside it
+            // crushed twenty-four columns of tree down to four. A sidebar is a
+            // decision about the window, not a column of the document.
+            shrink: 0,
             border: { style: theme.border, sides: { right: true } },
             direction: 'column',
             padding: { left: 1 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textui/widgets",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "The TextUI component catalog - layout, display, controls, data, overlays and charts",
   "keywords": [
     "terminal",
@@ -46,7 +46,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@textui/core": "^0.2.0"
+    "@textui/core": "^0.4.0"
   },
   "publishConfig": {
     "access": "public"

package/src/control/select.ts

@@ -202,6 +202,16 @@ export const Select = defineComponent<SelectProps>('Select', (props) => {
     direction: 'column',
     border: { style: theme.border, color: focus.focused ? 'focus' : 'border' },
     padding: [0, 1],
+    /*
+     * The terminal cursor, parked at the start of the value.
+     *
+     * There is nothing to type here, so this is not a caret - it is the
+     * strongest "you are here" a terminal has, and a control that gives it up
+     * on focus is one whose only remaining signal is the colour of its border.
+     * Tabbing from a text field used to look like the focus had stayed behind
+     * in the field, because the cursor had.
+     */
+    cursor: focus.focused ? 0 : undefined,
     ...rest,
   },
     h('box', {

package/src/data/feed.ts

@@ -11,7 +11,8 @@ import {
   useState,
 } from '@textui/core';
 import { sizedByLayout } from '../viewport.js';
-import { FeedEntry, FeedScrollbar } from './shared.js';
+import { FeedEntry } from './shared.js';
+import { ScrollThumb } from './scroll-thumb.js';
 
 // ---------------------------------------------------------------------- feed
 
@@ -85,6 +86,20 @@ export const Feed = defineComponent<FeedProps>('Feed', (props) => {
   const measured = useMeasure();
   const extent = useScrollExtent();
   const heights = useRef<number[]>([]);
+  /**
+   * The width those heights were measured at.
+   *
+   * A height is a statement about a width - what a paragraph wrapped to in a
+   * pane this wide - so a resize does not make them stale, it makes them
+   * about a layout that no longer exists. Kept and compared rather than
+   * ignored, because the alternative is a feed that scrolls to the wrong
+   * place for ever after the window is dragged.
+   */
+  const heightsAt = useRef(-1);
+  /** One handler for every entry, so an entry's props do not change with it. */
+  const report = useRef((index: number, height: number): void => {
+    heights.current[index] = height;
+  });
 
   // The catalog's rule, and this has to follow it like every other viewport:
   // given `flex`, a `height`, a `maxHeight` or a `basis`, the layout decided
@@ -209,10 +224,84 @@ export const Feed = defineComponent<FeedProps>('Feed', (props) => {
     { global: true, enabled: pageKeys === 'always' },
   );
 
-  const drawn = entries.map((entry, i) => h(FeedEntry, {
-    key: i,
-    onHeight: (height: number) => { heights.current[i] = height; },
-  }, entry));
+  if (measured.width !== heightsAt.current) {
+    heightsAt.current = measured.width;
+    heights.current = [];
+  }
+
+  /*
+   * Which entries are far enough away not to be worth drawing.
+   *
+   * A feed lays out every entry it holds, and laying one out means wrapping
+   * its text - so a viewport thirty rows tall over a transcript of six
+   * hundred entries spent every frame measuring the five hundred and seventy
+   * nobody can see. That cost is paid per *frame*, not per change: a
+   * keystroke in a field elsewhere on the screen, a caret blinking, a
+   * spinner. It is why a long conversation is heavy to type into and a short
+   * one is not.
+   *
+   * An entry is skipped only once it has been measured, which is what keeps
+   * this honest: the first frame draws everything and learns every height,
+   * and from then on the ones outside the window are replaced by a box of
+   * exactly the height they had. Nothing is estimated, so the extent, the
+   * scrollbar and the position of every entry are what they would have been
+   * had all of them been drawn.
+   *
+   * A screenful either side, so scrolling and paging land on something that
+   * is already there rather than on a frame of blanks.
+   */
+  const view = Math.max(1, measured.height);
+  const skipped: boolean[] = [];
+  {
+    let y = 0;
+    for (let i = 0; i < count; i++) {
+      const height = heights.current[i];
+      // Zero is not a height that has been learned, whatever wrote it: an
+      // entry standing in for itself at nothing tall is one that can never
+      // be drawn again to find out how tall it is.
+      if (height === undefined || height <= 0) { skipped[i] = false; continue; }
+      skipped[i] = fills && (y + height < top - view || y > top + view + view);
+      y += height;
+    }
+  }
+  /*
+   * A run of skipped entries is one box, not one box each.
+   *
+   * Skipping the *contents* of an entry took the wrapping away, which was the
+   * expensive part, and left everything else: an entry standing in for itself
+   * is still a component to reconcile and still a box to measure, four times a
+   * frame, at every level of the tree above it. Six hundred entries with
+   * thirty on screen was five hundred and seventy of those, and they cost the
+   * same whether or not anything in them had changed.
+   *
+   * The window is contiguous, so there are at most two runs - everything above
+   * it and everything below - and each collapses to a single box of exactly
+   * the height its entries had. The entries that *are* drawn keep their own
+   * index as their key, so scrolling moves the boundary without disturbing the
+   * identity of anything still on screen.
+   */
+  const drawn: unknown[] = [];
+  let gap = 0;
+  let gapFrom = 0;
+  const closeGap = (): void => {
+    if (gap <= 0) return;
+    drawn.push(h('box', { key: `gap:${String(gapFrom)}`, height: gap }));
+    gap = 0;
+  };
+  for (let i = 0; i < count; i++) {
+    if (skipped[i]) {
+      if (gap === 0) gapFrom = i;
+      gap += heights.current[i] as number;
+      continue;
+    }
+    closeGap();
+    drawn.push(h(FeedEntry, {
+      key: i,
+      index: i,
+      onHeight: report.current,
+    }, entries[i]));
+  }
+  closeGap();
 
   // Content-sized: draw everything and let the box grow. Clamping to a
   // measurement here would clamp to how tall this happened to be last frame,
@@ -240,8 +329,21 @@ export const Feed = defineComponent<FeedProps>('Feed', (props) => {
     },
   },
     h('box', { flex: 1, direction: 'column', scrollTop: top, overflow: 'scroll' }, ...drawn),
+    // `ScrollThumb`, the one every other viewport in the library draws. This
+    // one had its own: a column filled with the border glyph, taking no offset
+    // and saying nothing about where in the conversation you were or how much
+    // of it there is. Against the panel it sits inside, it read as a second
+    // border - and a bar that cannot be told from a frame is not a bar.
+    //
     // Only when there is somewhere to scroll. A track down the side of a feed
     // that fits is chrome that states something untrue.
-    scrollbar && limit > 0 ? h(FeedScrollbar, {}) : null,
+    scrollbar && limit > 0
+      ? h(ScrollThumb, {
+          total: total || measured.height,
+          rows: measured.height,
+          offset: top,
+          focused: focus.focused,
+        })
+      : null,
   );
 });

package/src/data/shared.ts

@@ -1,23 +1,29 @@
 import type { BoxProps } from '@textui/core';
-import { defineComponent, h, useEffect, useMeasure, useTheme } from '@textui/core';
+import { defineComponent, h, useEffect, useMeasure } from '@textui/core';
 
 /**
  * An entry that reports how tall it turned out to be.
  *
  * Through a ref rather than state, deliberately: a height arriving must not
  * schedule a render, or every measurement would cause the next measurement.
+ *
+ * It reports its `index` to one shared handler rather than taking a closure
+ * that already knows it. A closure per entry is a new prop on every entry
+ * every time the feed itself re-renders, and a changed prop is a re-render -
+ * so a feed that redrew for its own reasons dragged every entry it holds
+ * along with it, however little any of them had changed.
  */
-export const FeedEntry = defineComponent<BoxProps & { onHeight(height: number): void }>(
+export const FeedEntry = defineComponent<BoxProps & {
+  index: number;
+  onHeight(index: number, height: number): void;
+}>(
   'FeedEntry',
   (props) => {
-    const { onHeight, children, ...rest } = props;
+    const { index, onHeight, children, ...rest } = props;
     const measured = useMeasure();
-    useEffect(() => { onHeight(measured.height); }, [measured.height]);
+    useEffect(() => {
+      onHeight(index, measured.height);
+    }, [measured.height]);
     return h('box', { direction: 'column', ...rest }, children);
   },
 );
-
-export const FeedScrollbar = defineComponent<Record<string, never>>('FeedScrollbar', () => {
-  const theme = useTheme();
-  return h('box', { width: 1, fill: theme.borderChars().left, fg: 'borderSubtle' });
-});

package/src/shells/workbench-shell.ts

@@ -39,6 +39,12 @@ export const WorkbenchShell = defineComponent<ShellProps>('WorkbenchShell', (pro
       showSidebar
         ? h('box', {
             width: 24,
+            // Rigid. Sideways, the layout shrinks a child with a plain `width`
+            // before it clips anything - which is how terminals have always
+            // narrowed, and wrong for chrome: an overflowing pane beside it
+            // crushed twenty-four columns of tree down to four. A sidebar is a
+            // decision about the window, not a column of the document.
+            shrink: 0,
             border: { style: theme.border, sides: { right: true } },
             direction: 'column',
             padding: { left: 1 },