html-preview

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Button, Markdown, Text } = $.ui.resolve(e)
    const shown = await read($, page)
    if (!shown) return <Text dimColor>Nothing to preview yet. Run /preview file.html</Text>

    const scrollBy = (delta: number) => async () => {
      await update($, page, p => (p ? { ...p, scrollY: delta === 0 ? 0 : Math.max(0, p.scrollY + delta), status: 'rendering' as const } : p))
      renderLater($, options)
    }
    const reload = async () => {
      await update($, page, p => (p ? { ...p, status: 'rendering' as const } : p))
      renderLater($, options)
    }
    const name = shown.target.split('/').pop() || shown.target
    const state = shown.status === 'rendering' ? 'rendering…' : shown.status === 'error' ? shown.error : `scroll ${shown.scrollY}px`
    const controls = (
      <Box flexDirection="row">
        <Text bold wrap="truncate">{name} </Text>
        <Text dimColor wrap="truncate">{state} </Text>
        <Button label="↑" hotkey="k" onPress={scrollBy(-STEP)} />
        <Button label="↓" hotkey="j" onPress={scrollBy(STEP)} />
        <Button label="top" hotkey="t" onPress={scrollBy(0)} />
        <Button label="reload" hotkey="r" onPress={reload} />
        <Button label="close" hotkey="x" role="dismiss" onPress={() => $.ui.close({ id: PANE })} />
      </Box>
    )

    if (e.surface === 'terminal' && shown.png) {
      const { Image } = $.ui.resolve(e)
      const room = Math.max(4, Math.min(255, e.props.scroll.bodyRows - 2))
      let columns = Math.max(1, Math.min(255, e.props.bodyColumns))
      // Render the page at the pane's shape, so the picture fills it.
      const fitted = fitHeight(columns, room)
      if (Math.abs(fitted - (shown.height ?? VIEW.height)) >= FIT_SLACK) {
        $.clock.after(0, async () => {
          await update($, page, p => (p ? { ...p, height: fitted, status: 'rendering' as const } : p))
          void render($, options)
        })
      }
      const ratio = ((shown.rendered ?? VIEW.height) / VIEW.width) * CELL_RATIO
      let rows = Math.max(1, Math.round(columns * ratio))
      if (rows > room) {
        rows = room
        columns = Math.max(1, Math.min(columns, Math.round(rows / ratio)))
      }

      return (
        <Box flexDirection="column">
          {controls}
          <Image
            key="view"
            source={{ file: shown.png, format: 'png', generation: shown.generation }}
            columns={columns}
            rows={rows}
            alt={`${name} (this terminal cannot draw images)`}
          />
        </Box>
      )
    }

    return (
      <Box flexDirection="column">
        {controls}
        {shown.text ? <Markdown text={shown.text} /> : <Text dimColor>rendering…</Text>}
      </Box>
    )
  })