cutroom

import type { Register } from 'claude-code'

// Drawn like cutroom by leepokai (pane, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/leepokai-cutroom/
// 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: "Cutroom" })
  on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
    const { Box, Text, Button, Link, Input } = $.ui.resolve(e)
    const base = '…'
    const fmt = '…'
    const studioUrl = '…'
    const fmt2 = '…'
    const where = '…'
    const length = '…'
    const msg = '…'
    const kind = '…'
    const id = '…'
    const bar = '…'
    const fmt3 = '…'
    const fmt4 = '…'
    const bar2 = '…'
    const fmt5 = '…'
    const fmt6 = '…'
    const bar3 = '…'
    const fmt7 = '…'
    const fmt8 = '…'
    const kind2 = '…'
    const bar4 = '…'
    const fmt9 = '…'
    const fmt10 = '…'
    const bar5 = '…'
    const fmt11 = '…'
    const fmt12 = '…'
    const bar6 = '…'
    const fmt13 = '…'
    const fmt14 = '…'
    const kind3 = '…'
    const bar7 = '…'
    const fmt15 = '…'
    const fmt16 = '…'
    const bar8 = '…'
    const fmt17 = '…'
    const fmt18 = '…'
    const bar9 = '…'
    const fmt19 = '…'
    const fmt20 = '…'
    return (
      <Box flexDirection="column">
        <Box gap={1}>
          <Text bold>
            {base}
          </Text>
          <Text dimColor>
            {"· "}
            {fmt}
            {"s · Studio "}
            ●
          </Text>
          <Button plain hotkey="g" label="[open Studio ↗]" />
          <Link href={`${studioUrl}`} label={`${studioUrl}`} />
        </Box>
        <Box gap={1}>
          <Button plain hotkey="p" label="■" />
          <Button plain hotkey="a" label="|◀" />
          <Button plain hotkey="j" label="-1s" />
          <Button plain hotkey="h" label="-.1" />
          <Text bold>
            {" "}
            {fmt2}
            {"s "}
          </Text>
          <Button plain hotkey="l" label="+.1" />
          <Button plain hotkey="k" label="+1s" />
          <Button plain hotkey="f" label="▶|" />
          <Button plain hotkey="r" label="⟳" />
          <Input placeholder="t=" submitLabel="seek" />
        </Box>
        <Text dimColor>
          {where}
        </Text>
        <Box gap={1} flexWrap="wrap">
          <Button hotkey="i" label="Trim in→┃" />
          <Button hotkey="o" label="┃←Trim out" />
          <Button hotkey="s" label="Split @┃" />
          <Button hotkey="m" label="Move→┃" />
          <Button hotkey="d" label="Duplicate" />
          <Button hotkey="x" label="Delete" />
          <Button hotkey="u" label={`Undo (${length})`} />
          <Button hotkey="c" label="Check" />
          <Button hotkey="v" label="Render draft" />
          <Button hotkey="z" label="Reload" />
          <Button plain hotkey="t" label="prompt context: on" />
        </Box>
        <Input label="Ask Claude ›" placeholder="change what? e.g. 把這段標題放大、進場再慢一點 (or just type in the main prompt)" submitLabel="send" />
        <Text dimColor>
          {msg}
        </Text>
        <Box flexDirection="column">
          <Box flexDirection="column">
            <Text dimColor>
              {kind}
            </Text>
            <Box>
              <Text>
                ▸
              </Text>
              <Button plain label={`${id}`} />
              <Text>
                {" "}
                {bar}
                {" "}
              </Text>
              <Text dimColor>
                {fmt3}
                –
                {fmt4}
              </Text>
            </Box>
            <Box>
              <Text>
                ▸
              </Text>
              <Button plain label={`${id}`} />
              <Text>
                {" "}
                {bar2}
                {" "}
              </Text>
              <Text dimColor>
                {fmt5}
                –
                {fmt6}
              </Text>
            </Box>
            <Box>
              <Text>
                ▸
              </Text>
              <Button plain label={`${id}`} />
              <Text>
                {" "}
                {bar3}
                {" "}
              </Text>
              <Text dimColor>
                {fmt7}
                –
                {fmt8}
              </Text>
            </Box>
          </Box>
          <Box flexDirection="column">
            <Text dimColor>
              {kind2}
            </Text>
            <Box>
              <Text>
                ▸
              </Text>
              <Button plain label={`${id}`} />
              <Text>
                {" "}
                {bar4}
                {" "}
              </Text>
              <Text dimColor>
                {fmt9}
                –
                {fmt10}
              </Text>
            </Box>
            <Box>
              <Text>
                ▸
              </Text>
              <Button plain label={`${id}`} />
              <Text>
                {" "}
                {bar5}
                {" "}
              </Text>
              <Text dimColor>
                {fmt11}
                –
                {fmt12}
              </Text>
            </Box>
            <Box>
              <Text>
                ▸
              </Text>
              <Button plain label={`${id}`} />
              <Text>
                {" "}
                {bar6}
                {" "}
              </Text>
              <Text dimColor>
                {fmt13}
                –
                {fmt14}
              </Text>
            </Box>
          </Box>
          <Box flexDirection="column">
            <Text dimColor>
              {kind3}
            </Text>
            <Box>
              <Text>
                ▸
              </Text>
              <Button plain label={`${id}`} />
              <Text>
                {" "}
                {bar7}
                {" "}
              </Text>
              <Text dimColor>
                {fmt15}
                –
                {fmt16}
              </Text>
            </Box>
            <Box>
              <Text>
                ▸
              </Text>
              <Button plain label={`${id}`} />
              <Text>
                {" "}
                {bar8}
                {" "}
              </Text>
              <Text dimColor>
                {fmt17}
                –
                {fmt18}
              </Text>
            </Box>
            <Box>
              <Text>
                ▸
              </Text>
              <Button plain label={`${id}`} />
              <Text>
                {" "}
                {bar9}
                {" "}
              </Text>
              <Text dimColor>
                {fmt19}
                –
                {fmt20}
              </Text>
            </Box>
          </Box>
        </Box>
      </Box>
    )
  })

  on('session.start', async ($, e, next) => {
    const out = '…'
    await $.ui.toast(`Cutroom: draft rendered → ${out}`)
    return next(e)
  })
}