file-preview

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e)
    const { Box, Text, Markdown, Code, Button } = els
    const Input = 'Input' in els ? els.Input : null // mobile draws no fields: no search there
    const { path, text } = await read($, doc)
    const { block: marked } = await read($, mark)
    await read($, view) // subscribes: a scroll's tick redraws the footer
    const cols = e.props.bodyColumns
    const width = Math.min(Math.max(20, cols - 2 * PAD), READ_MAX)
    const frame = { borderStyle: 'round', borderDimColor: true, paddingX: 1, flexDirection: 'column' } as const

    const table = (t: Table) => {
      const widths = fit(t, width)
      if (!widths) {
        // Too many columns for the pane: one card per row, `header: value` lines.
        return t.rows.map(row => (
          <Box {...frame}>
            {t.head.map((name, j) => (
              <Box flexDirection="row">
                <Box flexShrink={0}>
                  <Text bold color="cyan">{`${name}: `}</Text>
                </Box>
                <Text wrap="wrap">{row[j] ?? ''}</Text>
              </Box>
            ))}
          </Box>
        ))
      }
      const line = (cells: string[], isHead: boolean) => (
        <Box flexDirection="row" columnGap={GAP}>
          {cells.map((c, j) => (
            <Box width={widths[j]} flexShrink={0} justifyContent={JUSTIFY[t.align[j] ?? 'left']}>
              <Text wrap="wrap" bold={isHead} color={isHead ? 'cyan' : undefined}>{c}</Text>
            </Box>
          ))}
        </Box>
      )
      const rule = '─'.repeat(widths.reduce((a, b) => a + b, 0) + GAP * (widths.length - 1))
      return (
        <Box {...frame}>
          {line(t.head, true)}
          <Text dimColor>{rule}</Text>
          {t.rows.flatMap((r, i) => (i === 0 ? [line(r, false)] : [<Text dimColor>{rule.replaceAll('─', '┈')}</Text>, line(r, false)]))}
        </Box>
      )
    }

    const mermaid = async (code: string) => {
      const drawn = await renderMermaid($, code, width - 4)
      if ('error' in drawn) {
        return (
          <Box flexDirection="column">
            <Markdown text={`\`\`\`mermaid\n${code}\n\`\`\``} />
            <Text dimColor wrap="wrap">{`mermaid-ascii could not draw this (${drawn.error}); showing the source.`}</Text>
          </Box>
        )
      }
      const art = drawn.art
      const type = code.trim().split(/\s/)[0] ?? 'diagram'
      return (
        <Box {...frame} borderColor="magenta">
          <Text color="magenta" bold>{`◆ ${type}`}</Text>
          {art.split('\n').map(l => (
            <Text wrap="truncate-end">{l || ' '}</Text>
          ))}
        </Box>
      )
    }

    // Claude Code's own highlighter: every language it knows, nothing to install.
    // A highlighter from the `highlighters` setting for this language, else Claude
    // Code's own: every language it knows, nothing to install.
    const code = async (lang: string, source: string) => {
      const src = clean(source)
      const cmd = highlighters.get(lang.toLowerCase())
      const spans = cmd && src.length <= MAX ? await external($, cmd, src) : null
      const rows = spans
        ? lines(spans).map(segs => (
            <Text wrap="wrap">
              {segs.length ? segs.map(s => (s.color || s.italic ? <Text color={s.color} italic={s.italic}>{s.text}</Text> : s.text)) : ' '}
            </Text>
          ))
        : null
      return (
        <Box {...frame}>
          {lang ? <Text dimColor>{lang}</Text> : null}
          {rows && JSON.stringify(rows).length <= CODE_BUDGET
            ? rows
            : chunk(src, MAX, MAX * 3).map(p => <Code source={p.source || ' '} language={lang || undefined} />)}
        </Box>
      )
    }

    // GitHub style: h1/h2 bold with a quiet rule beneath, h3 bold alone.
    const heading = (level: 1 | 2 | 3, title: string) =>
      level === 3 ? (
        <Text bold>{title}</Text>
      ) : (
        <Box flexDirection="column" marginTop={level === 2 ? 1 : 0}>
          <Text bold color={level === 1 ? 'whiteBright' : undefined}>{title}</Text>
          <Text dimColor>{'─'.repeat(Math.max(1, width))}</Text>
        </Box>
      )

    const callout = (type: Callout, body: string) => {
      const { color, icon, label } = CALLOUTS[type]
      return (
        <Box borderStyle="round" borderColor={color} paddingX={1} flexDirection="column">
          <Text bold color={color}>{`${icon} ${label}`}</Text>
          <Markdown text={body.slice(0, MAX) || ' '} />
        </Box>
      )
    }

    // A markdown file: the docs page.
    const page = async () => {
      const md = text.length > MD_MAX ? `${text.slice(0, MD_MAX)}\n\n_…truncated_` : text
      const all = blocks(md || '_Nothing to preview._')
      const parts = await Promise.all(
        all.map(b =>
          b.kind === 'md'
            ? <Markdown text={b.text.slice(0, MAX)} />
            : b.kind === 'heading'
              ? heading(b.level, b.text)
              : b.kind === 'callout'
                ? callout(b.type, b.text)
                : b.kind === 'table'
                  ? table(b.table)
                  : b.kind === 'code'
                    ? code(b.lang, b.code)
                    : mermaid(b.code),
        ),
      )
      const words = text.split(/\s+/).filter(Boolean).length
      const count = (kind: Block['kind']) => all.filter(b => b.kind === kind).length
      const stats = [
        `${text.split('\n').length} lines`,
        `${words} words`,
        `~${Math.max(1, Math.round(words / 220))} min read`,
        count('table') && `${count('table')} tables`,
        count('mermaid') && `${count('mermaid')} diagrams`,
      ]
      const entries = all.flatMap((b, i) => blockLines(b).map(line => ({ block: i, text: line })))
      const body = parts.map((p, i) => (
        <Box key={`b:${i}`} flexDirection="column" backgroundColor={marked === i ? MARK_BG : undefined}>
          {p}
        </Box>
      ))
      return { stats, body, entries }
    }

    // A JSON or YAML file: the whole source, highlighted and numbered, cut where the
    // drawing would pass the engine's tree bounds.
    const dataFile = async (kind: 'json' | 'yaml', lang: string) => {
      const src = clean(text).replace(/\n$/, '')
      const total = src.split('\n').length
      const parts = chunk(src, MAX, DATA_BUDGET)
      const last = parts.at(-1)
      const shown = last ? last.startLine - 1 + last.source.split('\n').length : 0
      const body = [