Kanban board

// kanban: a three-column board in candle's look. Cards are 1px outlines at 18% ink with no fill,
// so the columns carry the structure; a done card gets a thin up-coloured stripe at its left edge.
// Static sample task titles, so every render is the same.
const W = 380
const H = 400
const COL = { w: 116, gap: 8, x0: 8 }
const HEAD = { text: 20, rule: 30, cards: 44 }
const CARD = { h: 54, gap: 8 }
const UP = '#2C7A39'
const INK = '#141413'
const MUTED = '#73726C'
const CLAUDE = '#D77757'
const STAGE = '#FAF9F5'
const FONT = "'Inter Tight','Segoe UI',system-ui,sans-serif"

const COLUMNS = [
  { name: 'todo', cards: [['Price alerts', 'alerts'], ['CSV export', 'data'], ['Chart dark mode', 'ui'], ['Fill notices', 'feed'], ['Rate limit docs', 'docs']] },
  { name: 'doing', accent: true, cards: [['Order book depth', 'feed'], ['Retry on 429', 'api'], ['Sparkline cache', 'perf']] },
  { name: 'done', done: true, cards: [['Login screen', 'auth'], ['Candle store', 'data'], ['Settings page', 'ui'], ['Symbol search', 'ui']] },
]

// One column: a muted name and count over a hairline, then the cards down from HEAD.cards
function column(col, i) {
  const x = COL.x0 + i * (COL.w + COL.gap)
  const parts = [
    `<text x="${x}" y="${HEAD.text}" font-size="10" font-family="${FONT}" fill="${MUTED}">${col.name}</text>`,
    `<text x="${x + COL.w}" y="${HEAD.text}" text-anchor="end" font-size="10" font-family="${FONT}" fill="${col.accent ? CLAUDE : MUTED}">${col.cards.length}</text>`,
    `<line x1="${x}" x2="${x + COL.w}" y1="${HEAD.rule + 0.5}" y2="${HEAD.rule + 0.5}" stroke="${INK}" stroke-opacity="0.18"/>`,
  ]
  col.cards.forEach(([title, tag], k) => {
    const y = HEAD.cards + k * (CARD.h + CARD.gap)
    parts.push(`<rect x="${x + 0.5}" y="${y + 0.5}" width="${COL.w - 1}" height="${CARD.h - 1}" rx="3" fill="none" stroke="${INK}" stroke-opacity="0.18"/>`)
    // The stripe sits inside the border and stops short of the corners, so the rounded outline stays clean
    if (col.done) parts.push(`<rect x="${x + 1}" y="${y + 6}" width="2" height="${CARD.h - 12}" fill="${UP}"/>`)
    parts.push(`<text x="${x + 9}" y="${y + 21}" font-size="10" font-family="${FONT}" fill="${INK}">${title}</text>`)
    // The tag pill is sized from its character count; the font is not measured, so it is an estimate
    const pw = tag.length * 5 + 8
    parts.push(`<rect x="${x + 9.5}" y="${y + 28.5}" width="${pw}" height="13" rx="2" fill="none" stroke="${MUTED}" stroke-opacity="0.5"/>`)
    parts.push(`<text x="${x + 13}" y="${y + 38}" font-size="9" font-family="${FONT}" fill="${MUTED}">${tag}</text>`)
  })
  return parts.join('')
}

const SOURCE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}"><rect width="${W}" height="${H}" rx="4" fill="${STAGE}"/>${COLUMNS.map(column).join('')}</svg>`

export default {
  id: 'kanban',
  title: 'Kanban board',
  category: 'work',
  description: 'Three-column board of outlined cards, with a thin green stripe on the done ones; columns carry the structure.',
  element: ui => ui.Svg({ source: SOURCE, alt: 'Kanban board with todo, doing and done columns and sample task cards', width: W, height: H }),
}