@textui/widgets 0.2.0 → 0.3.0

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;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,2DAsOf,CAAC"}

package/dist/data/feed.js

@@ -28,6 +28,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 +183,54 @@ export const Feed = defineComponent('Feed', (props) => {
         scrollTo(event.name === 'pageup' ? top - page : top + page);
         return true;
     }, { global: true, enabled: pageKeys === 'always' });
+    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;
+        }
+    }
     const drawn = entries.map((entry, i) => h(FeedEntry, {
         key: i,
-        onHeight: (height) => { heights.current[i] = height; },
-    }, entry));
+        index: i,
+        onHeight: report.current,
+        ...(skipped[i] ? { placeholder: true, height: heights.current[i] } : {}),
+    }, skipped[i] ? null : entry));
     // 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

package/dist/data/shared.d.ts

@@ -4,9 +4,26 @@ 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;
+    /**
+     * Standing in for an entry that is not drawn, at the height it had.
+     *
+     * A stand-in must not answer the question it is an answer to. Its height is
+     * one the feed already knows - it is where it came from - and reporting it
+     * back is how a measurement gets to depend on itself: a round where a
+     * stand-in came out any shorter would teach the feed that it *was* shorter,
+     * and the next round would place the rest of them on top of each other.
+     */
+    placeholder?: boolean;
+    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;IACb;;;;;;;;OAQG;kBACW,OAAO;oBACL,MAAM,UAAU,MAAM,GAAG,IAAI;yCAY9C,CAAC;AAEF,eAAO,MAAM,aAAa,uEAGxB,CAAC"}

package/dist/data/shared.js

@@ -4,11 +4,21 @@ import { defineComponent, h, useEffect, useMeasure, useTheme } from '@textui/cor
  *
  * 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, placeholder, onHeight, children, ...rest } = props;
     const measured = useMeasure();
-    useEffect(() => { onHeight(measured.height); }, [measured.height]);
+    useEffect(() => {
+        if (placeholder)
+            return;
+        onHeight(index, measured.height);
+    }, [measured.height, placeholder]);
     return h('box', { direction: 'column', ...rest }, children);
 });
 export const FeedScrollbar = defineComponent('FeedScrollbar', () => {

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.3.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.3.0"
   },
   "publishConfig": {
     "access": "public"

package/src/data/feed.ts

@@ -85,6 +85,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 +223,52 @@ export const Feed = defineComponent<FeedProps>('Feed', (props) => {
     { global: true, enabled: pageKeys === 'always' },
   );
 
+  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;
+    }
+  }
   const drawn = entries.map((entry, i) => h(FeedEntry, {
     key: i,
-    onHeight: (height: number) => { heights.current[i] = height; },
-  }, entry));
+    index: i,
+    onHeight: report.current,
+    ...(skipped[i] ? { placeholder: true, height: heights.current[i] as number } : {}),
+  }, skipped[i] ? null : entry));
 
   // 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,

package/src/data/shared.ts

@@ -6,13 +6,35 @@ import { defineComponent, h, useEffect, useMeasure, useTheme } from '@textui/cor
  *
  * 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;
+  /**
+   * Standing in for an entry that is not drawn, at the height it had.
+   *
+   * A stand-in must not answer the question it is an answer to. Its height is
+   * one the feed already knows - it is where it came from - and reporting it
+   * back is how a measurement gets to depend on itself: a round where a
+   * stand-in came out any shorter would teach the feed that it *was* shorter,
+   * and the next round would place the rest of them on top of each other.
+   */
+  placeholder?: boolean;
+  onHeight(index: number, height: number): void;
+}>(
   'FeedEntry',
   (props) => {
-    const { onHeight, children, ...rest } = props;
+    const { index, placeholder, onHeight, children, ...rest } = props;
     const measured = useMeasure();
-    useEffect(() => { onHeight(measured.height); }, [measured.height]);
+    useEffect(() => {
+      if (placeholder) return;
+      onHeight(index, measured.height);
+    }, [measured.height, placeholder]);
     return h('box', { direction: 'column', ...rest }, children);
   },
 );

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 },