@kolkrabbi/kol-component 0.6.0 → 0.7.0

package/src/chess/index.js

@@ -0,0 +1,32 @@
+// @kolkrabbi/kol-component/chess — the chess analysis apparatus.
+// Styling ships in @kolkrabbi/kol-theme (kol-components-chess.css, layer components).
+// Game data is NOT bundled: pass a `chessData` adapter to ChessAnalysisLayout /
+// GameArchiveTable / ChessHero / ChessControlsProvider. Required functions:
+//   getSampleGames(), getManifest(), getMonthlySummary(),
+//   getRandomMonth(), loadMonthGames(month), getGamePgnByIdAsync(id, month)
+
+// Apparatus
+export { default as ChessAnalysisLayout } from './apparatus/ChessAnalysisLayout.jsx'
+export { default as ChessBoard } from './apparatus/ChessBoard.jsx'
+export { default as ChessBoardWithControls } from './apparatus/ChessBoardWithControls.jsx'
+export { default as ChessBoardWithSidebar } from './apparatus/ChessBoardWithSidebar.jsx'
+export { default as ChessBoardFullscreen } from './apparatus/ChessBoardFullscreen.jsx'
+export { default as ChessSidebar } from './apparatus/ChessSidebar.jsx'
+export { default as GameArchiveTable } from './apparatus/GameArchiveTable.jsx'
+export { default as GameSelector } from './apparatus/GameSelector.jsx'
+export { default as NotationPanel } from './apparatus/NotationPanel.jsx'
+export { default as PlaybackControls } from './apparatus/PlaybackControls.jsx'
+export { default as VariationTree } from './apparatus/VariationTree.jsx'
+export { default as AlternativeControlsMock } from './apparatus/AlternativeControlsMock.jsx'
+
+// Piece renderer
+export { default as ChessPiece } from './ChessPiece.jsx'
+
+// Dashboard
+export { default as ChessHero } from './dashboards/ChessHero.jsx'
+
+// State
+export { ChessControlsProvider, useChessControls, createSnapshotsFromPgn } from './context/ChessControlsContext.jsx'
+
+// Utils
+export { default as buildMoveTree } from './utils/parsePgnTree.js'

package/src/chess/utils/parsePgnTree.js

@@ -0,0 +1,97 @@
+const cleanPgn = (pgn = '') => {
+  return pgn
+    .replace(/\[[^\]]*\]/g, '') // remove headers
+    .replace(/\{[^}]*\}/g, '') // remove comments
+    .replace(/\$[0-9]+/g, '') // remove NAGs
+    .replace(/\n/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+const tokenize = (pgn) => {
+  if (!pgn) return []
+  const prepared = cleanPgn(pgn)
+    .replace(/\(/g, ' ( ')
+    .replace(/\)/g, ' ) ')
+  return prepared
+    .split(/\s+/)
+    .filter(Boolean)
+}
+
+const isMoveNumber = (token = '') => /^[0-9]+\.{1,3}$/.test(token)
+const isResultToken = (token = '') => ['1-0', '0-1', '1/2-1/2', '*'].includes(token)
+
+const createStackEntry = (startPly = 0) => ({
+  moves: [],
+  lastNode: null,
+  currentPly: startPly
+})
+
+const pushMove = (entry, san) => {
+  entry.currentPly += 1
+  const ply = entry.currentPly
+  const node = {
+    id: `${ply}-${san}`,
+    ply,
+    san,
+    color: ply % 2 === 1 ? 'white' : 'black',
+    moveNumber: Math.ceil(ply / 2),
+    variations: []
+  }
+  entry.moves.push(node)
+  entry.lastNode = node
+}
+
+const attachVariation = (parentEntry, variationMoves) => {
+  if (!parentEntry.lastNode) {
+    return
+  }
+  parentEntry.lastNode.variations.push(variationMoves)
+}
+
+export const buildMoveTree = (pgn) => {
+  const tokens = tokenize(pgn)
+  if (!tokens.length) {
+    return []
+  }
+
+  const root = createStackEntry(0)
+  const stack = [root]
+
+  tokens.forEach((tokenRaw) => {
+    const token = tokenRaw.trim()
+    const top = stack[stack.length - 1]
+
+    if (token === '(') {
+      const parent = stack[stack.length - 1]
+      if (!parent.lastNode) {
+        return
+      }
+      const variationEntry = createStackEntry(parent.lastNode.ply)
+      attachVariation(parent, variationEntry.moves)
+      stack.push(variationEntry)
+      return
+    }
+
+    if (token === ')') {
+      if (stack.length > 1) {
+        stack.pop()
+      }
+      return
+    }
+
+    if (isMoveNumber(token) || isResultToken(token)) {
+      return
+    }
+
+    if (!token) {
+      return
+    }
+
+    pushMove(top, token)
+  })
+
+  return root.moves
+}
+
+export default buildMoveTree

package/src/dashboards/cards/DashAlertCard.jsx

@@ -0,0 +1,44 @@
+import { Badge } from '@kolkrabbi/kol-component'
+
+const DashAlertCard = ({
+  label,
+  value,
+  trend = 'up',
+  trendValue,
+  alerts = [],
+  footer,
+  className = ''
+}) => {
+  const isPositive = trend === 'up'
+
+  return (
+    <div className={`dash-card ${className}`.trim()}>
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex flex-col gap-1">
+          <span className="dash-detail text-fg-64">{label}</span>
+          <span className="dash-value">{value}</span>
+        </div>
+        {trendValue && (
+          <Badge icon={isPositive ? 'trending-up' : 'trending-down'}>{trendValue}</Badge>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-4 flex-1">
+        {alerts.map((alert, idx) => (
+          <div key={idx} className="flex flex-col gap-1">
+            <span className="dash-subtitle">{alert.title}</span>
+            <span className="dash-body text-fg-64">{alert.description}</span>
+          </div>
+        ))}
+      </div>
+
+      {footer && (
+        <div className="dash-card__footer">
+          <span className="dash-detail text-fg-64">{footer}</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DashAlertCard

package/src/dashboards/cards/DashChartCard.jsx

@@ -0,0 +1,44 @@
+import { Badge } from '@kolkrabbi/kol-component'
+import CardHeader from './_shared/CardHeader'
+import LegendRow from './_shared/LegendRow'
+
+const DashChartCard = ({
+  title,
+  subtitle,
+  icon,
+  badge,
+  metricLabel,
+  currentValue,
+  legends = [],
+  footer,
+  children,
+  className = ''
+}) => {
+  return (
+    <div className={`dash-card ${className}`.trim()}>
+      <div className="flex items-start justify-between gap-4">
+        <CardHeader icon={icon} title={title} subtitle={subtitle} />
+        {(badge || metricLabel || currentValue) && (
+          <div className="flex flex-col items-end gap-4">
+            {badge && <Badge>{badge}</Badge>}
+            {currentValue && <span className="dash-detail text-fg-64">{currentValue}</span>}
+          </div>
+        )}
+      </div>
+
+      <div className="relative w-full flex-1 min-h-0 flex flex-col">
+        {children}
+      </div>
+
+      <LegendRow legends={legends} />
+
+      {footer && (
+        <div className="dash-card__footer">
+          <span className="dash-detail text-fg-64">{footer}</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DashChartCard

package/src/dashboards/cards/DashFeaturedCard.jsx

@@ -0,0 +1,42 @@
+import { Badge } from '@kolkrabbi/kol-component'
+import CardHeader from './_shared/CardHeader'
+import LegendRow from './_shared/LegendRow'
+
+const DashFeaturedCard = ({
+  badge,
+  title,
+  icon,
+  description,
+  metricLabel,
+  metricValue,
+  chart,
+  legends = [],
+  className = ''
+}) => {
+  return (
+    <div className={`dash-card ${className}`.trim()}>
+      <div className="flex items-start justify-between">
+        <div className="flex flex-col gap-2">
+          {badge && <Badge className="self-start">{badge}</Badge>}
+          <CardHeader icon={icon} title={title} subtitle={description} />
+        </div>
+        {metricValue && (
+          <div className="text-right">
+            <span className="dash-detail text-fg-64">{metricLabel}</span>
+            <p className="dash-value">{metricValue}</p>
+          </div>
+        )}
+      </div>
+
+      {chart && (
+        <div className="flex-1 flex flex-col gap-3">
+          {chart}
+        </div>
+      )}
+
+      <LegendRow legends={legends} wrap />
+    </div>
+  )
+}
+
+export default DashFeaturedCard

package/src/dashboards/cards/DashListCard.jsx

@@ -0,0 +1,87 @@
+import { Badge } from '@kolkrabbi/kol-component'
+import CardHeader from './_shared/CardHeader'
+
+const DashListCard = ({
+  title,
+  subtitle,
+  icon,
+  badge,
+  items = [],
+  variant = 'text',
+  barColor = 'var(--kol-palette-yellow)',
+  footer,
+  className = ''
+}) => {
+  return (
+    <div className={`dash-card ${className}`.trim()}>
+      <div className="flex justify-between items-start">
+        <CardHeader icon={icon} title={title} subtitle={subtitle} />
+        {badge && <Badge>{badge}</Badge>}
+      </div>
+
+      <div className="flex flex-col gap-3">
+        {items.map((item, idx) => (
+          <div key={idx} className="dash-list-item">
+            <ListItem item={item} variant={variant} barColor={barColor} />
+          </div>
+        ))}
+      </div>
+
+      {footer && (
+        <div className="dash-card__footer">
+          <span className="dash-detail text-fg-64">{footer}</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+const ListItem = ({ item, variant, barColor }) => {
+  if (variant === 'meter') {
+    return (
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center justify-between">
+          <span className="dash-body text-fg-80">{item.label}</span>
+          <span className="dash-body text-fg-88">{item.value}</span>
+        </div>
+        <div className="h-2 bg-fg-08 rounded-full overflow-hidden">
+          <div
+            className="h-full rounded-full"
+            style={{ width: `${item.percent}%`, background: item.color || barColor }}
+          />
+        </div>
+        {item.detail && (
+          <span className="dash-list-item__detail dash-caption text-fg-64">{item.detail}</span>
+        )}
+      </div>
+    )
+  }
+
+  if (variant === 'ratings') {
+    return (
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          {item.color && <div className="w-3 h-3 rounded-full shrink-0" style={{ backgroundColor: item.color }} />}
+          <span className="dash-body text-fg-80">{item.label}</span>
+        </div>
+        <div className="flex items-baseline gap-2">
+          <span className="dash-value">{item.value}</span>
+          {item.detail && <span className="dash-detail text-fg-64">{item.detail}</span>}
+        </div>
+      </div>
+    )
+  }
+
+  // variant === 'text' (default)
+  return (
+    <div className="flex justify-between items-center">
+      <span className="dash-body text-fg-80">{item.label}</span>
+      <span className="dash-body text-fg-88">{item.value}</span>
+      {item.detail && (
+        <span className="dash-list-item__detail dash-caption text-fg-64">{item.detail}</span>
+      )}
+    </div>
+  )
+}
+
+export default DashListCard

package/src/dashboards/cards/DashMetricCard.jsx

@@ -0,0 +1,59 @@
+import { useState } from 'react'
+import useCountUp from '../shared/useCountUp'
+
+const DashMetricCard = ({
+  label,
+  value,
+  delta,
+  borderColor,
+  metrics,
+  sparkline,
+  className = ''
+}) => {
+  const [activeIdx, setActiveIdx] = useState(0)
+  const [fading, setFading] = useState(false)
+
+  const isInteractive = Array.isArray(metrics) && metrics.length > 1
+  const current = isInteractive ? metrics[activeIdx] : { label, value, delta, borderColor }
+
+  const borderStyle = current.borderColor
+    ? { borderLeftWidth: '3px', borderLeftColor: current.borderColor }
+    : undefined
+
+  const { displayValue, ref: countRef } = useCountUp(current.value, {
+    enabled: current.value != null
+  })
+
+  const handleClick = () => {
+    if (!isInteractive) return
+    setFading(true)
+    setTimeout(() => {
+      setActiveIdx((activeIdx + 1) % metrics.length)
+      setFading(false)
+    }, 150)
+  }
+
+  return (
+    <div
+      className={`dash-card ${isInteractive ? 'dash-metric--interactive' : ''} ${className}`.trim()}
+      style={borderStyle}
+      onClick={handleClick}
+    >
+      <span className="dash-detail text-fg-64">{current.label}</span>
+      <span className={`dash-value dash-metric-value ${fading ? 'dash-metric-value--fading' : ''}`} ref={countRef}>
+        {displayValue}
+      </span>
+      {current.delta && <span className="dash-body text-fg-80">{current.delta}</span>}
+      {sparkline && <div className="mt-auto">{sparkline}</div>}
+      {isInteractive && (
+        <div className="dash-metric-dots">
+          {metrics.map((_, idx) => (
+            <span key={idx} className={`dash-metric-dot ${idx === activeIdx ? 'dash-metric-dot--active' : ''}`} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DashMetricCard

package/src/dashboards/cards/DashSlotCard.jsx

@@ -0,0 +1,45 @@
+import CardHeader from './_shared/CardHeader'
+
+const DashSlotCard = ({
+  title,
+  subtitle,
+  icon,
+  chart,
+  items = [],
+  footer,
+  className = ''
+}) => {
+  return (
+    <div className={`dash-card ${className}`.trim()}>
+      <CardHeader icon={icon} title={title} subtitle={subtitle} />
+
+      {chart && (
+        <div className="relative w-full flex-1 min-h-0 overflow-hidden">
+          {chart}
+        </div>
+      )}
+
+      {items.length > 0 && (
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+          {items.map((item, idx) => (
+            <div key={idx} className="flex flex-col gap-1">
+              <span className="dash-caption text-fg-80">{item.label}</span>
+              <span className="dash-caption text-fg-88">{item.value}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {footer && (
+        <div className="dash-card__footer">
+          <div className="flex justify-between items-center">
+            <span className="dash-detail text-fg-80">{footer.label}</span>
+            <span className="dash-detail text-fg-88">{footer.value}</span>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DashSlotCard

package/src/dashboards/cards/DashStackedBarCard.jsx

@@ -0,0 +1,70 @@
+import { Icon } from '@kolkrabbi/kol-icons'
+
+const DashStackedBarCard = ({
+  title,
+  value,
+  data = [],
+  icon,
+  label,
+  trend,
+  footerLeft,
+  footerRight,
+  className = ''
+}) => {
+  const compact = !!icon
+
+  return (
+    <div className={`dash-card ${className}`.trim()}>
+      {compact ? (
+        <>
+          <div className="flex justify-between items-center">
+            <span className="dash-detail text-fg-88">{title}</span>
+            <Icon name={icon} size={24} className="text-fg-88" />
+          </div>
+          <div className="flex items-end gap-3">
+            <span className="dash-subtitle">{value}</span>
+            {label && <span className="dash-detail text-fg-64 mb-1">{label}</span>}
+            {trend && (
+              <Icon
+                name={trend === 'up' ? 'trending-up' : 'trending-down'}
+                size={16}
+                className="text-fg-64 mb-1"
+              />
+            )}
+          </div>
+        </>
+      ) : (
+        <>
+          <span className="dash-detail text-fg-88">{title}</span>
+          <span className="dash-subtitle">{value}</span>
+        </>
+      )}
+
+      <div className="flex-1 flex items-stretch gap-1 min-h-[80px]">
+        {data.map((item, i) => {
+          const winRate = item.total > 0 ? (item.win / item.total) * 100 : 0
+          const drawRate = item.total > 0 ? (item.draw / item.total) * 100 : 0
+          const lossRate = item.total > 0 ? (item.loss / item.total) * 100 : 0
+
+          return (
+            <div key={i} className="flex-1 flex flex-col gap-0.5">
+              <div className="flex-1" />
+              <div className="rounded-sm" style={{ flex: `${winRate} 0 0`, background: 'var(--kol-palette-green)' }} />
+              <div className="rounded-sm" style={{ flex: `${drawRate} 0 0`, background: 'var(--kol-palette-blue)' }} />
+              <div className="rounded-sm" style={{ flex: `${lossRate} 0 0`, background: 'var(--kol-palette-red)' }} />
+            </div>
+          )
+        })}
+      </div>
+
+      {(footerLeft || footerRight) && (
+        <div className="flex justify-between items-center">
+          {footerLeft && <span className="dash-detail text-fg-64">{footerLeft}</span>}
+          {footerRight && <span className="dash-detail text-fg-64">{footerRight}</span>}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DashStackedBarCard

package/src/dashboards/cards/DashTableCard.jsx

@@ -0,0 +1,31 @@
+import CardHeader from './_shared/CardHeader'
+import { Table } from '@kolkrabbi/kol-component'
+
+const DashTableCard = ({
+  title,
+  subtitle,
+  icon,
+  badge,
+  columns,
+  rows,
+  footer,
+  className = ''
+}) => {
+  return (
+    <div className={`dash-card ${className}`.trim()}>
+      <CardHeader icon={icon} title={title} subtitle={subtitle} />
+
+      <div className="flex-1 min-h-0">
+        <Table columns={columns} rows={rows} />
+      </div>
+
+      {footer && (
+        <div className="dash-card__footer">
+          <span className="dash-detail text-fg-64">{footer}</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default DashTableCard

package/src/dashboards/cards/_shared/CardHeader.jsx

@@ -0,0 +1,15 @@
+import { Icon } from '@kolkrabbi/kol-icons'
+
+const CardHeader = ({ icon, title, subtitle }) => {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        {icon && <Icon name={icon} size={24} className="text-fg-88" />}
+        <span className="dash-title">{title}</span>
+      </div>
+      {subtitle && <span className="dash-detail text-fg-64">{subtitle}</span>}
+    </div>
+  )
+}
+
+export default CardHeader

package/src/dashboards/cards/_shared/LegendRow.jsx

@@ -0,0 +1,25 @@
+const LegendRow = ({ legends = [], wrap = false }) => {
+  if (legends.length === 0) return null
+
+  return (
+    <div className={`flex items-center gap-3 ${wrap ? 'flex-wrap' : ''}`.trim()}>
+      {legends.map((legend, idx) => (
+        <div key={idx} className="flex items-center gap-2">
+          <span
+            className="w-2 h-2 rounded-full shrink-0"
+            style={{ backgroundColor: legend.color || (idx === 0 ? 'var(--kol-palette-yellow)' : 'var(--kol-palette-purple)') }}
+            aria-hidden="true"
+          />
+          <div className="flex flex-col">
+            <span className="dash-caption text-fg-88">{legend.label}</span>
+            {legend.detail && (
+              <span className="dash-detail text-fg-64">{legend.detail}</span>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default LegendRow

package/src/dashboards/charts/Candlestick.jsx

@@ -0,0 +1,79 @@
+import useChartTooltip from '../shared/useChartTooltip'
+import DashTooltip from '../shared/DashTooltip'
+
+const candlestickColors = {
+  accent: 'var(--kol-palette-yellow)',
+  neutral: 'var(--kol-palette-purple)'
+}
+
+const Candlestick = ({
+  data = [],
+  height = 288
+}) => {
+  const allValues = data.flatMap(d => [d.high, d.low, d.open, d.close])
+  const minValue = Math.min(...allValues)
+  const maxValue = Math.max(...allValues)
+  const range = maxValue - minValue || 1
+  const { activeIndex, handlers, containerHandlers, containerRef } = useChartTooltip()
+
+  const scale = (value) => ((value - minValue) / range) * 80 + 10
+
+  return (
+    <div className="relative w-full rounded" style={{ height }} ref={containerRef} {...containerHandlers}>
+      {[20, 40, 60, 80].map((y) => (
+        <div
+          key={y}
+          className="absolute left-0 right-0 border-t border-fg-08"
+          style={{ top: `${100 - y}%` }}
+        />
+      ))}
+
+      <div className="absolute inset-0 flex items-end gap-3">
+        {data.map((item, idx) => {
+          const color = candlestickColors[item.variant] || candlestickColors.accent
+          const scaledHigh = scale(item.high)
+          const scaledLow = scale(item.low)
+          const scaledOpen = scale(item.open)
+          const scaledClose = scale(item.close)
+          const wickHeight = Math.max(scaledHigh - scaledLow, 1)
+          const bodyHeight = Math.max(Math.abs(scaledClose - scaledOpen), 3)
+          const bodyBottom = Math.min(scaledOpen, scaledClose)
+
+          return (
+            <div
+              key={idx}
+              className={`relative flex-1 h-full ${activeIndex === idx ? 'dash-chart-element--active' : ''}`}
+              {...handlers(idx)}
+            >
+              <span
+                className="absolute left-1/2 -translate-x-1/2 w-[1.5px]"
+                style={{ height: `${wickHeight}%`, bottom: `${scaledLow}%`, background: color }}
+              />
+              <span
+                className="absolute left-1/2 -translate-x-1/2 w-2 rounded-sm"
+                style={{ height: `${bodyHeight}%`, bottom: `${bodyBottom}%`, background: color }}
+              />
+            </div>
+          )
+        })}
+      </div>
+
+      <DashTooltip visible={activeIndex !== null}>
+        {activeIndex !== null && data[activeIndex] && (
+          <div className="grid grid-cols-2 gap-x-3 gap-y-0.5">
+            <span className="dash-caption text-fg-64">O</span>
+            <span className="dash-caption">{data[activeIndex].open}</span>
+            <span className="dash-caption text-fg-64">H</span>
+            <span className="dash-caption">{data[activeIndex].high}</span>
+            <span className="dash-caption text-fg-64">L</span>
+            <span className="dash-caption">{data[activeIndex].low}</span>
+            <span className="dash-caption text-fg-64">C</span>
+            <span className="dash-caption">{data[activeIndex].close}</span>
+          </div>
+        )}
+      </DashTooltip>
+    </div>
+  )
+}
+
+export default Candlestick