claudeck 1.0.0

package/plugins/tic-tac-toe/client.js

@@ -0,0 +1,241 @@
+// Tic Tac Toe — Tab SDK plugin
+// A classic tic-tac-toe game vs AI or a friend
+import { registerTab } from '/js/ui/tab-sdk.js';
+
+registerTab({
+  id: 'tic-tac-toe',
+  title: 'Tic Tac Toe',
+  icon: '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="2" x2="8" y2="22"/><line x1="16" y1="2" x2="16" y2="22"/><line x1="2" y1="8" x2="22" y2="8"/><line x1="2" y1="16" x2="22" y2="16"/></svg>',
+  lazy: true,
+
+  init(ctx) {
+    const root = document.createElement('div');
+    root.className = 'tic-tac-toe-tab';
+    root.style.cssText = 'display:flex;flex-direction:column;flex:1;overflow:hidden;';
+
+    // ── State ──
+    let board = Array(9).fill(null); // 'X', 'O', or null
+    let currentPlayer = 'X';        // X always goes first
+    const mode = 'ai';
+    let difficulty = 'hard';        // 'easy', 'medium', 'hard'
+    let gameOver = false;
+    let winLine = null;
+    let scores = { X: 0, O: 0, draw: 0 };
+
+    const WIN_COMBOS = [
+      [0,1,2],[3,4,5],[6,7,8], // rows
+      [0,3,6],[1,4,7],[2,5,8], // cols
+      [0,4,8],[2,4,6],         // diags
+    ];
+
+    function checkWin(b) {
+      for (const combo of WIN_COMBOS) {
+        const [a, c, d] = combo;
+        if (b[a] && b[a] === b[c] && b[a] === b[d]) return combo;
+      }
+      return null;
+    }
+
+    function isDraw(b) {
+      return b.every(cell => cell !== null) && !checkWin(b);
+    }
+
+    // ── AI (minimax) ──
+    function minimax(b, isMax, depth) {
+      const win = checkWin(b);
+      if (win) return b[win[0]] === 'O' ? 10 - depth : depth - 10;
+      if (b.every(c => c !== null)) return 0;
+
+      if (isMax) {
+        let best = -Infinity;
+        for (let i = 0; i < 9; i++) {
+          if (!b[i]) { b[i] = 'O'; best = Math.max(best, minimax(b, false, depth + 1)); b[i] = null; }
+        }
+        return best;
+      } else {
+        let best = Infinity;
+        for (let i = 0; i < 9; i++) {
+          if (!b[i]) { b[i] = 'X'; best = Math.min(best, minimax(b, true, depth + 1)); b[i] = null; }
+        }
+        return best;
+      }
+    }
+
+    function getAiMove() {
+      const empty = board.map((v, i) => v === null ? i : -1).filter(i => i >= 0);
+      if (empty.length === 0) return -1;
+
+      if (difficulty === 'easy') {
+        // Random move
+        return empty[Math.floor(Math.random() * empty.length)];
+      }
+
+      if (difficulty === 'medium') {
+        // 50% chance of optimal, 50% random
+        if (Math.random() < 0.5) return empty[Math.floor(Math.random() * empty.length)];
+      }
+
+      // Hard: full minimax
+      let bestScore = -Infinity;
+      let bestMove = empty[0];
+      for (const i of empty) {
+        board[i] = 'O';
+        const score = minimax(board, false, 0);
+        board[i] = null;
+        if (score > bestScore) { bestScore = score; bestMove = i; }
+      }
+      return bestMove;
+    }
+
+    // ── Game logic ──
+    function makeMove(index) {
+      if (board[index] || gameOver) return;
+      board[index] = currentPlayer;
+      const win = checkWin(board);
+      if (win) {
+        winLine = win;
+        gameOver = true;
+        scores[currentPlayer]++;
+        render();
+        return;
+      }
+      if (isDraw(board)) {
+        gameOver = true;
+        scores.draw++;
+        render();
+        return;
+      }
+      currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
+      render();
+
+      // AI turn
+      if (mode === 'ai' && currentPlayer === 'O' && !gameOver) {
+        setTimeout(() => {
+          const move = getAiMove();
+          if (move >= 0) makeMove(move);
+        }, 200);
+      }
+    }
+
+    function resetBoard() {
+      board = Array(9).fill(null);
+      currentPlayer = 'X';
+      gameOver = false;
+      winLine = null;
+      render();
+    }
+
+    function resetScores() {
+      scores = { X: 0, O: 0, draw: 0 };
+      resetBoard();
+    }
+
+    // ── Render ──
+    function getStatusText() {
+      if (gameOver) {
+        const win = checkWin(board);
+        if (win) {
+          const winner = board[win[0]];
+          return winner === 'X' ? 'You win!' : 'AI wins!';
+        }
+        return "It's a draw!";
+      }
+      return currentPlayer === 'X' ? 'Your turn (X)' : 'AI thinking...';
+    }
+
+    function render() {
+      const gridEl = root.querySelector('.ttt-grid');
+      const statusEl = root.querySelector('.ttt-status');
+      const scoreEl = root.querySelector('.ttt-scores');
+
+      if (!gridEl) return;
+
+      // Grid
+      gridEl.innerHTML = '';
+      for (let i = 0; i < 9; i++) {
+        const cell = document.createElement('div');
+        cell.className = 'ttt-cell';
+        cell.dataset.index = i;
+        if (board[i]) {
+          cell.textContent = board[i];
+          cell.classList.add(board[i] === 'X' ? 'is-x' : 'is-o');
+        }
+        if (winLine && winLine.includes(i)) cell.classList.add('winner');
+        if (!board[i] && !gameOver) cell.classList.add('empty');
+        gridEl.appendChild(cell);
+      }
+
+      // Status
+      if (statusEl) {
+        statusEl.textContent = getStatusText();
+        statusEl.className = 'ttt-status';
+        if (gameOver) {
+          const win = checkWin(board);
+          if (win) {
+            const w = board[win[0]];
+            statusEl.classList.add(w === 'X' ? 'status-win' : 'status-lose');
+          } else {
+            statusEl.classList.add('status-draw');
+          }
+        }
+      }
+
+      // Scores
+      if (scoreEl) {
+        scoreEl.innerHTML = `
+          <span class="ttt-score-item"><span class="ttt-score-x">You</span> ${scores.X}</span>
+          <span class="ttt-score-sep">·</span>
+          <span class="ttt-score-item"><span class="ttt-score-draw">Draw</span> ${scores.draw}</span>
+          <span class="ttt-score-sep">·</span>
+          <span class="ttt-score-item"><span class="ttt-score-o">AI</span> ${scores.O}</span>
+        `;
+      }
+    }
+
+    // ── Build DOM ──
+    root.innerHTML = `
+      <div class="ttt-header">
+        <div class="ttt-diff-btns">
+          <button class="ttt-diff-btn" data-diff="easy">Easy</button>
+          <button class="ttt-diff-btn" data-diff="medium">Med</button>
+          <button class="ttt-diff-btn active" data-diff="hard">Hard</button>
+        </div>
+      </div>
+      <div class="ttt-status">Your turn (X)</div>
+      <div class="ttt-board-wrap">
+        <div class="ttt-grid"></div>
+      </div>
+      <div class="ttt-scores"></div>
+      <div class="ttt-actions">
+        <button class="ttt-action-btn" data-action="restart">New Round</button>
+        <button class="ttt-action-btn" data-action="reset">Reset Scores</button>
+      </div>
+    `;
+
+    // ── Events ──
+    root.querySelector('.ttt-grid').addEventListener('click', (e) => {
+      const cell = e.target.closest('.ttt-cell');
+      if (!cell) return;
+      if (currentPlayer === 'O') return; // AI's turn
+      makeMove(+cell.dataset.index);
+    });
+
+    root.querySelector('.ttt-diff-btns').addEventListener('click', (e) => {
+      const btn = e.target.closest('.ttt-diff-btn');
+      if (!btn) return;
+      difficulty = btn.dataset.diff;
+      root.querySelectorAll('.ttt-diff-btn').forEach(b => b.classList.toggle('active', b === btn));
+      resetBoard();
+    });
+
+    root.querySelector('.ttt-actions').addEventListener('click', (e) => {
+      const btn = e.target.closest('.ttt-action-btn');
+      if (!btn) return;
+      if (btn.dataset.action === 'restart') resetBoard();
+      else if (btn.dataset.action === 'reset') resetScores();
+    });
+
+    render();
+    return root;
+  },
+});

package/public/css/core/components.css

@@ -0,0 +1,232 @@
+/* ── Unified Component Foundation ─────────────────────── */
+/* Base styles for inputs, buttons, selects, and toggles  */
+/* to ensure consistent look and feel across the UI.      */
+
+/* ── Text Inputs & Textareas ─────────────────────────── */
+input[type="text"],
+input[type="url"],
+input[type="number"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+textarea,
+select {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 10px 14px;
+  color: var(--text);
+  font-size: 13px;
+  font-family: var(--font-sans);
+  outline: none;
+  transition: all 0.2s var(--ease-smooth);
+  caret-color: var(--accent);
+}
+
+input[type="text"]:focus,
+input[type="url"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
+textarea:focus,
+select:focus {
+  border-color: var(--accent);
+  box-shadow: var(--glow);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--text-dim);
+}
+
+textarea {
+  resize: vertical;
+  min-height: 72px;
+  line-height: 1.5;
+  font-family: var(--font-mono);
+}
+
+select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233a4250' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+}
+
+select option {
+  background: var(--bg-secondary);
+  color: var(--text);
+}
+
+/* ── Checkboxes ──────────────────────────────────────── */
+input[type="checkbox"] {
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+
+/* ── Labels (form context) ───────────────────────────── */
+.form-label,
+.modal form label,
+.prompt-var-group label,
+.agent-form-field label,
+.folder-picker label {
+  display: block;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-dim);
+  margin-bottom: 6px;
+  font-family: var(--font-display);
+}
+
+/* ── Primary Button ──────────────────────────────────── */
+.btn-primary,
+.modal-btn-save,
+.perm-allow-btn,
+.prompt-var-send,
+.git-commit-btn,
+.welcome-btn-primary {
+  background: var(--accent-solid);
+  border: none;
+  border-radius: var(--radius-md);
+  padding: 8px 16px;
+  color: #000;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: all 0.2s var(--ease-smooth);
+}
+
+.btn-primary:hover,
+.modal-btn-save:hover,
+.perm-allow-btn:hover,
+.prompt-var-send:hover,
+.git-commit-btn:hover,
+.welcome-btn-primary:hover {
+  background: var(--accent);
+  box-shadow: var(--glow-strong);
+  transform: translateY(-1px);
+}
+
+.btn-primary:active,
+.modal-btn-save:active,
+.perm-allow-btn:active,
+.prompt-var-send:active,
+.git-commit-btn:active,
+.welcome-btn-primary:active {
+  transform: translateY(0);
+}
+
+.btn-primary:disabled,
+.modal-btn-save:disabled,
+.perm-allow-btn:disabled,
+.prompt-var-send:disabled,
+.git-commit-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+/* ── Cancel / Secondary Button ───────────────────────── */
+.btn-cancel,
+.modal-btn-cancel,
+.welcome-btn-secondary {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 8px 16px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-family: var(--font-sans);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s var(--ease-smooth);
+}
+
+.btn-cancel:hover,
+.modal-btn-cancel:hover,
+.welcome-btn-secondary:hover {
+  border-color: var(--text-secondary);
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+/* ── Danger Button ───────────────────────────────────── */
+.btn-danger,
+.perm-deny-btn {
+  background: transparent;
+  border: 1px solid var(--error);
+  border-radius: var(--radius-md);
+  padding: 8px 16px;
+  color: var(--error);
+  font-size: 12px;
+  font-family: var(--font-sans);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s var(--ease-smooth);
+}
+
+.btn-danger:hover,
+.perm-deny-btn:hover {
+  background: rgba(237, 51, 59, 0.1);
+  color: #ff6b6f;
+}
+
+/* ── Icon Button (small action buttons) ──────────────── */
+.btn-icon {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius);
+  font-size: 14px;
+  line-height: 1;
+  transition: all 0.15s var(--ease-smooth);
+}
+
+.btn-icon:hover {
+  color: var(--accent);
+  background: var(--accent-dim);
+}
+
+/* ── Dashed "Add" Button ─────────────────────────────── */
+.btn-dashed {
+  background: transparent;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text-dim);
+  font-size: 12px;
+  font-family: var(--font-sans);
+  padding: 8px 14px;
+  cursor: pointer;
+  transition: all 0.2s var(--ease-smooth);
+}
+
+.btn-dashed:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: var(--accent-dim);
+  border-style: solid;
+}
+
+/* ── Compact Inputs (sidebars, toolbars, search) ─────── */
+.input-compact {
+  padding: 7px 10px;
+  font-size: 12px;
+}
+
+/* ── Mono Inputs (code, paths, git) ──────────────────── */
+.input-mono {
+  font-family: var(--font-mono);
+  font-size: 12px;
+}