@textui/widgets 0.3.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,2DAsOf,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.
  *
@@ -225,12 +226,46 @@ export const Feed = defineComponent('Feed', (props) => {
             y += height;
         }
     }
-    const drawn = entries.map((entry, i) => h(FeedEntry, {
-        key: i,
-        index: i,
-        onHeight: report.current,
-        ...(skipped[i] ? { placeholder: true, height: heights.current[i] } : {}),
-    }, skipped[i] ? null : entry));
+    /*
+     * 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
@@ -256,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

@@ -13,17 +13,6 @@ import type { BoxProps } from '@textui/core';
  */
 export declare const FeedEntry: (props: 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;
 }) => 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;;;;;;;;;;;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"}
+{"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,4 +1,4 @@
-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.
  *
@@ -12,16 +12,10 @@ import { defineComponent, h, useEffect, useMeasure, useTheme } from '@textui/cor
  * along with it, however little any of them had changed.
  */
 export const FeedEntry = defineComponent('FeedEntry', (props) => {
-    const { index, placeholder, onHeight, children, ...rest } = props;
+    const { index, onHeight, children, ...rest } = props;
     const measured = useMeasure();
     useEffect(() => {
-        if (placeholder)
-            return;
         onHeight(index, measured.height);
-    }, [measured.height, placeholder]);
+    }, [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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textui/widgets",
-  "version": "0.3.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.3.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
 
@@ -263,12 +264,44 @@ export const Feed = defineComponent<FeedProps>('Feed', (props) => {
       y += height;
     }
   }
-  const drawn = entries.map((entry, i) => h(FeedEntry, {
-    key: i,
-    index: i,
-    onHeight: report.current,
-    ...(skipped[i] ? { placeholder: true, height: heights.current[i] as number } : {}),
-  }, skipped[i] ? null : entry));
+  /*
+   * 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,
@@ -296,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,5 +1,5 @@
 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.
@@ -15,31 +15,15 @@ import { defineComponent, h, useEffect, useMeasure, useTheme } from '@textui/cor
  */
 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 { index, placeholder, onHeight, children, ...rest } = props;
+    const { index, onHeight, children, ...rest } = props;
     const measured = useMeasure();
     useEffect(() => {
-      if (placeholder) return;
       onHeight(index, measured.height);
-    }, [measured.height, placeholder]);
+    }, [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' });
-});