@kolkrabbi/kol-component 0.7.0 → 0.8.0

package/src/chess/apparatus/ChessBoard.jsx

@@ -1,210 +0,0 @@
-import { useMemo } from 'react'
-import { Chess } from 'chess.js'
-import { ChessPiece } from '../index.js'
-
-const FILES = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
-const PIECE_TYPE_MAP = {
-  p: 'pawn',
-  r: 'rook',
-  n: 'knight',
-  b: 'bishop',
-  q: 'queen',
-  k: 'king'
-}
-
-const BOARD_THEMES = {
-  'blue-gray': { light: '#E8EDF9', dark: '#B7C0D8' },
-  'gray': { light: '#EFEFEF', dark: '#A6A6A6' },
-  'green-white': { light: '#ffffff', dark: '#0a682a' },
-  'olive': { light: '#EFEED2', dark: '#779557' },
-  'dark': { light: '#4D4D51', dark: '#242427' },
-  'brown': { light: '#F0D9B5', dark: '#B58863' }
-}
-
-const buildBoardState = (fen) => {
-  const chess = new Chess()
-  if (fen) {
-    /* chess.js v1 load() returns void and THROWS on invalid FENs — and it
-     * validates playability (kings required), not renderability. Display
-     * states like the cleared board are legitimate here, so on throw we
-     * place the FEN's board portion piece-by-piece instead of reverting
-     * to the start position. */
-    try {
-      chess.load(fen)
-    } catch {
-      chess.clear()
-      const ranks = fen.split(' ')[0].split('/')
-      ranks.forEach((rank, r) => {
-        let file = 0
-        for (const ch of rank) {
-          if (/\d/.test(ch)) { file += Number(ch); continue }
-          const square = 'abcdefgh'[file] + (8 - r)
-          try {
-            chess.put({ type: ch.toLowerCase(), color: ch === ch.toLowerCase() ? 'b' : 'w' }, square)
-          } catch { /* unplaceable char — leave square empty */ }
-          file += 1
-        }
-      })
-    }
-  }
-  return chess.board()
-}
-
-const getSquareTone = (fileIndex, rankIndex) =>
-  (fileIndex + rankIndex) % 2 === 0 ? 'light' : 'dark'
-
-const getBoardSize = (size) => {
-  if (size === 'fluid') return '100%'
-  const sizeMap = {
-    mobile: '384px',
-    tablet: '520px',
-    desktop: '760px'
-  }
-  return sizeMap[size] || size
-}
-
-const getPieceSize = (size) => {
-  if (size === 'fluid') return '75%'
-  const sizeMap = {
-    sm: '44px',
-    md: '64px',
-    lg: '76px',
-    mobile: '40px',
-    tablet: '52px',
-    desktop: '76px'
-  }
-  return sizeMap[size] || sizeMap.lg
-}
-
-const ChessBoard = ({ fen, size = 'desktop', orientation = 'white', showPieces = true, lastMove = null, pieceSet = 'default', boardTheme = 'green-white' }) => {
-  const boardState = useMemo(() => buildBoardState(fen), [fen])
-  const isFluid = size === 'fluid'
-  const boardPixelSize = getBoardSize(size)
-  const piecePixelSize = getPieceSize(size)
-  const squarePixelSize = isFluid ? '100%' : `${parseInt(boardPixelSize) / 8}px`
-  const coordinatePaddingClass = size === 'mobile' ? 'p-1' : size === 'tablet' ? '!p-1.5' : 'p-2'
-  const coordinateTypographyClass = size === 'mobile' ? 'kol-helper-xxxs' : 'kol-helper-xs'
-  const rankIndices =
-    orientation === 'white'
-      ? [...Array(boardState.length).keys()]
-      : [...Array(boardState.length).keys()].reverse()
-  const fileIndices =
-    orientation === 'white'
-      ? [...Array(FILES.length).keys()]
-      : [...Array(FILES.length).keys()].reverse()
-
-  const filesForOrientation = orientation === 'white' ? FILES : [...FILES].reverse()
-  const ranksForOrientation =
-    orientation === 'white'
-      ? [...Array(8).keys()].map((i) => 8 - i)
-      : [...Array(8).keys()].map((i) => i + 1)
-
-  const theme = BOARD_THEMES[boardTheme] || BOARD_THEMES['green-white']
-
-  return (
-    <div className="chess-board-wrapper">
-      <div
-        className={`chess-board${isFluid ? ' chess-board--fluid' : ''}`}
-        style={isFluid ? undefined : { width: boardPixelSize, height: boardPixelSize }}
-      >
-        <div className="chess-board__grid">
-          {rankIndices.map((rankIndex) =>
-            fileIndices.map((fileIndex) => {
-              const square = boardState[rankIndex][fileIndex]
-              const tone = getSquareTone(fileIndex, rankIndex)
-              const coordinate = `${FILES[fileIndex]}${8 - rankIndex}`
-              const pieceType = square?.type ?? null
-              const pieceColor = square?.color === 'b' ? 'black' : 'white'
-              const pieceName = pieceType ? PIECE_TYPE_MAP[pieceType] : null
-
-              const isLastMoveSquare = lastMove && (coordinate === lastMove.from || coordinate === lastMove.to)
-
-              const squareClass =
-                tone === 'light'
-                  ? 'chess-square chess-square--light'
-                  : 'chess-square chess-square--dark'
-
-              const highlightClass = isLastMoveSquare ? 'chess-square--highlighted' : ''
-
-              const rankNum = 8 - rankIndex
-              const fileLetter = FILES[fileIndex]
-              const isDarkSquare = tone === 'dark'
-              const textColor = isDarkSquare ? 'text-white' : 'text-[#166534]'
-              const isFirstRank = rankNum === 1
-              const isFirstRankFromBlack = rankNum === 8
-              const isAFile = fileIndex === 0
-
-              const squareColor = tone === 'light' ? theme.light : theme.dark
-
-              return (
-                <div
-                  key={coordinate}
-                  className={`${squareClass} ${highlightClass}`}
-                  data-square={coordinate}
-                  style={{ backgroundColor: squareColor }}
-                >
-                  {showPieces && pieceName ? (
-                    <div className="relative z-10 flex items-center justify-center" style={{ width: squarePixelSize, height: squarePixelSize }}>
-                      <ChessPiece piece={pieceName} color={pieceColor} size={piecePixelSize} pieceSet={pieceSet} />
-                    </div>
-                  ) : null}
-
-                  {/* Coordinate labels - absolutely positioned to overlay on pieces */}
-                  <div className="absolute inset-0 pointer-events-none">
-                    {orientation === 'white' ? (
-                      // White orientation labels
-                      isFirstRank ? (
-                        coordinate === 'a1' ? (
-                          <div className={`${coordinatePaddingClass} flex justify-between w-full h-full`}>
-                            <div className={`flex items-start text-white ${coordinateTypographyClass} uppercase`}>
-                              <span>1</span>
-                            </div>
-                            <div className={`flex items-end text-white ${coordinateTypographyClass} uppercase`}>
-                              <span>A</span>
-                            </div>
-                          </div>
-                        ) : (
-                          <div className={`${coordinatePaddingClass} flex justify-end items-end ${textColor} ${coordinateTypographyClass} uppercase w-full h-full`}>
-                            <span>{fileLetter}</span>
-                          </div>
-                        )
-                      ) : isAFile ? (
-                        <div className={`${coordinatePaddingClass} flex justify-start items-start ${textColor} ${coordinateTypographyClass} uppercase w-full h-full`}>
-                          <span>{rankNum}</span>
-                        </div>
-                      ) : null
-                    ) : (
-                      // Black orientation labels (flipped)
-                      isFirstRankFromBlack ? (
-                        coordinate === 'a8' ? (
-                          <div className={`${coordinatePaddingClass} flex justify-between w-full h-full`}>
-                            <div className={`flex items-start text-white ${coordinateTypographyClass} uppercase`}>
-                              <span>8</span>
-                            </div>
-                            <div className={`flex items-end text-white ${coordinateTypographyClass} uppercase`}>
-                              <span>A</span>
-                            </div>
-                          </div>
-                        ) : (
-                          <div className={`${coordinatePaddingClass} flex justify-end items-end ${textColor} ${coordinateTypographyClass} uppercase w-full h-full`}>
-                            <span>{fileLetter}</span>
-                          </div>
-                        )
-                      ) : isAFile ? (
-                        <div className={`${coordinatePaddingClass} flex justify-start items-start ${textColor} ${coordinateTypographyClass} uppercase w-full h-full`}>
-                          <span>{rankNum}</span>
-                        </div>
-                      ) : null
-                    )}
-                  </div>
-                </div>
-              )
-            })
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default ChessBoard

package/src/chess/apparatus/ChessBoardFullscreen.jsx

@@ -1,49 +0,0 @@
-import ChessBoard from './ChessBoard'
-import ChessSidebar from './ChessSidebar'
-
-const ChessBoardFullscreen = ({
-  boardProps = {},
-  sidebarProps = {},
-  wrapperClassName = '',
-  sidebarWidth = '400px'
-}) => {
-  const {
-    className: boardContainerClassName = '',
-    size: boardSize = 'desktop',
-    ...restBoardProps
-  } = boardProps
-
-  const {
-    className: sidebarClassName = 'w-full h-full bg-fg-04 text-auto',
-    size: sidebarSize = 'desktop',
-    variant: sidebarVariant = 'minimal',
-    ...restSidebarProps
-  } = sidebarProps
-
-  const rootClassName = ['relative w-full', wrapperClassName].filter(Boolean).join(' ')
-
-  return (
-    <div className={rootClassName} style={{ minHeight: '100dvh' }}>
-      <div
-        className={`flex h-full w-full items-center justify-center ${boardContainerClassName}`}
-        style={{ paddingRight: sidebarWidth, paddingLeft: 0, minHeight: '100dvh' }}
-      >
-        <ChessBoard size={boardSize} {...restBoardProps} />
-      </div>
-
-      <div
-        className="absolute inset-y-0 right-0 flex"
-        style={{ width: sidebarWidth }}
-      >
-        <ChessSidebar
-          size={sidebarSize}
-          variant={sidebarVariant}
-          className={`h-full w-full ${sidebarClassName}`}
-          {...restSidebarProps}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default ChessBoardFullscreen

package/src/chess/apparatus/ChessBoardWithControls.jsx

@@ -1,41 +0,0 @@
-import { useChessControls, ChessControlsProvider } from '../context/ChessControlsContext'
-import ChessBoard from './ChessBoard'
-import AlternativeControlsMock from './AlternativeControlsMock'
-import PlaybackControls from './PlaybackControls'
-
-const ChessBoardView = () => {
-  const { snapshots, moveIndex, orientation, lastMove, pieceSet, boardTheme } = useChessControls()
-  return (
-    <ChessBoard
-      fen={snapshots[moveIndex]?.fen}
-      size="fluid"
-      orientation={orientation}
-      lastMove={lastMove}
-      pieceSet={pieceSet}
-      boardTheme={boardTheme}
-    />
-  )
-}
-
-const ChessBoardWithControlsContent = () => {
-  return (
-    <div className="flex flex-col lg:flex-row gap-6 lg:gap-8">
-      <div className="flex-1 min-w-0">
-        <ChessBoardView />
-      </div>
-      <div className="w-full lg:w-[440px] lg:flex-shrink-0">
-        <AlternativeControlsMock />
-      </div>
-    </div>
-  )
-}
-
-const ChessBoardWithControls = ({ externalGame = null, chessData }) => {
-  return (
-    <ChessControlsProvider externalGame={externalGame} chessData={chessData}>
-      <ChessBoardWithControlsContent />
-    </ChessControlsProvider>
-  )
-}
-
-export default ChessBoardWithControls

package/src/chess/apparatus/ChessBoardWithSidebar.jsx

@@ -1,122 +0,0 @@
-import { ChessControlsProvider, useChessControls } from '../context/ChessControlsContext'
-import ChessBoard from './ChessBoard'
-import ChessBoardFullscreen from './ChessBoardFullscreen'
-import ChessSidebar from './ChessSidebar'
-
-const ToolbarButton = ({ label, onClick }) => (
-  <button type="button" onClick={onClick} className="board-toolbar__button">
-    {label}
-  </button>
-)
-
-const ChessBoardWithSidebarContent = ({ className = '', onToggleFullscreen = null, isFullscreen = false }) => {
-  const {
-    snapshots,
-    moveIndex,
-    orientation,
-    selectedGame,
-    selectedGameId,
-    filteredGames,
-    setSelectedGameId,
-    goToStart,
-    goToEnd,
-    stepBackward,
-    stepForward,
-    togglePlayback
-  } = useChessControls()
-
-  const handleSelectGame = (event) => {
-    setSelectedGameId(event.target.value || null)
-  }
-
-  if (isFullscreen) {
-    const fullscreenWrapperClassName = ['min-h-dvh', className].filter(Boolean).join(' ')
-    return (
-      <ChessBoardFullscreen
-        wrapperClassName={fullscreenWrapperClassName}
-        boardProps={{
-          size: 'desktop',
-          fen: snapshots[moveIndex]?.fen,
-          orientation
-        }}
-        sidebarProps={{
-          selectedGame,
-          selectedGameId,
-          sampleGames: filteredGames,
-          moveIndex,
-          onSelectGame: handleSelectGame,
-          onGoToStart: goToStart,
-          onStepBackward: stepBackward,
-          onStepForward: stepForward,
-          onGoToEnd: goToEnd,
-          onTogglePlayback: togglePlayback,
-          size: 'desktop',
-          variant: 'minimal',
-          className: 'w-full h-full bg-fg-04 text-auto',
-          onToggleFullscreen,
-          isFullscreen
-        }}
-      />
-    )
-  }
-
-  const rootClassName = ['board-playback', className].filter(Boolean).join(' ')
-
-  return (
-    <div className={rootClassName}>
-      <div className="board-playback__toolbar board-playback__toolbar--left">
-        <ToolbarButton label="⏮" onClick={goToStart} />
-        <ToolbarButton label="▶" onClick={togglePlayback} />
-        <ToolbarButton label="⏭" onClick={goToEnd} />
-      </div>
-
-      <div className="board-playback__toolbar board-playback__toolbar--right">
-        <ToolbarButton label="⏮" onClick={goToStart} />
-        <ToolbarButton label="◀" onClick={stepBackward} />
-        <ToolbarButton label="▶" onClick={togglePlayback} />
-        <ToolbarButton label="▸" onClick={stepForward} />
-        <ToolbarButton label="⏭" onClick={goToEnd} />
-      </div>
-
-      <div className="board-playback__content">
-        <ChessBoard fen={snapshots[moveIndex]?.fen} size="fluid" orientation={orientation} />
-
-        <ChessSidebar
-          selectedGame={selectedGame}
-          selectedGameId={selectedGameId}
-          sampleGames={filteredGames}
-          moveIndex={moveIndex}
-          onSelectGame={handleSelectGame}
-          onGoToStart={goToStart}
-          onStepBackward={stepBackward}
-          onStepForward={stepForward}
-          onGoToEnd={goToEnd}
-          onTogglePlayback={togglePlayback}
-          size="desktop"
-          onToggleFullscreen={onToggleFullscreen}
-          isFullscreen={isFullscreen}
-        />
-      </div>
-    </div>
-  )
-}
-
-const ChessBoardWithSidebar = ({
-  className = '',
-  onToggleFullscreen = null,
-  isFullscreen = false,
-  externalGame = null,
-  chessData
-}) => {
-  return (
-    <ChessControlsProvider externalGame={externalGame} chessData={chessData}>
-      <ChessBoardWithSidebarContent
-        className={className}
-        onToggleFullscreen={onToggleFullscreen}
-        isFullscreen={isFullscreen}
-      />
-    </ChessControlsProvider>
-  )
-}
-
-export default ChessBoardWithSidebar

package/src/chess/apparatus/ChessSidebar.jsx

@@ -1,131 +0,0 @@
-import { ChessPiece } from '../index.js'
-
-const getPieceSize = (size) => {
-  const sizeMap = {
-    sm: '28px',
-    md: '40px',
-    lg: '52px'
-  }
-  return sizeMap[size] || sizeMap.lg
-}
-
-const ChessSidebar = ({
-  selectedGame = null,
-  selectedGameId = null,
-  sampleGames = [],
-  moveIndex = 0,
-  onSelectGame = () => {},
-  onGoToStart = () => {},
-  onStepBackward = () => {},
-  onStepForward = () => {},
-  onGoToEnd = () => {},
-  onTogglePlayback = () => {},
-  size = 'desktop',
-  className = '',
-  variant = 'default',
-  onToggleFullscreen = null,
-  isFullscreen = false
-}) => {
-  const piecePixelSize = getPieceSize(size)
-  const getSidebarClass = (variant) => {
-    switch (variant) {
-      case 'minimal':
-        return 'board-playback__sidebar--minimal'
-      case 'plain':
-        return 'board-playback__sidebar--plain'
-      default:
-        return 'board-playback__sidebar'
-    }
-  }
-  const sidebarClass = getSidebarClass(variant)
-  const showFullscreenToggle = typeof onToggleFullscreen === 'function'
-  const fullscreenLabel = isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'
-  const toolbarButton = (label, onClick) => (
-    <button type="button" onClick={onClick} className="board-toolbar__button">
-      {label}
-    </button>
-  )
-
-  return (
-    <aside className={`${sidebarClass} ${className}`}>
-      <header className="board-playback__sidebar-header">
-        <div className="flex items-center justify-between gap-3">
-          <span className="board-playback__badge">{'{}'} Setup Position</span>
-          {showFullscreenToggle ? (
-            <button
-              type="button"
-              onClick={onToggleFullscreen}
-              className="board-toolbar__button board-toolbar__button--compact"
-            >
-              {fullscreenLabel}
-            </button>
-          ) : null}
-        </div>
-
-        <div className="space-y-2">
-          <h3 className="board-playback__title">
-            {selectedGame?.player?.username ?? 'Player'} vs{' '}
-            {selectedGame?.opponent?.username ?? 'Opponent'}
-          </h3>
-          <p className="board-playback__meta">
-            {selectedGame?.timeClass ?? 'blitz'} · {selectedGame?.timeControl ?? '180'} · move{' '}
-            {moveIndex}
-          </p>
-        </div>
-
-        <select
-          value={selectedGameId ?? ''}
-          onChange={(e) => onSelectGame(e.target.value || null)}
-          className="board-playback__select"
-        >
-          {(sampleGames || []).map((game) => (
-            <option value={game.id} key={game.id}>
-              {game.player?.username} vs {game.opponent?.username}
-            </option>
-          ))}
-        </select>
-      </header>
-
-      <div className="board-playback__palette">
-        <div className="board-playback__palette-row">
-          {['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook'].map(
-            (piece, index) => (
-              <ChessPiece key={`white-${piece}-${index}`} piece={piece} color="white" size={piecePixelSize} />
-            )
-          )}
-        </div>
-        <div className="board-playback__palette-row">
-          {['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook'].map(
-            (piece, index) => (
-              <ChessPiece key={`black-${piece}-${index}`} piece={piece} color="black" size={piecePixelSize} />
-            )
-          )}
-        </div>
-      </div>
-
-      <div className="board-playback__controls">
-        {toolbarButton('⏮', onGoToStart)}
-        {toolbarButton('◀', onStepBackward)}
-        {toolbarButton('▶', onTogglePlayback)}
-        {toolbarButton('▸', onStepForward)}
-        {toolbarButton('⏭', onGoToEnd)}
-      </div>
-
-      <div className="board-playback__footer">
-        <span>⚙</span>
-        <span>♜</span>
-        <span>♘</span>
-        <span>♞</span>
-        <div className="board-playback__avatar">
-          <div className="board-playback__avatar-img" />
-          <div>
-            <div className="board-playback__avatar-name">Tór Grimsson</div>
-            <div className="board-playback__avatar-meta">Oct 11, 2025</div>
-          </div>
-        </div>
-      </div>
-    </aside>
-  )
-}
-
-export default ChessSidebar