import { mount, createSignal, useInput } from '@trendr/core'

function App() {
  const [count, setCount] = createSignal(0)

  useInput(({ key }) => {
    if (key === 'up') setCount(c => c + 1)
    if (key === 'down') setCount(c => c - 1)
  })

  return (
    <box style={{ flexDirection: 'column', padding: 1 }}>
      <text style={{ color: 'cyan', bold: true }}>Count: {count()}</text>
      <text style={{ color: 'gray' }}>up/down to change</text>
    </box>
  )
}

mount(App)

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

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
      style: 'block',       // default 'block'
      bg: 'cyan',           // cursor background color
      color: 'black',       // cursor text color
    },
  },
})

import { useTheme } from '@trendr/core'

const { accent, accentText, muted } = useTheme()

import { createSignal, createEffect, createMemo, batch, untrack, onCleanup } from '@trendr/core'

const [value, setValue] = createSignal(0)
value()         // read (tracks dependency)
setValue(1)     // write
setValue(v => v + 1) // updater

createEffect(() => {
  console.log(value()) // re-runs when value changes
  return () => {}      // optional cleanup
})

const doubled = createMemo(() => value() * 2) // cached derived value

batch(() => {        // coalesce multiple updates into one render
  setValue(1)
  setValue(2)
})

untrack(() => value()) // read without tracking
onCleanup(() => {})    // runs when component unmounts or effect re-runs

<box style={{
  flexDirection: 'column',  // 'column' (default) | 'row'
  flexGrow: 1,              // fill remaining space
  gap: 1,                   // space between children
  justifyContent: 'flex-start', // 'flex-start' | 'center' | 'flex-end'
  alignItems: 'stretch',    // 'stretch' | 'flex-start' | 'center' | 'flex-end'
  width: 20,                // fixed or '50%'
  height: 10,               // fixed or '25%'
  minWidth: 5, maxWidth: 30,
  minHeight: 2, maxHeight: 15,
  padding: 1,               // all sides
  paddingX: 1, paddingY: 1, // axis
  paddingTop: 1, paddingBottom: 1, paddingLeft: 1, paddingRight: 1,
  margin: 1,                // same variants as padding
  border: 'round',          // 'single' | 'double' | 'round' | 'bold'
  borderColor: 'cyan',
  borderEdges: { bottom: true, left: true }, // render only specific sides
  bg: 'blue',               // background color
  texture: 'dots',          // background texture (see below)
  textureColor: '#333',     // color for texture characters
  position: 'absolute',     // remove from flow, position with top/left/right/bottom
  top: 0, left: 0, right: 0, bottom: 0,
  overflow: 'scroll',       // scrollable container (see ScrollBox)
  scrollOffset: 0,          // scroll position (rows from top)
}}>

<text style={{
  color: 'cyan',            // named, hex (#ff0000), or 256-color index
  bg: 'black',
  bold: true, dim: true, italic: true,
  underline: true, inverse: true, strikethrough: true,
  overflow: 'wrap',         // 'wrap' (default) | 'truncate' | 'nowrap'
}}>

<box style={{ bg: '#1a1a2e', texture: 'dots', textureColor: '#2a2a4e' }}>

<box style={{ border: 'round', height: 5, flexDirection: 'column' }}>
  <text>content here</text>
  <box style={{ position: 'absolute', top: 0, right: 1 }}>
    <text style={{ color: 'green', bold: true }}>ONLINE</text>
  </box>
</box>

import { Box, Text, Spacer } from '@trendr/core'
<Box style={{ flexDirection: 'row' }}><Text>hello</Text><Spacer /><Text>right</Text></Box>

useInput((event) => {
  // event.key: 'a', 'return', 'escape', 'up', 'down', 'left', 'right',
  //            'tab', 'shift-tab', 'space', 'backspace', 'delete',
  //            'home', 'end', 'pageup', 'pagedown', 'f1'-'f12'
  // event.ctrl: boolean
  // event.meta: boolean (alt/option key)
  // event.raw: raw character string
  // event.stopPropagation(): prevent other handlers from receiving this event
})

import { useHotkey } from '@trendr/core'

useHotkey('ctrl+s', () => save())
useHotkey('alt+enter', () => submit(), { when: () => isFocused })

const layout = useLayout()
// layout.x, layout.y, layout.width, layout.height, layout.contentHeight

useResize(({ width, height }) => { /* terminal resized */ })

useInterval(() => tick(), 1000) // auto-cleaned on unmount

useTimeout(() => hide(), 3000)

import { useAsync } from '@trendr/core'

const { status, data, error, run } = useAsync(fetchUsers)

// status(): 'idle' | 'loading' | 'success' | 'error'
// data():   resolved value (null until success)
// error():  rejected error (null until error)
// run():    trigger the async function. forwards args: run(userId)

const { status, data } = useAsync(fetchUsers, { immediate: true })

useMouse((event) => {
  // event.action: 'press' | 'release' | 'drag' | 'move' | 'scroll'
  // event.button: 'left' | 'middle' | 'right' (press/release/drag only)
  // event.direction: 'up' | 'down' | 'left' | 'right' (scroll only)
  // event.x, event.y: 0-based terminal coordinates
  // event.stopPropagation(): prevent other handlers from receiving this event
})

function Hoverable({ children, action, onAction }) {
  const hitTest = useHitTest()
  const [hovered, setHovered] = createSignal(false)

  useMouse((event) => {
    if (event.action === 'move') setHovered(hitTest(event.x, event.y))
    if (event.action === 'press' && event.button === 'left' && hovered() && hitTest(event.x, event.y)) {
      onAction()
      event.stopPropagation()
    }
  })

  return (
    <box>
      {children}
      {hovered() && (
        <box style={{ position: 'absolute', top: 0, right: 1 }}>
          <text style={{ inverse: true }}>{` ${action} `}</text>
        </box>
      )}
    </box>
  )
}

const stream = useStdout() // the output stream (process.stdout or custom)

import { useRepaint, useStdout, exitAltScreen, showCursor, altScreen, hideCursor } from '@trendr/core'

const repaint = useRepaint()
const stdout = useStdout()

stdout.write(exitAltScreen + showCursor)
execSync(`${process.env.EDITOR} ${file}`, { stdio: 'inherit' })
stdout.write(altScreen + hideCursor)
repaint()

useTitle('my app')

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

const { accent } = useTheme()

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)

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
fm.item('list')      // tab stop 1
fm.item('sidebar')   // tab stop 2

<TextInput focused={fm.is('input')} />
<List focused={fm.is('list')} />
<Select focused={fm.is('sidebar')} />

fm.focus('list')  // jump programmatically
fm.current()      // the active name

fm.group('settings', { items: ['theme', 'autosave', 'format'] })
// fm.is('theme'), fm.is('autosave'), etc. work within the group

fm.push('modal')  // save current focus, switch to 'modal'
fm.pop()          // restore previous focus

import { useFocusTrap } from '@trendr/core'

useFocusTrap(modalOpen)

import { useToast } from '@trendr/core'

const toast = useToast({
  duration: 2000,           // ms, default 2000
  position: 'bottom-right', // see positions below
  margin: 1,                // padding from screen edge, default 1
  render: (message) => (    // optional custom render
    <box style={{ bg: '#1E1E1E', paddingX: 1 }}>
      <text style={{ color: '#9A9EA3' }}>{message}</text>
    </box>
  ),
})

toast('saved')

// positions: 'top-left', 'top-center', 'top-right',
//            'center-left', 'center', 'center-right',
//            'bottom-left', 'bottom-center', 'bottom-right'

const fm = useFocus({ initial: 'search' })
fm.item('search')
fm.item('results')

<TextInput focused={fm.is('search')} />
<List focused={fm.is('results')} />

<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)
/>

<TextArea
  focused={fm.is('input')}
  placeholder="write something..."
  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
  newlineOnBackslashEnter={false} // replace a backslash immediately before Enter with a 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)
/>

<List
  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>
  )}
/>

<List
  items={data}
  itemHeight={3}
  renderItem={(item, { selected, focused }) => (
    <box style={{ flexDirection: 'column', bg: selected ? accent : null }}>
      <text style={{ bold: true }}>{item.name}</text>
      <text style={{ color: 'gray' }}>{item.description}</text>
      <text style={{ color: 'green' }}>{item.status}</text>
    </box>
  )}
/>

<PickList
  items={data}
  focused={fm.is('search')}
  placeholder="search..."
  onSubmit={item => {}}       // Enter on highlighted item
  onCancel={() => {}}          // Escape
  onChange={query => {}}       // every keystroke in the filter
  clearOnSubmit={false}        // reset filter on submit (default false)
  scrollbar={true}             // default false
  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)
/>

<PickList
  items={packages}
  itemHeight={3}
  itemGap={1}
  renderItem={(pkg, { selected, focused }) => (
    <box style={{ flexDirection: 'column', bg: selected ? accent : null, paddingX: 1 }}>
      <text style={{ bold: true }}>{pkg.name}</text>
      <text style={{ color: 'gray' }}>{pkg.desc}</text>
      <text style={{ color: 'yellow' }}>{pkg.downloads}</text>
    </box>
  )}
/>

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

<Table
  columns={[
    { header: 'Name', key: 'name', flexGrow: 1 },
    { header: 'Size', key: 'size', width: 10, color: 'gray', paddingX: 1 },
    { header: 'Type', render: (row, sel) => row.type.toUpperCase(), width: 8 },
  ]}
  data={rows}
  selected={selectedRow}
  onSelect={setRow}
  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
/>

<Table
  columns={columns}
  data={rows}
  selected={idx()}
  onSelect={setIdx}
  renderItem={(row, { selected, focused }) => (
    <box style={{ flexDirection: 'row', bg: selected ? accent : null, paddingX: 1 }}>
      <text style={{ color: selected ? 'black' : null, flexGrow: 1 }}>{row.name}</text>
      <text style={{ color: selected ? 'black' : row.stale ? 'yellow' : 'gray' }}>{row.age}</text>
    </box>
  )}
/>

<Tabs
  items={['general', 'settings', 'logs']}
  selected={activeTab}
  onChange={setTab}
  focused={fm.is('tabs')}
/>

<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
/>

<Select
  items={['red', 'green', 'blue']}
  selected={color}
  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 ▼
  renderItem={(item, { selected, index }) => <text>{item}</text>}
  style={{
    border: 'single', borderColor: 'green', bg: 'black',
    cursorBg: 'green', cursorTextColor: 'black',
    color: null, focusedColor: 'green',
  }}
/>

<Checkbox
  checked={isChecked}
  label="Enable feature"
  onChange={setChecked}  // (newState: boolean) => void
  focused={fm.is('feature')}
  checkedIcon="[✓]"     // default '[x]'
  uncheckedIcon="[ ]"   // default '[ ]'
/>

<Radio
  options={['small', 'medium', 'large']}
  selected={size}
  onChange={setSize}
  focused={fm.is('size')}
/>

<ProgressBar
  value={0.65}              // 0 to 1
  variant="thin"            // 'thin' (default), 'block', 'ascii', 'braille'
  color="red"               // overrides theme accent
  label="Installing"        // optional label before bar
  count="8/12"              // optional count after percentage
  percentage={true}         // show percentage (default true)
  width={30}                // override bar width (default: fills available space)
/>

<Spinner
  label="loading..."
  variant="dots"     // 'dots' (default), 'line', 'circle', 'bounce', 'arrow', 'square', 'star'
  color="magenta"    // overrides theme accent
  interval={80}      // ms, default 80
  frames={['a','b']} // custom frames (overrides variant)
/>

<Task
  run={() => fetchData()}   // async function
  label="Fetching data..."  // shown while loading
  successLabel="Done"       // optional, shown on success (defaults to label)
  errorLabel="Failed"       // optional, shown on error (defaults to error message)
  immediate={true}          // fire on mount (default true)
  icon={{ success: '+' }}   // override icons per status
  color="cyan"              // override color (defaults vary by status)
/>

<Task run={() => install()} label="Installing..." successLabel="Installed" />
<Task run={() => build()} label="Building..." successLabel="Built" />
<Task run={() => test()} label="Testing..." successLabel="Tests passed" />

<Shimmer
  color="gray"         // base text color (default 'gray')
  highlight="cyan"     // shimmer color (default: theme accent)
  size={3}             // width of bright center in chars (default 3)
  gradient={3}         // gradient tail length each side (default 3, 0 for hard edge)
  duration={1000}      // ms for one pass across the text (default 1000)
  delay={500}          // ms pause between passes (default 500)
  reverse={false}      // slide right to left (default false)
>
  Loading resources...
</Shimmer>

<Button
  label="save"
  onPress={() => save()}
  focused={fm.is('save')}
  variant="dim"   // optional, grays out when unfocused
/>

<Modal
  open={isOpen}
  onClose={() => setOpen(false)}
  title="Confirm"
  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')} />
</Modal>

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
}

<ScrollableText
  content={longText}
  focused={fm.is('preview')}
  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 │
/>

<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
/>

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
  focused={fm.is('list')}
  scrollbar={true}          // default false
  scrollOffset={offset}     // controlled, or omit for internal state
  onScroll={setOffset}
  thumbChar="█"             // default █
  trackChar="│"             // default │
  style={{ flexGrow: 1 }}   // pass-through style for the scroll container
>
  {items.map(item => (
    <text key={item.id}>{item.name}</text>
  ))}
</ScrollBox>

import { SplitPane } from '@trendr/core'

<SplitPane direction="row" sizes={[20, '2fr', '1fr']} border="round" borderColor="gray">
  <box style={{ paddingX: 1 }}>
    <text>sidebar</text>
  </box>
  <box style={{ paddingX: 1 }}>
    <text>main content</text>
  </box>
  <box style={{ paddingX: 1 }}>
    <text>detail</text>
  </box>
</SplitPane>

<SplitPane direction="column" sizes={['1fr', 8]} border="round">
  <SplitPane direction="row" sizes={[20, '1fr']} border="round">
    <box>nav</box>
    <box>main</box>
  </SplitPane>
  <box>status</box>
</SplitPane>

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

import { useAnimated, spring, ease, decay } from '@trendr/core'

const x = useAnimated(0, spring())    // spring physics
x.set(100)                            // animate to 100
x()                                   // read current value (tracks as signal)
x.snap(50)                            // jump instantly, no animation

spring({ frequency: 2, damping: 0.3 })   // underdamped spring (bouncy)
spring({ damping: 1 })                    // critically damped (no bounce)
ease(300)                                 // 300ms ease-out-cubic
ease(500, linear)                         // 500ms linear
decay({ deceleration: 0.998 })            // momentum-based decay

x.setInterpolator(ease(200))
x.set(newTarget)

x.onTick((value) => { /* called each frame while animating */ })