zsemle

import type { Register } from 'claude-code'

// Drawn like zsemle by Parais Gergely (pane, band, status, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/parais4-zsemle/
// Written by modscode from that reading, not copied from the mod: use it as you like.
// Each value below stands for one the mod works out at run time; put in your own.
export const register: Register = on => {
  // the pane: open it with $.ui.open({ id: 'my-pane', title: "‹tr›" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const name = '…'
    return (
      <Box flexDirection="column">
        <Text dimColor wrap="wrap">
          {"Pick a companion: click the figure or its name. From a command: /zsemle skin <name>, in /config: zsemle.skin."}
        </Text>
        <Box flexDirection="row" flexWrap="wrap" marginTop={1}>
          <Box flexDirection="column" alignItems="center" marginRight={2}>
            <Button label={`[${name}]`} />
          </Box>
          <Box flexDirection="column" alignItems="center" marginRight={2}>
            <Button label={`[${name}]`} />
          </Box>
          <Box flexDirection="column" alignItems="center" marginRight={2}>
            <Button label={`[${name}]`} />
          </Box>
        </Box>
      </Box>
    )
  })

  // the band above the prompt; what else goes there is drawn under it
  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const { Box, Text, Button, Svg } = $.ui.resolve(e)
    const message = '…'
    const status = '…'
    const tr = '…'
    const miniSvg = '…'
    const more = '…'
    const spriteSvg = '…'
    const alt = '…'
    return (
      <Box flexDirection="column">
        <Box flexDirection="row" justifyContent="flex-end" alignItems="flex-start">
          <Box flexDirection="column" borderStyle="round" borderColor="#c8985c">
            <Text wrap="wrap">
              {message}
            </Text>
            <Box flexDirection="row" justifyContent="space-between">
              <Text dimColor wrap="truncate-end">
                {status}
              </Text>
              <Box flexDirection="row" gap={1}>
                <Button label="ok" plain />
                <Button label="♥" plain />
                <Button label={`${tr}`} plain dimColor />
                <Button label="skin" plain dimColor />
              </Box>
            </Box>
          </Box>
          <Box flexDirection="column" marginTop={2}>
            <Text color="#c8985c">
              ◀
            </Text>
          </Box>
          <Box flexDirection="row" alignItems="flex-end">
            <Box flexDirection="column">
              <Svg source={`${miniSvg}`} alt={`${tr}`} width={40} height={40} />
            </Box>
            <Box flexDirection="column">
              <Svg source={`${miniSvg}`} alt={`${tr}`} width={40} height={40} />
            </Box>
            <Box flexDirection="column">
              <Svg source={`${miniSvg}`} alt={`${tr}`} width={40} height={40} />
            </Box>
            <Text dimColor>
              +
              {more}
            </Text>
          </Box>
          <Svg source={`${spriteSvg}`} alt={`${alt}`} width={96} height={96} />
        </Box>
        {await next(e)}
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const tag = '…'
    const text = '…'
    const tr = '…'
    await $.ui.toast(`${tag}${text}`)
    await $.ui.toast(`${tag}${tr}`)
    return next(e)
  })
}