@trendr/core 0.2.10 → 0.4.0

package/README.md

@@ -8,7 +8,7 @@
 
 JSX components, signals, per-cell diffing and flexbox without React and [Yoga](https://github.com/facebook/yoga/issues/1859). Terminals are character grids, not DOM trees. Why reconcile a virtual DOM to write escape sequences?
 
-4-16x faster frame times and 580x less I/O per render than popular TUI frameworks. No dependencies. [benchmarks](bench/README.md)
+No dependencies. In the included [benchmarks](bench/README.md), median frame times are 4.5x faster than ink on the dashboard and list-scrolling scenarios, 10.5x on ink's own rerender benchmark, and 24.8x on the resize-storm worst case; against neo-blessed the range is 1.9x to 8.6x. In the single-cell scenario (a 10,000-cell screen where only a corner counter changes), per-cell diffing writes 17 bytes per frame where ink writes about 9.9KB - though ink defers its terminal writes, so bytes written is not directly comparable between the two (see the notes in bench/README.md).
 
 https://github.com/user-attachments/assets/6e84bb4b-a99e-46f2-a235-1ee4be62c0ae
 
@@ -21,7 +21,7 @@ npm i @trendr/core
 Requires esbuild (or similar) for JSX transformation.
 
 ```json
-{ "jsx": "automatic", "jsxImportSource": "trend" }
+{ "jsx": "automatic", "jsxImportSource": "@trendr/core" }
 ```
 
 ```jsx
@@ -46,7 +46,40 @@ function App() {
 mount(App)
 ```
 
-`mount(Component, { stream?, stdin?, title?, theme? })` enters alt screen and returns `{ unmount, repaint }`. Renders on demand when signals change, capped at 60fps.
+`mount(Component, options)` starts the render loop. Frames render on demand when signals change, capped at 60fps.
+
+Options:
+
+- `stream` - output stream, default `process.stdout`
+- `stdin` - input stream, default `process.stdin`
+- `title` - terminal window title
+- `theme` - theme object, see [Theming](#theming)
+- `onExit` - called after ctrl-c unmounts the app; when provided it replaces the default `process.exit(0)`
+- `altScreen` - enter the alternate screen buffer, default `true`
+- `inline` - inline mode, default `false` (see [Inline mode](#inline-mode))
+
+Returns `{ unmount, repaint, getBuffer }`. `unmount` tears down input handling and restores the terminal, `repaint` forces a full repaint, `getBuffer` returns the last rendered cell buffer.
+
+### Inline mode
+
+`mount(App, { inline: true })` renders below the shell prompt instead of taking over the screen. The UI is split into a committed transcript and a live region. Committed content goes inside `<Scrollback items={...} render={...} />`: items are append-only, each new item is rendered once, printed into native terminal scrollback, and never touched again, so it scrolls and copies like normal terminal output. Everything outside `Scrollback` is the live region, which re-renders in place below the transcript.
+
+```jsx
+import { mount, Scrollback } from '@trendr/core'
+
+function Chat() {
+  return (
+    <box style={{ flexDirection: 'column' }}>
+      <Scrollback items={history()} render={(msg) => <Message {...msg} />} />
+      <TextArea onSubmit={send} />
+    </box>
+  )
+}
+
+mount(Chat, { inline: true })
+```
+
+While an overlay (such as a Modal) is open, inline mode temporarily switches to the alternate screen and restores the transcript when it closes, so native scrollback is preserved. See [inline-chat](examples/inline-chat.jsx) for a full example.
 
 ### Theming
 
@@ -56,6 +89,8 @@ Pass a theme object to `mount` to configure global defaults:
 mount(App, {
   theme: {
     accent: 'green',        // focus/highlight color, default 'cyan'
+    accentText: 'black',    // text drawn on accent backgrounds (cursor rows, focused buttons, active tabs), default 'black'
+    muted: 'gray',          // de-emphasized text (placeholders, hints, inactive items, scrollbar rails), default 'gray'
     cursor: {
       blink: true,          // default false
       rate: 530,            // blink interval ms, default 530
@@ -72,7 +107,7 @@ Components read the theme with `useTheme()`:
 ```jsx
 import { useTheme } from '@trendr/core'
 
-const { accent } = useTheme()
+const { accent, accentText, muted } = useTheme()
 ```
 
 Individual components still accept explicit color props (e.g. `<Spinner color="magenta" />`) which override the theme.
@@ -302,6 +337,26 @@ stdout.write(altScreen + hideCursor)
 repaint()
 ```
 
+### useTitle
+
+Sets the terminal window title.
+
+```jsx
+useTitle('my app')
+```
+
+### useFrameStats
+
+Returns stats for the last rendered frame.
+
+```jsx
+const { changed, total, bytes, fps } = useFrameStats()
+// changed: cells that differed from the previous frame
+// total:   cells in the buffer (width * height)
+// bytes:   bytes written to the stream for the frame
+// fps:     rolling frames-per-second estimate
+```
+
 ### useTheme
 
 Returns the current theme object. See [Theming](#theming).
@@ -310,6 +365,20 @@ Returns the current theme object. See [Theming](#theming).
 const { accent } = useTheme()
 ```
 
+### useCursor
+
+Drives the text cursor for input-style components using the theme's cursor config (blink, style, colors). Pass an optional per-component cursor config and whether the component is focused.
+
+```jsx
+const { config, visible, cursorStyle, reset } = useCursor(cursorProp, focused)
+
+// cursorStyle(): style object for the cursor cell (null when hidden or unfocused)
+// visible():     blink state signal
+// reset():       restart the blink cycle (call on keystrokes)
+```
+
+The built-in inputs (TextInput, TextArea, PickList) use this internally and accept a `cursor` prop that is forwarded here.
+
 ### useFocus
 
 Used in [explorer](examples/explorer.jsx), [chat](examples/chat.jsx), [modal-form](examples/modal-form.jsx), [components](examples/components.jsx), [focus-demo](examples/focus-demo.jsx), [layout](examples/layout.jsx)
@@ -320,6 +389,9 @@ Register named items in tab order. The focus manager tracks which is active.
 import { useFocus } from '@trendr/core'
 
 const fm = useFocus({ initial: 'input' })
+// options: initial (name focused at mount),
+//          cycle: 'tab' (default) handles tab/shift-tab cycling;
+//          any other value disables it so you can drive focus yourself
 
 // declaration order = tab order
 fm.item('input')     // tab stop 0
@@ -356,6 +428,16 @@ fm.push('modal')  // save current focus, switch to 'modal'
 fm.pop()          // restore previous focus
 ```
 
+### useFocusTrap
+
+While active, stops tab/shift-tab from propagating past the calling component, so focus managers registered earlier in the tree do not also cycle. Handlers fire innermost-first: a `useFocus` inside the trapped subtree still receives the tab first, then the trap halts it. Useful for modals with their own focus manager.
+
+```jsx
+import { useFocusTrap } from '@trendr/core'
+
+useFocusTrap(modalOpen)
+```
+
 ### useToast
 
 Used in [chat](examples/chat.jsx), [modal-form](examples/modal-form.jsx), [components](examples/components.jsx)
@@ -394,6 +476,10 @@ fm.item('results')
 <List focused={fm.is('results')} />
 ```
 
+**Callback conventions.** `onChange(value)` fires when a committed value changes (Select, Radio, Tabs, Checkbox, TextInput). `onSubmit(item)` or `onSubmit(payload)` fires when an item or action is committed (Menu, PickList, MenuBar, TextArea, Button). `onSelect(index)` fires when the cursor moves in list-navigation components (List, Table, Menu) and pairs with `selected` for controlled use; `onCursorChange(item, index)` is the same notification with the item included.
+
+**Focused defaults.** Navigation components (List, Table, Menu, PickList, MillerNav) default to `focused: true` so a lone component responds immediately. Activation components (Select, Checkbox, Radio, Button, MenuBar) default to `focused: false` so space/enter can't trigger unfocused controls. Pass `focused` explicitly in multi-widget apps. List gates mouse handling on `focused` and keyboard handling on `interactive` - parents like PickList set `interactive: false` to own the keyboard while leaving mouse handling local.
+
 ### TextInput
 
 Used in [explorer](examples/explorer.jsx), [modal-form](examples/modal-form.jsx), [focus-demo](examples/focus-demo.jsx)
@@ -404,6 +490,9 @@ Single-line text input with horizontal scrolling.
 <TextInput
   focused={fm.is('search')}
   placeholder="search..."
+  initialValue="prefill"  // starting value
+  clearOnSubmit={false}   // reset to empty on Enter (default false)
+  cursor={{ blink: true }} // per-component cursor config (overrides theme)
   onChange={v => {}}   // every keystroke
   onSubmit={v => {}}   // Enter
   onCancel={() => {}}  // Escape (only stopPropagates if provided)
@@ -422,10 +511,17 @@ Multi-line text input. Auto-grows up to `maxHeight`, then scrolls.
 <TextArea
   focused={fm.is('input')}
   placeholder="write something..."
-  maxHeight={10}         // default 10
-  onChange={v => {}}     // every edit
-  onSubmit={v => {}}     // Alt+Enter
-  onCancel={() => {}}    // Escape
+  maxHeight={10}           // default 10
+  value={draft()}          // controlled value (optional)
+  submitOnEnter={false}    // default false: Alt+Enter submits, Enter inserts newline.
+                           // true flips it: Enter submits, Shift/Alt+Enter inserts newline
+  clearOnSubmit={true}     // reset to empty on submit (default true)
+  cursor={{ blink: true }} // per-component cursor config (overrides theme)
+  onChange={(v, prev) => {}} // every edit, receives new and previous value
+  onSubmit={v => {}}       // submit key (see submitOnEnter)
+  onCancel={() => {}}      // Escape
+  onKeyDown={event => {}}  // raw key hook before internal handling;
+                           // return true to consume the key (event.value is the current text)
 />
 ```
 
@@ -442,12 +538,15 @@ Scrollable list with keyboard navigation.
   items={data}
   selected={selectedIndex}  // controlled, or omit for internal state
   onSelect={setIndex}
+  onCursorChange={(item, index) => {}} // fires when the highlighted item changes
   focused={fm.is('list')}
   scrollbar={true}          // default false
   scrolloff={2}             // items of margin from edges when scrolling (default 2)
   interactive={true}        // handle keyboard input (default: same as focused)
   header={<text>title</text>}
   headerHeight={1}          // default 1, rows the header occupies
+  stickyHeader={false}      // keep the header pinned while the list scrolls (default false)
+  gap={0}                   // blank rows between items (default 0)
   renderItem={(item, { selected, index, focused }) => (
     <text style={{ bg: selected ? (focused ? accent : 'gray') : null }}>{item.name}</text>
   )}
@@ -483,12 +582,12 @@ Filterable list with live search. Text input at the top filters a scrollable lis
   items={data}
   focused={fm.is('search')}
   placeholder="search..."
-  onSelect={item => {}}       // Enter on highlighted item
+  onSubmit={item => {}}       // Enter on highlighted item
   onCancel={() => {}}          // Escape
   onChange={query => {}}       // every keystroke in the filter
-  clearOnSelect={false}        // reset filter on select (default false)
+  clearOnSubmit={false}        // reset filter on submit (default false)
   scrollbar={true}             // default false
-  scrolloff={2}                // items of margin from edges (default 2, inherited from List)
+  scrolloff={0}                // items of margin from edges (default 0)
   gap={1}                      // space between input and list (default 0)
   filter={(query, item) => {}} // custom filter (default: case-insensitive includes)
 />
@@ -513,6 +612,31 @@ Multi-row items with `renderItem`, `itemHeight`, and `itemGap`:
 
 Keys: type to filter, up/down or ctrl-n/ctrl-p to navigate, enter to select, escape to cancel. All bash-style editing keys work (ctrl-a/e/u/k/w).
 
+### Menu
+
+Used in [inline-chat](examples/inline-chat.jsx)
+
+Windowed single-select list with no text input of its own. Shows at most `maxVisible` rows and scrolls as the cursor moves. It pairs with an external input, such as a slash-command palette above a TextArea: render it near the input and, while focused, it intercepts up/down/enter before the input sees them.
+
+```jsx
+<Menu
+  items={commands}
+  selected={index}          // controlled, or omit for internal state
+  onSelect={setIndex}       // cursor moved
+  onSubmit={(item, index) => {}} // Enter
+  onCancel={() => {}}       // Escape (only stopPropagates if provided)
+  focused={showPalette}
+  maxVisible={5}            // default 5
+  scrolloff={2}             // default 2
+  itemHeight={1}            // rows per item (default 1)
+  gap={0}                   // blank rows between items (default 0)
+  arrow="›"                 // marker before the active item (default '›')
+  renderItem={(item, { active }) => <text>{item.name}</text>}
+/>
+```
+
+Keys: up/down or ctrl-p/ctrl-n, enter to submit, escape to cancel.
+
 ### Table
 
 Used in [components](examples/components.jsx), [custom-table](examples/custom-table.jsx)
@@ -532,6 +656,12 @@ Column-based data table. Uses List internally.
   focused={fm.is('table')}
   separator={true}              // horizontal rule below header
   separatorChars={{ left: '', fill: '─', right: '' }}  // customizable
+  columnGap={1}                 // spaces between columns (default 1)
+  stickyHeader={false}          // pin header row while scrolling (default false)
+  gap={0}                       // blank rows between data rows (default 0)
+  itemHeight={1}                // rows per data row, for multi-row rendering (default 1)
+  scrolloff={2}                 // rows of margin from edges when scrolling (default 2)
+  scrollbar={false}             // default false
 />
 ```
 
@@ -560,13 +690,42 @@ Used in [chat](examples/chat.jsx)
 <Tabs
   items={['general', 'settings', 'logs']}
   selected={activeTab}
-  onSelect={setTab}
+  onChange={setTab}
   focused={fm.is('tabs')}
 />
 ```
 
 Keys: left/right, tab/shift-tab. Wraps around.
 
+### MenuBar
+
+Used in [menubar](examples/menubar.jsx)
+
+Horizontal menu bar with dropdown submenus rendered as overlays. Menu and item hotkeys are underlined in their labels and activate directly.
+
+```jsx
+<MenuBar
+  items={[
+    {
+      label: 'File',
+      hotkey: 'f',
+      children: [
+        { label: 'New', hotkey: 'n' },
+        { label: 'Open', hotkey: 'o', value: 'open-file' },
+      ],
+    },
+    { label: 'Edit', hotkey: 'e', children: [/* ... */] },
+  ]}
+  focused={fm.is('menu')}
+  maxVisible={10}       // dropdown rows before scrolling (default 10)
+  onSubmit={({ menu, item, value }) => {}}
+  hotkeyColor="cyan"    // hotkey letter color (default: theme accent)
+  style={{}}            // pass-through style for the bar row
+/>
+```
+
+Keys: h/l or left/right to move between menus, enter/space to open, j/k or up/down inside a dropdown, enter/space to select, escape to close. Pressing a hotkey letter opens that menu or selects that item.
+
 ### Select
 
 Used in [modal-form](examples/modal-form.jsx), [components](examples/components.jsx), [focus-demo](examples/focus-demo.jsx)
@@ -577,9 +736,10 @@ Dropdown selector. Can render inline or as overlay.
 <Select
   items={['red', 'green', 'blue']}
   selected={color}
-  onSelect={setColor}
+  onChange={setColor}
   focused={fm.is('color')}
   overlay={false}          // true renders as floating overlay
+  maxVisible={10}          // rows shown before the dropdown scrolls (default 10)
   placeholder="pick one..."
   openIcon="▲"             // default ▲
   closedIcon="▼"           // default ▼
@@ -619,7 +779,7 @@ Used in [modal-form](examples/modal-form.jsx), [components](examples/components.
 <Radio
   options={['small', 'medium', 'large']}
   selected={size}
-  onSelect={setSize}
+  onChange={setSize}
   focused={fm.is('size')}
 />
 ```
@@ -738,7 +898,8 @@ Centered overlay with dimmed backdrop. Height is driven by content.
   open={isOpen}
   onClose={() => setOpen(false)}
   title="Confirm"
-  width={40}     // default 40
+  width={40}       // default 40
+  border="round"   // 'single' | 'double' | 'round' | 'bold' (default 'round')
 >
   <text>Are you sure?</text>
   <Button label="ok" onPress={() => setOpen(false)} focused={fm.is('ok')} />
@@ -747,6 +908,34 @@ Centered overlay with dimmed backdrop. Height is driven by content.
 
 Keys: escape to close.
 
+### registerOverlay
+
+The mechanism behind Modal, Select's dropdown mode, and toasts. Registers an element to be laid out and painted above the main tree for the current frame. Overlays are collected fresh every frame, so call it during render and gate it on your own open state.
+
+```jsx
+import { registerOverlay } from '@trendr/core'
+
+function Palette({ open }) {
+  if (open) {
+    registerOverlay(
+      <box style={{ position: 'absolute', top: 2, left: 4, width: 40, border: 'round' }}>
+        <text>palette</text>
+      </box>,
+      { backdrop: true },
+    )
+  }
+  return null
+}
+```
+
+Options:
+
+- `backdrop` - lay the overlay out over the full screen and dim everything behind it
+- `fullscreen` - full-screen layout without dimming
+- `capture` - while this overlay is registered, key and mouse events are dispatched only to handlers inside the overlay's subtree (the registering component, components rendered in its overlay tree, and overlays they open in turn). Everything else is skipped, except mount-level handlers like the built-in ctrl+c exit. Modal sets this, which is why content behind an open modal never reacts to input regardless of mount order. When several capturing overlays are open, the most recently registered one wins.
+
+With neither positioning flag, the overlay is anchored just below the calling component's layout rectangle, which is how Select positions its dropdown.
+
 ### ScrollableText
 
 Used in [explorer](examples/explorer.jsx), [reader](examples/reader.jsx), [highlight](examples/highlight.jsx)
@@ -760,6 +949,7 @@ Scrollable text viewer. ANSI escape sequences are parsed and rendered, so syntax
   scrollOffset={offset}    // controlled, or omit for internal state
   onScroll={setOffset}
   scrollbar={true}         // default false
+  width={60}               // wrap width override (default: measured layout width)
   wrap={false}             // default true, false truncates long lines
   thumbChar="█"            // default █
   trackChar="│"            // default │
@@ -768,6 +958,46 @@ Scrollable text viewer. ANSI escape sequences are parsed and rendered, so syntax
 
 Keys: same as List (j/k, g/G, ctrl-d/u, ctrl-f/b, pageup/pagedown).
 
+### Diff
+
+Used in [diff](examples/diff.jsx)
+
+Unified diff viewer with line numbers, word-level change highlighting, and optional syntax highlighting. Input is one of three forms: `before`/`after` strings, a unified `patch` string (`git diff` output), or structured `hunks`.
+
+```jsx
+<Diff
+  before={oldSource}       // or patch="diff --git ..." or hunks={[...]}
+  after={newSource}
+  language="js"            // passed to highlight (default 'text')
+  filename="src/app.js"    // optional header row with +/- stats
+  highlight={(code, lang) => ansiString} // optional syntax highlighter
+  wordDiff={true}          // word-level ranges within changed lines (default true)
+  context={3}              // context lines around changes, folds the rest (default Infinity)
+  lineNumbers={true}       // default true
+  focused={true}
+  scrollOffset={offset}    // controlled, or omit for internal state
+  onScroll={setOffset}
+  scrollbar={true}         // default true
+  colors={{ addBg: '#10301a' }} // palette overrides
+/>
+```
+
+The `highlight` function must be synchronous - the render loop cannot await. For async highlighters like shiki, pre-highlight into a cache before mounting and return cached results (see [diff](examples/diff.jsx)).
+
+Keys: j/k or up/down, ctrl-d/u half page, ctrl-f/b or pageup/pagedown full page, g/home for top, G/end for bottom.
+
+`computeDiff` is the pure core, exported for building custom diff UIs:
+
+```js
+import { computeDiff } from '@trendr/core'
+
+const { rows, stats } = computeDiff({ before, after, patch, hunks, wordDiff, context })
+// rows:  { type: 'context' | 'add' | 'del' | 'hunk' | 'meta' | 'fold',
+//          oldNo, newNo, text, intra }
+//        intra is an array of [start, end] changed ranges for word diff
+// stats: { additions, deletions }
+```
+
 ### ScrollBox
 
 Scrollable container for JSX children (vs ScrollableText which takes a string).
@@ -829,6 +1059,34 @@ Nesting works:
 </SplitPane>
 ```
 
+### MillerNav
+
+Used in [miller-nav](examples/miller-nav.jsx)
+
+Miller-column navigator in the style of Finder's column view. Columns show the path from root to the active item; children are fetched on demand with a synchronous `getChildren`.
+
+```jsx
+<MillerNav
+  rootItems={items}
+  getChildren={item => item.children ?? []}  // synchronous, returns an array
+  hasChildren={item => !!item.children}      // optional, marks items that can expand
+  onSelectionChange={({ item, breadcrumb, column }) => {}}
+  focused={fm.is('nav')}
+  interactive={true}        // handle keyboard input (default: same as focused)
+  scrollbar={false}         // default false
+  peekColumn={true}         // preview column for the active item's children (default true)
+  maxChars={{ focused: 20, unfocused: 10 }}  // column width caps, or a single number
+  divider={true}            // vertical divider between columns (default true)
+  dividerChar="▏"           // default '▏'
+  dividerColor="#333333"    // default '#333333'
+  renderItem={(item, { selected, focused, column }) => <text>{item.name}</text>}
+/>
+```
+
+Items are strings or objects with a `name` or `label` field.
+
+Keys: j/k or up/down to move within a column, l/right to descend, h/left to go back, ctrl-d/u half page.
+
 ## Animation
 
 Physics-based animation. Animated values are signals that trigger re-renders.
@@ -871,20 +1129,22 @@ x.set(newTarget)
 x.onTick((value) => { /* called each frame while animating */ })
 ```
 
-## Build
+## Development
+
+Inside this repo, examples import from the local alias `trend`, which a custom esbuild plugin in `esbuild.config.js` resolves to the local source; published consumers configure `jsxImportSource: '@trendr/core'` as shown in [Usage](#usage).
 
-Uses esbuild. JSX configured with `jsxImportSource: 'trend'`.
+Build the examples:
 
 ```
-node esbuild.config.js
+npm run build
 ```
 
-Examples run via npm scripts:
+Run one:
 
 ```
-npm run counter
-npm run chat
-npm run dashboard
-npm run explorer
-npm run highlight
+npm run ex counter
+npm run ex chat
+npm run ex highlight
 ```
+
+`npm run ex` without a name lists all available examples.

package/index.js

@@ -1,7 +1,7 @@
-export { mount } from './src/renderer.js'
+export { mount, registerOverlay } from './src/renderer.js'
 export { createSignal } from './src/signal.js'
 export { createEffect, createMemo, batch, untrack, onCleanup } from './src/signal.js'
-export { useState, useInput, useMouse, useResize, useInterval, useTimeout, useLayout, useStdout, useRepaint, useTitle, useTheme, useCursor, useFrameStats, useAsync } from './src/hooks.js'
+export { useInput, useMouse, useResize, useInterval, useTimeout, useLayout, useStdout, useRepaint, useTitle, useTheme, useCursor, useFrameStats, useAsync } from './src/hooks.js'
 export { Box, Text, Spacer } from './src/components.js'
 export { TextInput } from './src/text-input.js'
 export { TextArea } from './src/text-area.js'
@@ -16,15 +16,19 @@ export { Modal } from './src/modal.js'
 export { Radio } from './src/radio.js'
 export { Button } from './src/button.js'
 export { ScrollableText } from './src/scrollable-text.js'
+export { Diff } from './src/diff-view.js'
+export { computeDiff } from './src/diff-engine.js'
 export { PickList } from './src/pick-list.js'
 export { ScrollBox } from './src/scroll-box.js'
 export { SplitPane } from './src/split-pane.js'
 export { MillerNav } from './src/miller-nav.js'
 export { MenuBar } from './src/menubar.js'
 export { Menu } from './src/menu.js'
+export { Markdown } from './src/markdown.js'
 export { Task } from './src/task.js'
 export { Shimmer } from './src/shimmer.js'
 export { useFocus, useFocusTrap } from './src/focus.js'
+export { useSelection, extractSelectionText } from './src/selection.js'
 export { useHotkey } from './src/hotkey.js'
 export { useToast } from './src/toast.js'
 export { Fragment } from './src/element.js'

package/package.json

@@ -1,10 +1,35 @@
 {
   "name": "@trendr/core",
-  "version": "0.2.10",
+  "version": "0.4.0",
   "description": "direct-mode TUI renderer with JSX, signals, and per-cell diffing",
   "license": "MIT",
+  "author": "Jonathan Pyers",
   "type": "module",
   "main": "./index.js",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nvms/trendr.git"
+  },
+  "bugs": {
+    "url": "https://github.com/nvms/trendr/issues"
+  },
+  "homepage": "https://github.com/nvms/trendr#readme",
+  "keywords": [
+    "tui",
+    "terminal",
+    "renderer",
+    "jsx",
+    "signals",
+    "cli",
+    "ansi",
+    "flexbox",
+    "console",
+    "components"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
   "files": [
     "src",
     "index.js",
@@ -16,40 +41,10 @@
     "./jsx-dev-runtime": "./jsx-runtime.js"
   },
   "scripts": {
-    "test": "node test/test.js && node test/test-e2e.js && node test/test-mount.js && node test/test-render.js",
+    "test": "node test/test.js && node test/test-e2e.js && node test/test-mount.js && node test/test-render.js && node test/test-diff.js && node test/test-input.js && node test/test-components.js",
     "build": "node esbuild.config.js",
-    "counter": "node esbuild.config.js && node dist/counter.js",
-    "dashboard": "node esbuild.config.js && node dist/dashboard.js",
-    "chat": "node esbuild.config.js && node dist/chat.js",
-    "explorer": "node esbuild.config.js && node dist/explorer.js",
-    "layout": "node esbuild.config.js && node dist/layout.js",
-    "components": "node esbuild.config.js && node dist/components.js",
-    "reader": "node esbuild.config.js && node dist/reader.js",
-    "focus-demo": "node esbuild.config.js && node dist/focus-demo.js",
-    "modal-form": "node esbuild.config.js && node dist/modal-form.js",
-    "highlight": "node esbuild.config.js && node dist/highlight.js src",
-    "multi-row-list": "node esbuild.config.js && node dist/multi-row-list.js",
-    "plasma": "node esbuild.config.js && node dist/plasma.js",
-    "rain": "node esbuild.config.js && node dist/rain.js",
-    "animation": "node esbuild.config.js && node dist/animation.js",
-    "texture": "node esbuild.config.js && node dist/texture.js",
-    "absolute": "node esbuild.config.js && node dist/absolute.js",
-    "scroll-box": "node esbuild.config.js && node dist/scroll-box.js",
-    "split-pane": "node esbuild.config.js && node dist/split-pane.js",
-    "custom-table": "node esbuild.config.js && node dist/custom-table.js",
-    "async": "node esbuild.config.js && node dist/async.js",
-    "timeout": "node esbuild.config.js && node dist/timeout.js",
-    "task": "node esbuild.config.js && node dist/task.js",
-    "progress": "node esbuild.config.js && node dist/progress.js",
-    "shimmer": "node esbuild.config.js && node dist/shimmer.js",
-    "spinner": "node esbuild.config.js && node dist/spinner.js",
-    "miller-nav": "node esbuild.config.js && node dist/miller-nav.js",
-    "pick-list": "node esbuild.config.js && node dist/pick-list.js",
-    "table-demo": "node esbuild.config.js && node dist/table-demo.js",
-    "menubar": "node esbuild.config.js && node dist/menubar.js",
-    "inline-chat": "node esbuild.config.js && node dist/inline-chat.js",
-    "demo": "node esbuild.config.js && node demo/server.js",
-    "demo:build": "node esbuild.config.js"
+    "ex": "node scripts/run-example.js",
+    "demo": "node esbuild.config.js && node demo/server.js"
   },
   "devDependencies": {
     "esbuild": "^0.25.0",