ui-sampler

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    noteRender($, 'AbovePrompt', e)
    const inner = await next(e)
    if (e.props.hasSurvey || !(await isOn($, 'AbovePrompt'))) return inner
    const ui = $.ui.resolve(e)
    const { Box, Text, Button, Input } = ui
    // One row: the label, the two buttons, the input, then the echoes cut to what is left of
    // the width; it wraps only when the band is too narrow for the controls
    const ours = Box({
      paddingX: SPACE.page,
      flexDirection: 'row',
      columnGap: SPACE.column,
      rowGap: SPACE.control,
      alignItems: 'center',
      flexWrap: 'wrap',
      width: '100%',
      children: [
        Text({ bold: true, children: ['[AbovePrompt]'] }),
        inline(ui, 'band-buttons', [
          Button({
            key: 'band-press',
            label: '帯のボタン',
            ...BUTTON.nav,
            onPress: press => echoTo($, 'AbovePrompt:press', `押された（e.surface: ${press.surface}）`),
          }),
          Button({
            key: 'band-dialog',
            label: '[DialogPane] を開く',
            ...BUTTON.nav,
            onPress: press => openDialogFromBand($, press),
          }),
        ]),
        Input({
          key: 'band-input',
          label: '帯の入力',
          placeholder: 'ここに入力して Enter',
          submitLabel: '写す',
          onSubmit: value => echoTo($, 'AbovePrompt:submit', value),
        }),
        Box({
          flexGrow: 1,
          flexShrink: 1,
          children: [
            Text({
              dimColor: true,
              wrap: 'truncate-end',
              children: [`ボタン: ${await echoOf($, 'AbovePrompt:press')} / 入力: ${await echoOf($, 'AbovePrompt:submit')}`],
            }),
          ],
        }),
      ],
    })
    if (!inner) return ours
    return Box({
      flexDirection: 'column',
      children: [ours, dim(ui, 'band-others', '[AbovePrompt] この下はほかの mod の帯（next(e) が返したもの）'), inner],
    })
  })

export const inline = (ui, key, children, marginTop = 0, gap = SPACE.inline) =>
  ui.Box({
    key,
    marginTop,
    flexDirection: 'row',
    columnGap: gap,
    rowGap: SPACE.control,
    alignItems: 'center',
    flexWrap: 'wrap',
    children,
  })

export const dim = (ui, key, text) => ui.Text({ key, dimColor: true, wrap: 'wrap', children: [text] })