techno

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (!s.isOpen && !(s.used && !s.barClosed && (s.ps || s.down))) return next(e)
    const ui = $.ui.resolve(e)
    const ps = s.ps
    const v = ps?.view
    const t = v ? parseCode(v.code) : null
    const now = await $.clock.now()
    const heard = t ? activeLayers(t) : {}
    const all = v ? gridFor(v.code) : {}
    // the rows: every layer that plays, plus the next one as a dashed row
    const rows = t ? GRID_LAYERS.filter((n) => heard[n] || t.layers[n] === false).map((n) => [n, all[n] ?? '.'.repeat(16), LAYER_COLORS[n], !!heard[n], t.layers[n] === false]) : []
    if (v?.next?.layer && GRID_LAYERS.includes(v.next.layer) && !rows.some((r) => r[0] === v.next.layer)) rows.push([v.next.layer, all[v.next.layer] ?? '.'.repeat(16), LAYER_COLORS[v.next.layer], false, false, true])
    const looping = !!(ps?.playing && ps.barStartedAt)
    const sinceBar = looping ? Math.max(0, now - ps.barStartedAt) : 0
    const step = looping ? (v.bar * 16 + Math.min(15, Math.floor(sinceBar / ps.stepMs))) % 128 : 0
    const nextIn = ps?.nextInMs !== null && ps?.nextInMs !== undefined ? Math.max(0, ps.nextInMs - (now - ps.now)) : null
    // where the set is, for the section words: the parts of the plan and
    // how far in the set it plays (in loops)
    let where = null
    if (v) {
      const barMs = ps.barMs || 1800
      const plan = v.plan ?? PLAN.map((_, k) => k)
      const loops = plan.map((k) => PLAN[k].loops)
      const totalLoops = loops.reduce((n, x) => n + x, 0)
      const at = v.part === null ? plan.length : v.at ?? Math.max(0, plan.indexOf(v.part))
      const before = loops.slice(0, at).reduce((n, x) => n + x, 0)
      const inPart = v.part === null ? 0 : Math.max(0, loops[at] - v.loopsLeft)
      const pos = Math.min(totalLoops, before + inPart + (v.part === null ? 0 : (v.bar + Math.min(1, sinceBar / barMs)) / 8))
      where = { parts: plan.map((k) => ({ name: PLAN[k].name, section: PLAN[k].section, loops: PLAN[k].loops })), pos, loopMs: 8 * barMs, elapsed: pos * 8 * barMs, total: totalLoops * 8 * barMs }
    }
    // the edit card opens on the bass (or the first sound that plays)
    const editTab = s.editTab ?? (heard.bass ? 'bass' : ['kick', 'hats', 'acid'].find((n) => heard[n]) ?? 'kick')
    const vm = {
      surface: e.surface,
      screen: s.screen,
      down: s.down,
      ps,
      view: v,
      playing: !!ps?.playing,
      auto: !!ps?.auto,
      fav: !!ps?.fav,
      volume: ps?.volume ?? 4,
      nextIn,
      where,
      editOpen: s.editOpen,
      editTab,
      heard,
      info: t && editTab && !['song', 'master', 'add'].includes(editTab) ? soundInfo(t, editTab) : null,
      master: t?.master ?? [0, 0, 0],
      plan: t ? planOf(t).map((k, i) => ({ k: i, name: PLAN[k].name, now: v.part !== null && i === (v.at ?? -1) })) : [],
      planAdds: t ? planAdds(t) : [],
      planEdited: !!t?.plan,
      favorites: ps?.favorites ?? [],
      recent: ps?.recent ?? [],
      playlist: ps?.playlist ?? null,
      canUndo: !!ps?.canUndo,
      said: ps?.said ?? '',
      you: s.you,
      status: s.status,
      crate: { repo: s.repo, starters: STARTERS },
      gridEl: rows.length ? ui.Client({ key: 'grid', module: './grid.client.js', props: { rows, step, stepMs: ps?.stepMs || 115, playing: looping, stamp: ps?.barStartedAt ?? 0 } }) : null,
    }
    const go = (body) => () => cmd($, body)
    const act = {
      play: go({ op: 'play' }),
      stop: go({ op: 'pause' }),
      auto: go({ op: 'auto', on: !ps?.auto }),
      next: go({ op: 'next' }),
      skip: go({ op: 'skip' }),
      prev: go({ op: 'prev' }),
      fav: go({ op: 'fav' }),
      volume: (level) => cmd($, { op: 'volume', level }),
      toggleFav: (code) => cmd($, { op: 'fav', code }),
      mood: (name) => cmd($, { op: 'jam', mood: name }),
      dice: go({ op: 'dice' }),
      undo: go({ op: 'undo' }),
      bpm: (d) => cmd($, { op: 'jam', bpm: Math.max(BPM_MIN, Math.min(BPM_MAX, (v?.bpm ?? 128) + d)) }),
      pick: (code) => { s.screen = 'deck'; return cmd($, { op: 'pick', code, playlist: null }) },
      playFavorite: (code) => { s.screen = 'deck'; return cmd($, { op: 'pick', code, playlist: 'favorites' }) },
      playFavorites: () => { s.screen = 'deck'; return cmd($, { op: 'playlist', name: 'favorites' }) },
      phrase: (text) => (String(text).trim() ? act.pick(String(text).trim()) : undefined),
      share: (code) => share($, code ?? v.code),
      copy: (code) => copyLine($, code ?? v.code),
      screen: (id) => { s.screen = id; $.ui.invalidate('ui.render') },
      edit: () => { s.editOpen = !s.editOpen; $.ui.invalidate('ui.render') },
      editTab: (id) => { s.editTab = id; $.ui.invalidate('ui.render') },
      tweak: (e) => cmd($, { op: 'edit', ...e }),
      layer: (name) => cmd($, { op: 'layer', name }),
      open: () => { s.isOpen = true; s.screen = 'deck'; $.ui.invalidate('ui.render') },
      close: () => { s.isOpen = false; $.ui.invalidate('ui.render') },
      closeBar: () => { s.barClosed = true; $.store.set('bar', false); $.ui.invalidate('ui.render') },
      retry: () => ensurePlayer($).then(() => $.ui.invalidate('ui.render')),
    }
    const theirs = await next(e)
    return ui.Box({ flexDirection: 'column', children: [s.isOpen ? appView(ui, vm, act) : miniView(ui, vm, act), theirs] })
  })

export function miniView(ui, vm, act) {
  if (!vm.view) return spread(ui, [ui.Text({ bold: true, children: ['♪'] }), dim(ui, vm.down || 'starting the player…')], [link(ui, 'mini-close', '×', () => act.closeBar())], 'mini')
  const v = vm.view
  return spread(ui, [
    ui.Text({ bold: true, children: ['♪'] }),
    ...transport(ui, vm, act, 'mini-'),
  ], [
    toggle(ui, 'mini-auto', vm.auto ? '● auto' : '○ auto', vm.auto, () => act.auto()),
    link(ui, 'mini-open', 'open', () => act.open()),
    link(ui, 'mini-close', '×', () => act.closeBar()),
  ], 'mini')
}

const spread = (ui, left, right, key) => ui.Box({ key, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', columnGap: 2, children: [row(ui, left), row(ui, right)] })

const dim = (ui, text, extra = {}) => ui.Text({ dimColor: true, children: [text], ...extra })

const row = (ui, children, extra = {}) => ui.Box({ flexDirection: 'row', flexWrap: 'wrap', columnGap: 1, alignItems: 'center', children: children.filter(Boolean), ...extra })

function transport(ui, vm, act, prefix) {
  const v = vm.view
  return [
    vm.recent.length ? ui.Button({ key: prefix + 'prev', label: '⏮', onPress: () => act.prev() }) : null,
    toggle(ui, prefix + 'play', vm.playing ? '■ stop' : '▶ play', !vm.playing, () => (vm.playing ? act.stop() : act.play()), prefix ? {} : { hotkey: 'p' }),
    ui.Button({ key: prefix + 'skip', label: '⏭', onPress: () => act.skip() }),
    ui.Text({ bold: true, wrap: 'truncate-end', children: [v.phrase] }),
    ui.Button({ key: prefix + 'fav', label: vm.fav ? '♥' : '♡', plain: true, onPress: () => act.fav() }),
    // the word, not an arrow (Ruslan, 2026-10-05, option B of arrow / word / under the grid)
    ui.Button({ key: prefix + 'share', label: 'share', onPress: () => act.copy() }),
    volume(ui, vm, act, prefix),
  ]
}