0.3.1

.gitea/workflows/build.yaml

@@ -1,5 +1,4 @@
 name: Deploy to Production
-run-name: Deploy to Production by @${{ github.actor }}
 
 on:
   push:
@@ -15,9 +14,6 @@ jobs:
 
       - name: Build and deploy with Docker Compose
         run: |
-          # Próba zatrzymania i usunięcia starego kontenera (ignoruje błąd jeśli nie istnieje)
+          # Sprzątaj TYLKO swój projekt
           docker compose down --remove-orphans || true
-          docker rm -f rubic-cube || true
-          
-          # Start nowej wersji
           docker compose up -d --build

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.agent/

Dockerfile

@@ -1,5 +1,5 @@
 # Stage 1: Build the application
-FROM node:18-alpine as build-stage
+FROM node:lts-alpine as build-stage
 
 # Set working directory
 WORKDIR /app

docker-compose.yml

@@ -1,4 +1,4 @@
-version: '3.8'
+name: rubic-cube
 
 services:
   rubic-cube:
@@ -6,17 +6,16 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    # ports:
+    ports:
-    #   - "8083:80"
+      - "8083:80"
     expose:
       - "80"
-    restart: always
+    restart: unless-stopped
+    # volumes:
+    #   - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
     networks:
       - npm_public
-      - rubic-net
 
 networks:
   npm_public:
     external: true
-  rubic-net:
-    driver: bridge

nginx.conf

@@ -1,6 +1,7 @@
 server {
     listen 80;
-    server_name localhost;
+    listen [::]:80;
+    server_name _;
     root /usr/share/nginx/html;
     index index.html;
 

package-lock.json

@@ -1,16 +1,15 @@
 {
   "name": "rubic-cube",
-  "version": "0.0.5",
+  "version": "0.3.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "rubic-cube",
-      "version": "0.0.5",
+      "version": "0.3.1",
       "dependencies": {
-        "@gkucmierz/utils": "^1.28.3",
         "lucide-vue-next": "^0.564.0",
-        "matrix-js": "^1.8.0",
+        "rubiks-js": "^1.0.0",
         "vue": "^3.5.13"
       },
       "devDependencies": {
@@ -489,12 +488,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/@gkucmierz/utils": {
-      "version": "1.28.3",
-      "resolved": "https://registry.npmjs.org/@gkucmierz/utils/-/utils-1.28.3.tgz",
-      "integrity": "sha512-4qbEGTrHnj0pdeY72MHbuOzM9hugZiyhTMfy7ZijkBQN+fMGVc7OJ7CM02t1KBQDFl2bQNb7AF9KZCm3wn09YQ==",
-      "license": "MIT"
-    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
@@ -986,11 +979,6 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
-    "node_modules/matrix-js": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/matrix-js/-/matrix-js-1.8.0.tgz",
-      "integrity": "sha512-2PHn6veiSf7aS/VBhdgrUVYCjVBkaAwFtIuXUnrHduKbSNpFHYzkdPYPgKI95idqFMKKEieYoMglimo2YGIapQ=="
-    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -1082,6 +1070,12 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rubiks-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rubiks-js/-/rubiks-js-1.0.0.tgz",
+      "integrity": "sha512-ABxwGyAHaqhUK6R93B+tEDMQ/yVKD390blE5q1RW1vgPjNNwIsCvdOw8TxxQ6DMPgk86Xx/J+qPKH99Xd8Zogg==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "rubic-cube",
   "private": true,
-  "version": "0.0.5",
+  "version": "0.3.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -9,9 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@gkucmierz/utils": "^1.28.3",
     "lucide-vue-next": "^0.564.0",
-    "matrix-js": "^1.8.0",
+    "rubiks-js": "^1.0.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {

src/App.vue

@@ -1,15 +1,15 @@
 <script setup>
-import CubeCSS from './components/renderers/CubeCSS.vue'
+import SmartCube from './components/renderers/SmartCube.vue'
-import DebugPanel from './components/DebugPanel.vue'
+import NavBar from './components/NavBar.vue'
-import InteractionReplay from './components/InteractionReplay.vue'
+import Footer from './components/Footer.vue'
 </script>
 
 <template>
+  <NavBar />
   <div class="app-content">
-    <DebugPanel />
+    <SmartCube />
-    <InteractionReplay />
-    <CubeCSS />
   </div>
+  <Footer />
 </template>
 
 <style scoped>
@@ -19,7 +19,7 @@ import InteractionReplay from './components/InteractionReplay.vue'
   justify-content: center;
   align-items: center;
   width: 100%;
-  padding: 2rem 0;
+  padding: 0;
   position: relative;
   z-index: 1;
   user-select: none;

src/components/DebugPanel.vue

@@ -1,137 +0,0 @@
-
-<script setup>
-import { useDebug } from '../composables/useDebug'
-import { ref } from 'vue'
-
-const { settings } = useDebug()
-const isOpen = ref(true)
-
-const toggle = () => isOpen.value = !isOpen.value
-</script>
-
-<template>
-  <div class="debug-panel" :class="{ open: isOpen }">
-    <div class="header" @click="toggle">
-      <span>🛠️ Debug Config</span>
-      <span>{{ isOpen ? '▼' : '▲' }}</span>
-    </div>
-    
-    <div v-if="isOpen" class="content">
-      <div class="section">
-        <h3>View Rotation</h3>
-        <label>
-          <input type="checkbox" v-model="settings.viewRotation.invertX"> Invert X (Up/Down)
-        </label>
-        <label>
-          <input type="checkbox" v-model="settings.viewRotation.invertY"> Invert Y (Left/Right)
-        </label>
-        <label>
-          Speed: <input type="number" step="0.1" v-model="settings.viewRotation.speed">
-        </label>
-      </div>
-
-      <div class="section">
-        <h3>Drag Mappings (Sign)</h3>
-        <p class="hint">Adjust signs (-1 or 1) to correct drag direction</p>
-        
-        <div class="face-group" v-for="(val, face) in settings.dragMapping" :key="face">
-          <strong>{{ face.toUpperCase() }}</strong>
-          <div class="controls">
-            <label>X: <input type="number" :step="2" :min="-1" :max="1" v-model="settings.dragMapping[face].x"></label>
-            <label>Y: <input type="number" :step="2" :min="-1" :max="1" v-model="settings.dragMapping[face].y"></label>
-          </div>
-        </div>
-      </div>
-      
-       <div class="section">
-        <h3>Physics</h3>
-        <label>
-          <input type="checkbox" v-model="settings.physics.enabled"> Inertia & Snap
-        </label>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.debug-panel {
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  width: 250px;
-  background: rgba(0, 0, 0, 0.85);
-  color: #fff;
-  border-radius: 8px;
-  font-family: monospace;
-  font-size: 12px;
-  z-index: 9999;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.header {
-  padding: 10px;
-  background: #333;
-  border-radius: 8px 8px 0 0;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  font-weight: bold;
-  user-select: none;
-}
-
-.content {
-  padding: 10px;
-  overflow-y: auto;
-}
-
-.section {
-  margin-bottom: 15px;
-  border-bottom: 1px solid #444;
-  padding-bottom: 10px;
-}
-
-h3 {
-  margin: 0 0 8px 0;
-  color: #aaa;
-  font-size: 11px;
-  text-transform: uppercase;
-}
-
-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 4px;
-  cursor: pointer;
-}
-
-input[type="number"] {
-  width: 40px;
-  background: #222;
-  border: 1px solid #444;
-  color: #fff;
-  padding: 2px;
-}
-
-.face-group {
-  margin-bottom: 8px;
-  background: #222;
-  padding: 5px;
-  border-radius: 4px;
-}
-
-.controls {
-  display: flex;
-  gap: 10px;
-  margin-top: 4px;
-}
-
-.hint {
-  font-size: 10px;
-  color: #888;
-  margin-bottom: 5px;
-}
-</style>

src/components/Footer.vue

@@ -1,14 +1,12 @@
 <script setup>
 const currentYear = new Date().getFullYear();
+const version = __APP_VERSION__;
 </script>
 
 <template>
   <footer class="app-footer glass-panel">
     <div class="footer-content">
-      <p>&copy; {{ currentYear }} Rubic Cube. Wersja 0.0.1</p>
+      <p>&copy; {{ currentYear }} Rubic Cube. Wersja {{ version }}</p>
-      <div class="social-links">
-        <!-- Placeholder for social links if needed -->
-      </div>
     </div>
   </footer>
 </template>
@@ -21,11 +19,15 @@ const currentYear = new Date().getFullYear();
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: auto;
+  position: absolute;
-  background: var(--panel-bg);
+  bottom: 0;
-  backdrop-filter: blur(10px);
+  left: 0;
-  border-top: 1px solid var(--panel-border);
+  z-index: 10;
-  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
+  /* Glass panel styles handle background/border/shadow */
+  border-radius: 0; /* Full width bar usually square corners or specific radius */
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
   color: var(--text-muted);
   box-sizing: border-box;
 }

src/components/InteractionReplay.vue

@@ -1,188 +0,0 @@
-
-<script setup>
-import { ref } from 'vue'
-import { useInteractionLogger } from '../composables/useInteractionLogger'
-
-const { logs, isRecording, clearLogs, getRecentLogsForAnalysis } = useInteractionLogger()
-const isOpen = ref(false)
-const copied = ref(false)
-
-const toggle = () => isOpen.value = !isOpen.value
-
-const copyReport = async () => {
-  const report = getRecentLogsForAnalysis(50)
-  const context = `
-### User Interaction Report
-Please analyze the following interaction logs to identify the issue.
-Focus on: Drag direction, Active Layer, Rotation Mapping, and State changes.
-
-\`\`\`json
-${report}
-\`\`\`
-  `
-  
-  try {
-    await navigator.clipboard.writeText(context)
-    copied.value = true
-    setTimeout(() => copied.value = false, 2000)
-  } catch (err) {
-    console.error('Failed to copy logs', err)
-    alert('Failed to copy to clipboard. Check console.')
-  }
-}
-</script>
-
-<template>
-  <div class="interaction-replay">
-    <div class="header" @click="toggle" :class="{ recording: isRecording }">
-      <span class="indicator">●</span>
-      <span>Logger ({{ logs.length }})</span>
-    </div>
-
-    <div v-if="isOpen" class="panel">
-      <div class="actions">
-        <button @click="copyReport" :class="{ success: copied }">
-          {{ copied ? 'Copied!' : '📋 Copy Report for AI' }}
-        </button>
-        <button @click="clearLogs" class="secondary">Clear</button>
-        <label>
-          <input type="checkbox" v-model="isRecording"> Rec
-        </label>
-      </div>
-      
-      <div class="log-list">
-        <div v-for="log in logs.slice().reverse()" :key="log.id" class="log-item">
-          <span class="time">{{ new Date(log.timestamp).toISOString().substr(14, 9) }}</span>
-          <span class="type" :class="log.type">{{ log.type }}</span>
-          <pre class="data">{{ log.data }}</pre>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.interaction-replay {
-  position: fixed;
-  bottom: 10px;
-  right: 10px;
-  z-index: 10000;
-  font-family: monospace;
-  font-size: 12px;
-}
-
-.header {
-  background: #222;
-  color: #fff;
-  padding: 8px 12px;
-  border-radius: 20px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-  border: 1px solid #444;
-}
-
-.header.recording .indicator {
-  color: #ff4444;
-  animation: pulse 1.5s infinite;
-}
-
-.indicator {
-  color: #666;
-}
-
-@keyframes pulse {
-  0% { opacity: 1; }
-  50% { opacity: 0.5; }
-  100% { opacity: 1; }
-}
-
-.panel {
-  position: absolute;
-  bottom: 40px;
-  right: 0;
-  width: 350px;
-  height: 400px;
-  background: rgba(0, 0, 0, 0.9);
-  border-radius: 8px;
-  border: 1px solid #444;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.actions {
-  padding: 10px;
-  border-bottom: 1px solid #444;
-  display: flex;
-  gap: 8px;
-  background: #1a1a1a;
-  align-items: center;
-}
-
-button {
-  flex: 1;
-  padding: 6px;
-  background: #007acc;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-button.success {
-  background: #28a745;
-}
-
-button.secondary {
-  background: #444;
-  flex: 0 0 60px;
-}
-
-label {
-  color: #fff;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-}
-
-.log-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 10px;
-}
-
-.log-item {
-  margin-bottom: 8px;
-  border-bottom: 1px solid #333;
-  padding-bottom: 4px;
-}
-
-.time {
-  color: #666;
-  margin-right: 8px;
-}
-
-.type {
-  font-weight: bold;
-  padding: 2px 4px;
-  border-radius: 2px;
-  margin-right: 8px;
-}
-
-.type.drag-start { color: #4fc3f7; }
-.type.drag-update { color: #ffd54f; }
-.type.drag-end { color: #81c784; }
-.type.rotation { color: #ba68c8; }
-
-.data {
-  margin: 4px 0 0 0;
-  color: #aaa;
-  font-size: 10px;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-</style>

src/components/Main.vue

@@ -1,109 +0,0 @@
-<script setup>
-import { computed } from 'vue'
-import { useRenderer } from '../composables/useRenderer'
-import { useCube } from '../composables/useCube'
-import CubeCSS from './renderers/CubeCSS.vue'
-import CubeSVG from './renderers/CubeSVG.vue'
-import CubeCanvas from './renderers/CubeCanvas.vue'
-
-const { activeRenderer, RENDERERS } = useRenderer()
-const { cubeState } = useCube()
-
-const currentRendererComponent = computed(() => {
-  switch (activeRenderer.value) {
-    case RENDERERS.CSS:
-      return CubeCSS
-    case RENDERERS.SVG:
-      return CubeSVG
-    case RENDERERS.CANVAS:
-      return CubeCanvas
-    default:
-      return CubeCSS
-  }
-})
-
-const formattedState = computed(() => {
-  if (!cubeState.value) return '{}'
-
-  // Custom formatter to keep faces compact
-  const s = cubeState.value
-  const faces = Object.keys(s)
-
-  // Helper to shorten colors
-  const shortColor = (c) => c && typeof c === 'string' ? c[0].toUpperCase() : '-'
-
-  let out = '{\n'
-  faces.forEach((face, i) => {
-    const matrix = s[face]
-    // Format as ["WWW", "WWW", "WWW"]
-    const rows = matrix.map(row => `"${row.map(shortColor).join('')}"`).join(', ')
-    out += `  "${face}": [ ${rows} ]`
-    if (i < faces.length - 1) out += ','
-    out += '\n'
-  })
-  out += '}'
-  return out
-})
-</script>
-
-<template>
-  <div class="wrapper">
-    <div class="renderer-container">
-      <component :is="currentRendererComponent" />
-    </div>
-
-    <div class="state-panel">
-      <h3>Cube State</h3>
-      <pre>{{ formattedState }}</pre>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.wrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 2rem;
-  width: 100%;
-  height: 100%;
-  padding: 2rem;
-  box-sizing: border-box;
-}
-
-.renderer-container {
-  flex: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  min-width: 300px;
-}
-
-.state-panel {
-  flex: 1;
-  max-width: 400px;
-  background: rgba(0, 0, 0, 0.05);
-  padding: 1rem;
-  border-radius: 8px;
-  max-height: 80vh;
-  overflow-y: auto;
-  font-family: monospace;
-  font-size: 0.8rem;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-h3 {
-  margin-top: 0;
-  margin-bottom: 1rem;
-  font-size: 1.2rem;
-  color: #333;
-}
-
-pre {
-  margin: 0;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-</style>

src/components/NavBar.vue

@@ -1,40 +1,16 @@
 <script setup>
-import { Sun, Moon } from 'lucide-vue-next';
+import { Sun, Moon, Grid2x2 } from 'lucide-vue-next';
 import { ref, onMounted } from 'vue';
-import { useRenderer } from '../composables/useRenderer';
+import { useSettings } from '../composables/useSettings';
-
-const { activeRenderer, setRenderer, RENDERERS } = useRenderer();
 
+const { isCubeTranslucent, toggleCubeTranslucent } = useSettings();
 const isDark = ref(true);
 
 const setTheme = (dark) => {
   isDark.value = dark;
   const theme = dark ? 'dark' : 'light';
   document.documentElement.dataset.theme = theme;
-  
+  localStorage.setItem('theme', theme);
-  if (dark) {
-    document.documentElement.style.setProperty('--bg-gradient', 'linear-gradient(135deg, #2c3e50 0%, #000000 100%)');
-    document.documentElement.style.setProperty('--text-color', '#ffffff');
-    document.documentElement.style.setProperty('--text-strong', '#ffffff');
-    document.documentElement.style.setProperty('--text-muted', 'rgba(255, 255, 255, 0.7)');
-    document.documentElement.style.setProperty('--glass-bg', 'rgba(255, 255, 255, 0.05)');
-    document.documentElement.style.setProperty('--glass-border', 'rgba(255, 255, 255, 0.1)');
-    document.documentElement.style.setProperty('--panel-bg', 'rgba(255, 255, 255, 0.05)');
-    document.documentElement.style.setProperty('--panel-border', 'rgba(255, 255, 255, 0.1)');
-    document.documentElement.style.setProperty('--cube-edge-color', '#333333');
-    document.documentElement.style.setProperty('--title-gradient', 'linear-gradient(45deg, #00f2fe, #4facfe)');
-  } else {
-    document.documentElement.style.setProperty('--bg-gradient', 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)');
-    document.documentElement.style.setProperty('--text-color', '#0f172a');
-    document.documentElement.style.setProperty('--text-strong', '#0f172a');
-    document.documentElement.style.setProperty('--text-muted', 'rgba(15, 23, 42, 0.6)');
-    document.documentElement.style.setProperty('--glass-bg', 'rgba(255, 255, 255, 0.75)');
-    document.documentElement.style.setProperty('--glass-border', 'rgba(15, 23, 42, 0.12)');
-    document.documentElement.style.setProperty('--panel-bg', 'rgba(255, 255, 255, 0.7)');
-    document.documentElement.style.setProperty('--panel-border', 'rgba(15, 23, 42, 0.12)');
-    document.documentElement.style.setProperty('--cube-edge-color', '#000000');
-    document.documentElement.style.setProperty('--title-gradient', 'linear-gradient(45deg, #0ea5e9, #6366f1)');
-  }
 };
 
 const toggleTheme = () => {
@@ -42,7 +18,12 @@ const toggleTheme = () => {
 };
 
 onMounted(() => {
-  setTheme(true);
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme) {
+    setTheme(savedTheme === 'dark');
+  } else {
+    setTheme(true);
+  }
 });
 </script>
 
@@ -53,17 +34,15 @@ onMounted(() => {
     </div>
 
     <div class="nav-container">
-      <div class="renderer-selector">
+      <!-- Cube Opacity Toggle -->
-        <button 
+      <button
-          v-for="renderer in RENDERERS" 
+        class="btn-neon nav-btn icon-only"
-          :key="renderer" 
+        @click="toggleCubeTranslucent"
-          @click="setRenderer(renderer)"
+        :title="isCubeTranslucent ? 'Wyłącz przezroczystość kostki' : 'Włącz przezroczystość kostki'"
-          class="renderer-btn"
+        :class="{ active: isCubeTranslucent }"
-          :class="{ active: activeRenderer === renderer }"
+      >
-        >
+        <Grid2x2 :size="20" />
-          {{ renderer }}
+      </button>
-        </button>
-      </div>
 
       <!-- Theme Toggle -->
       <button class="btn-neon nav-btn icon-only" @click="toggleTheme" :title="isDark ? 'Przełącz na jasny' : 'Przełącz na ciemny'">
@@ -80,17 +59,18 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
-  height: 50px;
+  height: 70px;
   width: 100%;
   box-sizing: border-box;
-  position: sticky;
+  position: absolute;
   top: 0;
+  left: 0;
   z-index: 100;
-  margin-bottom: 0;
+  /* Glass panel styles handle background/border/shadow */
-  background: var(--glass-bg);
+  border-radius: 0;
-  backdrop-filter: blur(10px);
+  border-top: none;
-  border-bottom: 1px solid var(--glass-border);
+  border-left: none;
-  box-shadow: var(--glass-shadow);
+  border-right: none;
 }
 
 .logo-container {
@@ -100,10 +80,10 @@ onMounted(() => {
 }
 
 .logo-text {
-  font-size: 1.2rem;
+  font-size: 1.5rem;
   font-weight: 700;
-  color: var(--text-color);
+  color: var(--text-strong);
-  text-shadow: 0 0 20px var(--title-glow);
+  letter-spacing: 1px;
 }
 
 .nav-container {
@@ -112,67 +92,25 @@ onMounted(() => {
   align-items: center;
 }
 
-.renderer-selector {
-  display: flex;
-  gap: 5px;
-  background: rgba(0, 0, 0, 0.2);
-  padding: 3px;
-  border-radius: 6px;
-}
-
-.renderer-btn {
-  background: transparent;
-  border: none;
-  color: var(--text-muted);
-  padding: 4px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.8rem;
-  font-weight: 600;
-  transition: all 0.2s;
-}
-
-.renderer-btn:hover {
-  color: var(--text-color);
-}
-
-.renderer-btn.active {
-  background: var(--glass-border);
-  color: var(--text-color);
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
-
 .nav-btn {
   background: transparent;
   border: none;
-  color: var(--text-color);
+  color: var(--text-strong);
-  font-size: 1rem;
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 8px;
+  padding: 12px;
-  padding: 8px 12px;
+  border-radius: 50%;
-  border-radius: 8px;
   transition: all 0.3s ease;
 }
 
-.nav-btn:hover {
+.nav-btn:hover,
-  background: rgba(255, 255, 255, 0.1);
+.nav-btn.active {
-  transform: translateY(-2px);
+  background: rgba(255, 255, 255, 0.2);
 }
 
-.btn-neon {
+.nav-btn.active {
-  border: 1px solid var(--toggle-btn-border);
+  color: var(--color-primary);
-  box-shadow: 0 0 5px rgba(0,0,0,0.1);
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
-}
-
-.desktop-only {
-  display: flex;
-}
-
-@media (max-width: 768px) {
-  .desktop-only {
-    display: none;
-  }
 }
 </style>

src/components/common/Line3D.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  start: {
+    type: Object,
+    required: true // {x, y, z}
+  },
+  end: {
+    type: Object,
+    required: true // {x, y, z}
+  },
+  color: {
+    type: String,
+    default: 'var(--text-color, #fff)'
+  },
+  thickness: {
+    type: Number,
+    default: 1
+  }
+});
+
+const style = computed(() => {
+  const dx = props.end.x - props.start.x;
+  const dy = props.end.y - props.start.y;
+  const dz = props.end.z - props.start.z;
+  
+  const length = Math.sqrt(dx * dx + dy * dy + dz * dz);
+  
+  if (length === 0) return {};
+
+  const midX = (props.start.x + props.end.x) / 2;
+  const midY = (props.start.y + props.end.y) / 2;
+  const midZ = (props.start.z + props.end.z) / 2;
+  
+  // Rotation
+  // Yaw (around Y axis)
+  const yaw = Math.atan2(dz, dx);
+  // Pitch (around Z axis)
+  const pitch = Math.atan2(dy, Math.sqrt(dx * dx + dz * dz));
+  
+  return {
+    width: `${length}px`,
+    height: `${props.thickness}px`,
+    backgroundColor: props.color,
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    transformOrigin: 'center center',
+    transform: `translate3d(${midX}px, ${midY}px, ${midZ}px) rotateY(${-yaw}rad) rotateZ(${pitch}rad) translate(-50%, -50%)`,
+    opacity: 0.3, // Delicate
+    pointerEvents: 'none'
+  };
+});
+</script>
+
+<template>
+  <div class="line-3d" :style="style"></div>
+</template>

src/components/renderers/CubeCSS.vue

@@ -1,448 +0,0 @@
-<script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useCube } from '../../composables/useCube'
-import { useDebug } from '../../composables/useDebug'
-import { useInteractionLogger } from '../../composables/useInteractionLogger'
-
-const { cubies, initCube, rotateLayer, FACES } = useCube()
-const { settings: debugSettings } = useDebug()
-const { addLog } = useInteractionLogger()
-
-// --- State ---
-const rx = ref(25)
-const ry = ref(25)
-const rz = ref(0)
-
-const isDragging = ref(false)
-const dragMode = ref('view') // 'view' or 'layer'
-const startMouseX = ref(0)
-const startMouseY = ref(0)
-const lastMouseX = ref(0)
-const lastMouseY = ref(0)
-const selectedCubieId = ref(null) // ID of the cubie where drag started
-const selectedFaceNormal = ref(null) // Normal vector of the face clicked
-
-// Animation state
-const activeLayer = ref(null) // { axis: 'x'|'y'|'z', index: -1|0|1 }
-const layerRotation = ref(0)
-const isSnapping = ref(false)
-const velocity = ref(0)
-const lastTime = ref(0)
-const rafId = ref(null)
-
-// Mouse Interaction
-const onMouseDown = (event) => {
-  if (isSnapping.value) return
-
-  isDragging.value = true
-  startMouseX.value = event.clientX
-  startMouseY.value = event.clientY
-  lastMouseX.value = event.clientX
-  lastMouseY.value = event.clientY
-  lastTime.value = performance.now()
-  velocity.value = 0 // Reset velocity
-
-  const target = event.target
-  const stickerEl = target.closest('.sticker-face')
-
-  if (stickerEl) {
-    // Clicked on a cubie face
-    const cubieId = parseInt(stickerEl.dataset.cubieId)
-    const faceName = stickerEl.dataset.face
-
-    selectedCubieId.value = cubieId
-    selectedFaceNormal.value = faceName // 'up', 'down', etc.
-
-    const cubie = cubies.value.find(c => c.id === cubieId)
-    const isCenter = (Math.abs(cubie.x) + Math.abs(cubie.y) + Math.abs(cubie.z)) === 1
-
-    if (isCenter) {
-      dragMode.value = 'view'
-      document.body.style.cursor = 'move'
-      addLog('drag-start', { mode: 'view', cubieId, face: faceName })
-    } else {
-      dragMode.value = 'layer'
-      document.body.style.cursor = 'grab'
-      addLog('drag-start', { mode: 'layer', cubieId, face: faceName })
-    }
-  } else {
-    dragMode.value = 'view'
-    selectedCubieId.value = null
-    document.body.style.cursor = 'move'
-    addLog('drag-start', { mode: 'view', target: 'background' })
-  }
-}
-
-const onMouseMove = (event) => {
-  if (!isDragging.value) return
-
-  if (dragMode.value === 'layer') {
-    document.body.style.cursor = 'grabbing'
-  }
-
-  const deltaX = event.clientX - lastMouseX.value
-  const deltaY = event.clientY - lastMouseY.value
-
-  if (dragMode.value === 'view') {
-    const s = debugSettings.viewRotation
-    const speed = s.speed || 0.5
-
-    // Use debug settings for direction
-    ry.value += deltaX * speed * (s.invertY ? -1 : 1)
-    rx.value += deltaY * speed * (s.invertX ? -1 : 1)
-
-    velocity.value = 0
-  } else if (dragMode.value === 'layer' && selectedCubieId.value !== null) {
-    const totalDeltaX = event.clientX - startMouseX.value
-    const totalDeltaY = event.clientY - startMouseY.value
-
-    const now = performance.now()
-    const dt = now - lastTime.value
-    lastTime.value = now
-
-    updateLayerDrag(totalDeltaX, totalDeltaY, dt)
-  }
-
-  lastMouseX.value = event.clientX
-  lastMouseY.value = event.clientY
-}
-
-const getRotationMapping = (face) => {
-  const m = debugSettings.dragMapping[face]
-  // Default structure but with signs from debug settings
-  const defaults = {
-    [FACES.FRONT]: [
-      { axis: 'x', rotAxis: 'y', sign: m ? m.x : -1 },
-      { axis: 'y', rotAxis: 'x', sign: m ? m.y : -1 }
-    ],
-    [FACES.BACK]: [
-      { axis: 'x', rotAxis: 'y', sign: m ? m.x : 1 },
-      { axis: 'y', rotAxis: 'x', sign: m ? m.y : 1 }
-    ],
-    [FACES.RIGHT]: [
-      { axis: 'z', rotAxis: 'y', sign: m ? m.x : -1 },
-      { axis: 'y', rotAxis: 'z', sign: m ? m.y : 1 }
-    ],
-    [FACES.LEFT]: [
-      { axis: 'z', rotAxis: 'y', sign: m ? m.x : -1 },
-      { axis: 'y', rotAxis: 'z', sign: m ? m.y : -1 }
-    ],
-    [FACES.UP]: [
-      { axis: 'x', rotAxis: 'z', sign: m ? m.x : 1 },
-      { axis: 'z', rotAxis: 'x', sign: m ? m.y : 1 }
-    ],
-    [FACES.DOWN]: [
-      { axis: 'x', rotAxis: 'z', sign: m ? m.x : -1 },
-      { axis: 'z', rotAxis: 'x', sign: m ? m.y : -1 }
-    ]
-  }
-  return defaults[face]
-}
-
-const ROTATION_MAPPING = {
-  // Kept for reference or initial state if needed, but we use getRotationMapping now
-}
-
-// Helper to project 3D vector to 2D screen space based on current view rotation
-const projectVector = (vector) => {
-  const radX = rx.value * Math.PI / 180
-  const radY = ry.value * Math.PI / 180
-  const radZ = rz.value * Math.PI / 180
-
-  const { x, y, z } = vector
-
-  // v1 = Rz * v
-  let x1 = x * Math.cos(radZ) - y * Math.sin(radZ)
-  let y1 = x * Math.sin(radZ) + y * Math.cos(radZ)
-  let z1 = z
-
-  // v2 = Ry * v1
-  let x2 = x1 * Math.cos(radY) + z1 * Math.sin(radY)
-  let y2 = y1
-  let z2 = -x1 * Math.sin(radY) + z1 * Math.cos(radY)
-
-  // v3 = Rx * v2
-  let x3 = x2
-  let y3 = y2 * Math.cos(radX) - z2 * Math.sin(radX)
-  let z3 = y2 * Math.sin(radX) + z2 * Math.cos(radX)
-
-  return { x: x3, y: y3 }
-}
-
-const updateLayerDrag = (dx, dy, dt) => {
-  const cubie = cubies.value.find(c => c.id === selectedCubieId.value)
-  if (!cubie) return
-
-  let axis = null
-  let index = 0
-  let dragVector = null
-
-  if (activeLayer.value) {
-    axis = activeLayer.value.axis
-    index = activeLayer.value.index
-    dragVector = activeLayer.value.dragVector
-  } else {
-    if (Math.abs(dx) < 5 && Math.abs(dy) < 5) return
-
-    const face = selectedFaceNormal.value
-    // Use dynamic mapping from debug settings if available, else fallback to constant
-    // But better to make ROTATION_MAPPING computed or access directly
-
-    const mapping = getRotationMapping(face)
-
-    if (!mapping) return
-
-    // Create basis vectors for the two possible tangent axes
-    const vectors = mapping.map(m => {
-      const v = { x: 0, y: 0, z: 0 }
-      v[m.axis] = 1
-      return { ...m, vector: v }
-    })
-
-    // Project them to screen space
-    const projected = vectors.map(v => {
-      const p = projectVector(v.vector)
-      const len = Math.sqrt(p.x * p.x + p.y * p.y)
-      return { ...v, px: p.x, py: p.y, len }
-    })
-
-    const mouseLen = Math.sqrt(dx * dx + dy * dy)
-    if (mouseLen === 0) return
-
-    const ndx = dx / mouseLen
-    const ndy = dy / mouseLen
-
-    let bestMatch = null
-    let maxDot = -1
-
-    projected.forEach(p => {
-      if (p.len < 0.1) return
-
-      const npx = p.px / p.len
-      const npy = p.py / p.len
-
-      const dot = Math.abs(ndx * npx + ndy * npy)
-      if (dot > maxDot) {
-        maxDot = dot
-        bestMatch = p
-      }
-    })
-
-    if (!bestMatch) return
-
-    axis = bestMatch.rotAxis
-
-    if (axis === 'x') index = cubie.x
-    if (axis === 'y') index = cubie.y
-    if (axis === 'z') index = cubie.z
-
-    dragVector = { x: bestMatch.px, y: bestMatch.py, sign: bestMatch.sign }
-
-    activeLayer.value = { axis, index, dragVector }
-    addLog('layer-select', { axis, index, vector: dragVector, face: selectedFaceNormal.value })
-  }
-
-  const { x: vx, y: vy, sign } = activeLayer.value.dragVector
-  const vLen = Math.sqrt(vx * vx + vy * vy)
-  if (vLen === 0) return
-
-  const nvx = vx / vLen
-  const nvy = vy / vLen
-
-  const moveAmount = dx * nvx + dy * nvy
-  const newRotation = moveAmount * sign * 0.5
-
-  if (dt > 0) {
-    const dRot = newRotation - layerRotation.value
-    velocity.value = 0.6 * velocity.value + 0.4 * (dRot / dt)
-  }
-
-  layerRotation.value = newRotation
-}
-
-const onMouseUp = async () => {
-  if (!isDragging.value) return
-  isDragging.value = false
-  document.body.style.cursor = ''
-
-  if (dragMode.value === 'layer' && activeLayer.value) {
-    isSnapping.value = true
-
-    const projection = velocity.value * 200
-    const projectedRot = layerRotation.value + projection
-    const steps = Math.round(projectedRot / 90)
-    const targetRot = steps * 90
-
-    const startRot = layerRotation.value
-    const startTime = performance.now()
-    const duration = 300
-
-    const easeOut = (t) => 1 - Math.pow(1 - t, 3)
-
-    return new Promise(resolve => {
-      const animate = (time) => {
-        const elapsed = time - startTime
-        const progress = Math.min(elapsed / duration, 1)
-        const ease = easeOut(progress)
-
-        layerRotation.value = startRot + (targetRot - startRot) * ease
-
-        if (progress < 1) {
-          rafId.value = requestAnimationFrame(animate)
-        } else {
-          finishRotation(steps)
-          resolve()
-        }
-      }
-      rafId.value = requestAnimationFrame(animate)
-    })
-  } else {
-    selectedCubieId.value = null
-  }
-}
-
-const finishRotation = (steps) => {
-    if (steps !== 0) {
-      const { axis, index } = activeLayer.value
-
-      // Calculate logical direction
-      // We found that Visual Rotation direction is inverted relative to Logical Rotation direction
-      // for all axes due to coordinate system differences (Y-down vs Y-up).
-      // Visual Positive -> Logical Negative.
-      const direction = steps > 0 ? -1 : 1
-      const count = Math.abs(steps)
-
-      for (let i = 0; i < count; i++) {
-         rotateLayer(axis, index, direction)
-      }
-      addLog('rotation-finish', { axis, index, direction, steps, count })
-    }
-
-    activeLayer.value = null
-    layerRotation.value = 0
-    isSnapping.value = false
-    velocity.value = 0
-}
-
-onMounted(() => {
-  initCube()
-  window.addEventListener('mousemove', onMouseMove)
-  window.addEventListener('mouseup', onMouseUp)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('mousemove', onMouseMove)
-  window.removeEventListener('mouseup', onMouseUp)
-  if (rafId.value) cancelAnimationFrame(rafId.value)
-})
-
-const cubeStyle = computed(() => ({
-  transform: `rotateX(${rx.value}deg) rotateY(${ry.value}deg) rotateZ(${rz.value}deg)`
-}))
-
-const getCubieStyle = (cubie) => {
-  const tx = cubie.x * 100
-  const ty = cubie.y * -100
-  const tz = cubie.z * 100
-
-  let transform = `translate3d(${tx}px, ${ty}px, ${tz}px)`
-
-  if (activeLayer.value) {
-    const { axis, index } = activeLayer.value
-    let match = false
-    if (axis === 'x' && cubie.x === index) match = true
-    if (axis === 'y' && cubie.y === index) match = true
-    if (axis === 'z' && cubie.z === index) match = true
-
-    if (match) {
-      transform = `rotate${axis.toUpperCase()}(${layerRotation.value}deg) ${transform}`
-    }
-  }
-
-  return { transform }
-}
-</script>
-
-<template>
-  <div class="scene" @mousedown="onMouseDown">
-    <div class="container">
-      <div class="cube-group" :style="cubeStyle">
-
-        <div v-for="cubie in cubies" :key="cubie.id" class="cubie" :style="getCubieStyle(cubie)">
-          <div v-for="(color, face) in cubie.faces" :key="face"
-               class="sticker-face"
-               :class="face"
-               :data-cubie-id="cubie.id"
-               :data-face="face"
-               :style="{ backgroundColor: color }">
-               <div class="sticker-border"></div>
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.scene {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.container {
-  width: 300px;
-  height: 300px;
-  perspective: 900px;
-  pointer-events: auto;
-}
-
-.cube-group {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  transform-style: preserve-3d;
-  transition: transform 0.1s;
-}
-
-.cubie {
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  top: 100px; /* Center it: 300/2 - 100/2 = 100 */
-  left: 100px;
-  transform-style: preserve-3d;
-}
-
-.sticker-face {
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  border: 1px solid rgba(0,0,0,0.8); /* Plastic edge */
-  box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  backface-visibility: hidden; /* Optimization? Or we want to see inside? */
-}
-
-.sticker-border {
-  width: 92%;
-  height: 92%;
-  border: 2px solid rgba(0,0,0,0.5);
-  border-radius: 8px; /* Rounded sticker */
-  background: inherit; /* Sticker color */
-}
-
-/* Face transforms relative to Cubie Center */
-.sticker-face.front { transform: rotateY(0deg) translateZ(50px); }
-.sticker-face.back  { transform: rotateY(180deg) translateZ(50px); }
-.sticker-face.right { transform: rotateY(90deg) translateZ(50px); }
-.sticker-face.left  { transform: rotateY(-90deg) translateZ(50px); }
-.sticker-face.up    { transform: rotateX(90deg) translateZ(50px); }
-.sticker-face.down  { transform: rotateX(-90deg) translateZ(50px); }
-
-</style>

src/components/renderers/CubeCanvas.vue

@@ -1,34 +0,0 @@
-<script setup>
-import { onMounted } from 'vue'
-
-onMounted(() => {
-  console.log('Canvas Renderer mounted (placeholder)')
-})
-</script>
-
-<template>
-  <div class="canvas-container">
-    <canvas width="300" height="300"></canvas>
-    <div class="overlay">
-      Canvas Renderer (Coming Soon)
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.canvas-container {
-  width: 300px;
-  height: 300px;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px dashed rgba(255, 255, 255, 0.3);
-}
-
-.overlay {
-  position: absolute;
-  color: white;
-  pointer-events: none;
-}
-</style>

src/components/renderers/CubeSVG.vue

@@ -1,28 +0,0 @@
-<script setup>
-import { onMounted } from 'vue'
-
-onMounted(() => {
-  console.log('SVG Renderer mounted (placeholder)')
-})
-</script>
-
-<template>
-  <div class="svg-container">
-    <svg width="300" height="300" viewBox="0 0 300 300">
-      <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="white">
-        SVG Renderer (Coming Soon)
-      </text>
-    </svg>
-  </div>
-</template>
-
-<style scoped>
-.svg-container {
-  width: 300px;
-  height: 300px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px dashed rgba(255, 255, 255, 0.3);
-}
-</style>

src/components/renderers/SmartCube.vue

@@ -0,0 +1,950 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { useCube } from '../../composables/useCube'
+import { useSettings } from '../../composables/useSettings'
+import { LAYER_ANIMATION_DURATION } from '../../config/animationSettings'
+
+const { cubies, initCube, rotateLayer, turn, FACES } = useCube()
+const { isCubeTranslucent } = useSettings()
+
+// --- Visual State ---
+const rx = ref(-25)
+const ry = ref(45)
+const rz = ref(0)
+const SCALE = 100
+const GAP = 0
+const MIN_MOVES_COLUMN_GAP = 6
+const movesColumnGap = ref(MIN_MOVES_COLUMN_GAP)
+
+// --- Interaction State ---
+const isDragging = ref(false)
+const dragMode = ref('view') // 'view' or 'layer'
+const startX = ref(0)
+const startY = ref(0)
+const lastX = ref(0)
+const lastY = ref(0)
+const velocity = ref(0)
+
+// Layer Interaction
+const selectedCubie = ref(null) // { id, x, y, z } static snapshot at start of drag
+const selectedFace = ref(null)  // 'front', 'up', etc.
+const activeLayer = ref(null)   // { axis, index, tangent, direction }
+const currentLayerRotation = ref(0) // Visual rotation in degrees
+const isAnimating = ref(false)
+const pendingLogicalUpdate = ref(false)
+const currentMoveId = ref(null)
+
+// --- Constants & Helpers ---
+
+const getFaceNormal = (face) => {
+  const map = {
+    [FACES.FRONT]: { x: 0, y: 0, z: 1 },
+    [FACES.BACK]:  { x: 0, y: 0, z: -1 },
+    [FACES.RIGHT]: { x: 1, y: 0, z: 0 },
+    [FACES.LEFT]:  { x: -1, y: 0, z: 0 },
+    [FACES.UP]:    { x: 0, y: 1, z: 0 },
+    [FACES.DOWN]:  { x: 0, y: -1, z: 0 },
+  }
+  return map[face] || { x: 0, y: 0, z: 1 }
+}
+
+const getAllowedAxes = (face) => {
+  // Logic: Which axes can this face physically move along?
+  switch(face) {
+    case FACES.FRONT: case FACES.BACK: return ['x', 'y']
+    case FACES.RIGHT: case FACES.LEFT: return ['z', 'y']
+    case FACES.UP:    case FACES.DOWN: return ['x', 'z']
+  }
+  return []
+}
+
+const getAxisVector = (axis) => {
+  if (axis === 'x') return { x: 1, y: 0, z: 0 }
+  if (axis === 'y') return { x: 0, y: 1, z: 0 }
+  if (axis === 'z') return { x: 0, y: 0, z: 1 }
+  return { x: 0, y: 0, z: 0 }
+}
+
+// Cross Product: a x b
+const cross = (a, b) => ({
+  x: a.y * b.z - a.z * b.y,
+  y: a.z * b.x - a.x * b.z,
+  z: a.x * b.y - a.y * b.x
+})
+
+// Project 3D vector to 2D screen space based on current view (rx, ry, rz)
+const project = (v) => {
+  const radX = rx.value * Math.PI / 180
+  const radY = ry.value * Math.PI / 180
+  const radZ = rz.value * Math.PI / 180
+
+  let x1 = v.x * Math.cos(radZ) - v.y * Math.sin(radZ)
+  let y1 = v.x * Math.sin(radZ) + v.y * Math.cos(radZ)
+  let z1 = v.z
+
+  let x2 = x1 * Math.cos(radY) + z1 * Math.sin(radY)
+  let y2 = y1
+  let z2 = -x1 * Math.sin(radY) + z1 * Math.cos(radY)
+
+  let x3 = x2
+  let y3 = y2 * Math.cos(radX) - z2 * Math.sin(radX)
+
+  return { x: x3, y: y3 }
+}
+
+// --- Interaction Logic ---
+
+const onMouseDown = (e) => {
+  if (isAnimating.value) return
+
+  isDragging.value = true
+  startX.value = e.clientX
+  startY.value = e.clientY
+  lastX.value = e.clientX
+  lastY.value = e.clientY
+  velocity.value = 0
+
+  const target = e.target.closest('.sticker')
+  if (target) {
+    const id = parseInt(target.dataset.id)
+    const face = target.dataset.face
+    const cubie = cubies.value.find(c => c.id === id)
+
+    selectedCubie.value = { ...cubie } // Snapshot position
+    selectedFace.value = face
+
+    // Check if center piece (has 2 zero coordinates)
+    // Centers have sum of absolute coords = 1
+    // Core (0,0,0) has sum = 0
+    const absSum = Math.abs(cubie.x) + Math.abs(cubie.y) + Math.abs(cubie.z)
+    const isCenterOrCore = absSum <= 1
+
+    // Mechanical Realism:
+    // Centers are "Stiff" (part of the core frame). Dragging them rotates the View.
+    // Corners/Edges are "Moving Parts". Dragging them rotates the Layer.
+    dragMode.value = isCenterOrCore ? 'view' : 'layer'
+  } else {
+    dragMode.value = 'view'
+    selectedCubie.value = null
+  }
+}
+
+const onMouseMove = (e) => {
+  if (!isDragging.value) return
+
+  const dx = e.clientX - lastX.value
+  const dy = e.clientY - lastY.value
+
+  if (dragMode.value === 'view') {
+    ry.value += dx * 0.5
+    rx.value += dy * 0.5
+  } else if (dragMode.value === 'layer' && selectedCubie.value) {
+    const totalDx = e.clientX - startX.value
+    const totalDy = e.clientY - startY.value
+
+    handleLayerDrag(totalDx, totalDy, dx, dy)
+  }
+
+  lastX.value = e.clientX
+  lastY.value = e.clientY
+}
+
+const handleLayerDrag = (totalDx, totalDy, dx, dy) => {
+  // If we haven't locked an axis yet
+  if (!activeLayer.value) {
+    if (Math.sqrt(totalDx**2 + totalDy**2) < 5) return // Threshold
+
+    const faceNormal = getFaceNormal(selectedFace.value)
+    const axes = getAllowedAxes(selectedFace.value)
+
+    let best = null
+    let maxDot = 0
+
+    // Analyze candidates
+    axes.forEach(axis => {
+      // Tangent = Axis x Normal
+      // This is the 3D direction of motion for Positive Rotation around this Axis
+      const t3D = cross(getAxisVector(axis), faceNormal)
+      const t2D = project(t3D)
+      const len = Math.sqrt(t2D.x**2 + t2D.y**2)
+
+      if (len > 0.1) {
+        const nx = t2D.x / len
+        const ny = t2D.y / len
+
+        // Compare with mouse drag direction
+        const mouseLen = Math.sqrt(totalDx**2 + totalDy**2)
+        const mx = totalDx / mouseLen
+        const my = totalDy / mouseLen
+
+        const dot = Math.abs(mx * nx + my * ny)
+
+        if (dot > maxDot) {
+          maxDot = dot
+          best = { axis, tangent: { x: nx, y: ny } }
+        }
+      }
+    })
+
+    if (best && maxDot > 0.5) {
+      // Lock Axis
+      let index = 0
+      if (best.axis === 'x') index = selectedCubie.value.x
+      if (best.axis === 'y') index = selectedCubie.value.y
+      if (best.axis === 'z') index = selectedCubie.value.z
+
+      activeLayer.value = {
+        axis: best.axis,
+        index,
+        tangent: best.tangent
+      }
+    } else {
+      // Fallback: if drag doesn't match a layer axis, maybe user wants to rotate view?
+      // Only switch if drag is significant
+      if (Math.sqrt(totalDx**2 + totalDy**2) > 20) {
+         // Keep layer mode but maybe relax?
+         // No, sticky mode is better.
+      }
+    }
+  }
+
+  // If we have an active layer, update rotation
+  if (activeLayer.value) {
+    const { x, y } = activeLayer.value.tangent
+    // Project delta onto key
+    const val = dx * x + dy * y
+    // Scale factor
+    currentLayerRotation.value += val * 0.6
+  }
+}
+
+const onMouseUp = () => {
+  isDragging.value = false
+
+  if (activeLayer.value) {
+    snapRotation()
+  }
+}
+
+const snapRotation = () => {
+  isAnimating.value = true
+
+  // Determine nearest 90 deg
+  const target = Math.round(currentLayerRotation.value / 90) * 90
+  const steps = Math.round(currentLayerRotation.value / 90)
+
+  const start = currentLayerRotation.value
+  const startTime = performance.now()
+  const duration = LAYER_ANIMATION_DURATION
+
+  const animate = (time) => {
+    const p = Math.min((time - startTime) / duration, 1)
+    // Ease out
+    const ease = 1 - Math.pow(1 - p, 3)
+
+    currentLayerRotation.value = start + (target - start) * ease
+
+    if (p < 1) {
+      requestAnimationFrame(animate)
+    } else {
+      // Animation done
+      finishMove(steps)
+    }
+  }
+  requestAnimationFrame(animate)
+}
+
+const finishMove = (steps, directionOverride = null) => {
+  if (steps !== 0 && activeLayer.value) {
+    const { axis, index } = activeLayer.value
+    const count = Math.abs(steps)
+    const direction = directionOverride !== null ? directionOverride : (steps > 0 ? 1 : -1)
+
+    pendingLogicalUpdate.value = true
+    for (let i = 0; i < count; i++) {
+      rotateLayer(axis, index, direction)
+    }
+  }
+}
+
+const movesHistory = ref([])
+const movesHistoryEl = ref(null)
+const samplePillEl = ref(null)
+const movesPerRow = ref(0)
+
+const displayMoves = computed(() => {
+  const list = movesHistory.value.slice()
+
+  moveQueue.forEach((q, idx) => {
+    const stepsMod = ((q.steps % 4) + 4) % 4
+    if (stepsMod === 0) return
+
+    let modifier = ''
+    if (stepsMod === 1) modifier = "'"
+    else if (stepsMod === 2) modifier = '2'
+    else if (stepsMod === 3) modifier = ''
+
+    const baseLabel = q.displayBase || q.base
+    const label = baseLabel + (modifier === "'" ? "'" : modifier === '2' ? '2' : '')
+
+    list.push({
+      id: `q-${idx}`,
+      label,
+      status: 'pending'
+    })
+  })
+
+  return list
+})
+
+const moveRows = computed(() => {
+  const perRow = movesPerRow.value || displayMoves.value.length || 1
+  const rows = []
+  const all = displayMoves.value
+  for (let i = 0; i < all.length; i += perRow) {
+    rows.push(all.slice(i, i + perRow))
+  }
+  return rows
+})
+
+const copyQueueToClipboard = async () => {
+  if (!displayMoves.value.length) return
+  const text = displayMoves.value.map(m => m.label).join(' ')
+  try {
+    if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(text)
+    } else {
+      const textarea = document.createElement('textarea')
+      textarea.value = text
+      textarea.style.position = 'fixed'
+      textarea.style.opacity = '0'
+      document.body.appendChild(textarea)
+      textarea.focus()
+      textarea.select()
+      try {
+        document.execCommand('copy')
+      } finally {
+        document.body.removeChild(textarea)
+      }
+    }
+  } catch (e) {
+  }
+}
+
+const setSamplePill = (el) => {
+  if (el && !samplePillEl.value) {
+    samplePillEl.value = el
+  }
+}
+
+const recalcMovesLayout = () => {
+  const container = movesHistoryEl.value
+  const pill = samplePillEl.value
+  if (!container || !pill) return
+
+  const containerWidth = container.clientWidth
+  const pillWidth = pill.offsetWidth
+  if (pillWidth <= 0) return
+
+  const totalWidth = (cols) => {
+    if (cols <= 0) return 0
+    if (cols === 1) return pillWidth
+    return cols * pillWidth + (cols - 1) * MIN_MOVES_COLUMN_GAP
+  }
+
+  let cols = Math.floor((containerWidth + MIN_MOVES_COLUMN_GAP) / (pillWidth + MIN_MOVES_COLUMN_GAP))
+  if (cols < 1) cols = 1
+  while (cols > 1 && totalWidth(cols) > containerWidth) {
+    cols -= 1
+  }
+
+  let gap = 0
+  if (cols > 1) {
+    gap = (containerWidth - cols * pillWidth) / (cols - 1)
+  }
+
+  movesPerRow.value = cols
+  movesColumnGap.value = gap
+}
+
+const resetQueue = () => {
+  moveQueue.length = 0
+  movesHistory.value = []
+  currentMoveId.value = null
+  nextTick(recalcMovesLayout)
+}
+
+const getCubieStyle = (c) => {
+  // Base Position
+  const x = c.x * (SCALE + GAP)
+  const y = c.y * -(SCALE + GAP) // Y is up in logic, down in CSS
+  const z = c.z * (SCALE + GAP)
+
+  let transform = `translate3d(${x}px, ${y}px, ${z}px)`
+
+  // Apply Active Layer Rotation
+  if (activeLayer.value) {
+    const { axis, index } = activeLayer.value
+    let match = false
+    // Match based on CURRENT LOGICAL POSITION
+    if (axis === 'x' && c.x === index) match = true
+    if (axis === 'y' && c.y === index) match = true
+    if (axis === 'z' && c.z === index) match = true
+
+    if (match) {
+      // Rotation Group around Center (0,0,0)
+      let rot = currentLayerRotation.value
+
+      // Axis mapping for CSS
+      // If we rotate a group around center, we want standard rotation.
+      // Logic Z=1 (Front). CSS +Z is Front.
+      // Logic Y=1 (Up). CSS -Y is Up.
+      // Logic X=1 (Right). CSS +X is Right.
+
+      // Rotations:
+      // CSS rotateX: + is Top->Back.
+      // CSS rotateY: + is Right->Back (Spin Right).
+      // CSS rotateZ: + is Top->Right (Clockwise).
+
+      if (axis === 'x') transform = `rotateX(${-rot}deg) ` + transform
+      if (axis === 'y') transform = `rotateY(${-rot}deg) ` + transform
+      if (axis === 'z') transform = `rotateZ(${rot}deg) ` + transform
+    }
+  }
+
+  return { transform }
+}
+
+const getProjectionStyle = () => ({})
+
+const moveQueue = []
+
+const dequeueMove = () => {
+  while (moveQueue.length) {
+    const next = moveQueue.shift()
+    const stepsMod = ((next.steps % 4) + 4) % 4
+    if (stepsMod === 0) continue
+
+    let modifier = ''
+    if (stepsMod === 1) modifier = "'"       // +90 (logical +1)
+    else if (stepsMod === 2) modifier = '2'  // 180 (logical -2)
+    else if (stepsMod === 3) modifier = ''   // -90 (logical -1)
+
+    return { base: next.base, modifier, displayBase: next.displayBase }
+  }
+  return null
+}
+
+const processNextMove = () => {
+  if (isAnimating.value || activeLayer.value) return
+  const next = dequeueMove()
+  if (!next) return
+
+  const baseLabel = next.displayBase || next.base
+  const label = baseLabel + (next.modifier === "'" ? "'" : next.modifier === '2' ? '2' : '')
+  const id = movesHistory.value.length
+  movesHistory.value.push({ id, label, status: 'in_progress' })
+  currentMoveId.value = id
+
+  animateProgrammaticMove(next.base, next.modifier)
+}
+
+const animateProgrammaticMove = (base, modifier) => {
+  if (isAnimating.value || activeLayer.value) return
+
+  // Map base move to axis/index (same warstwa jak przy dragowaniu)
+  let axis = 'y'
+  let index = 1
+  if (base === 'U') {
+    axis = 'y'; index = 1
+  } else if (base === 'D') {
+    axis = 'y'; index = -1
+  } else if (base === 'L') {
+    axis = 'x'; index = -1
+  } else if (base === 'R') {
+    axis = 'x'; index = 1
+  } else if (base === 'F') {
+    axis = 'z'; index = 1
+  } else if (base === 'B') {
+    axis = 'z'; index = -1
+  }
+
+  // Kierunek zgodny z RubiksJSModel.rotateLayer:
+  // dir === 1 -> ruch z apostrofem, dir === -1 -> ruch podstawowy (bez apostrofu)
+  const count = modifier === '2' ? 2 : 1
+  const direction = modifier === "'" ? 1 : -1
+
+  activeLayer.value = {
+    axis,
+    index,
+    tangent: { x: 1, y: 0 }
+  }
+  currentLayerRotation.value = 0
+  isAnimating.value = true
+
+  const logicalSteps = direction * count
+  let visualSteps = logicalSteps
+  if (axis === 'z') visualSteps = -visualSteps
+  if (base === 'U' || base === 'D') visualSteps = -visualSteps
+  const target = visualSteps * 90
+  const start = 0
+  const startTime = performance.now()
+  const duration = LAYER_ANIMATION_DURATION * count
+
+  const animate = (time) => {
+    const p = Math.min((time - startTime) / duration, 1)
+    const ease = 1 - Math.pow(1 - p, 3)
+    currentLayerRotation.value = start + (target - start) * ease
+
+    if (p < 1) {
+      requestAnimationFrame(animate)
+    } else {
+      pendingLogicalUpdate.value = true
+      for (let i = 0; i < count; i += 1) {
+        rotateLayer(axis, index, direction)
+      }
+    }
+  }
+
+  requestAnimationFrame(animate)
+}
+
+const MOVE_MAP = {
+  'U':       { base: 'U', modifier: '' },
+  'U-prime': { base: 'U', modifier: "'" },
+  'U2':      { base: 'U', modifier: '2' },
+
+  'D':       { base: 'D', modifier: "'" },
+  'D-prime': { base: 'D', modifier: '' },
+  'D2':      { base: 'D', modifier: '2' },
+
+  'L':       { base: 'B', modifier: "'" },
+  'L-prime': { base: 'B', modifier: '' },
+  'L2':      { base: 'B', modifier: '2' },
+
+  'R':       { base: 'F', modifier: '' },
+  'R-prime': { base: 'F', modifier: "'" },
+  'R2':      { base: 'F', modifier: '2' },
+
+  'F':       { base: 'L', modifier: "'" },
+  'F-prime': { base: 'L', modifier: '' },
+  'F2':      { base: 'L', modifier: '2' },
+
+  'B':       { base: 'R', modifier: '' },
+  'B-prime': { base: 'R', modifier: "'" },
+  'B2':      { base: 'R', modifier: '2' }
+}
+
+const applyMove = (move) => {
+  const mapping = MOVE_MAP[move]
+  if (!mapping) return
+
+  let delta = 0
+  if (mapping.modifier === "'") delta = 1          // logical +1
+  else if (mapping.modifier === '') delta = -1     // logical -1
+  else if (mapping.modifier === '2') delta = -2    // logical -2
+
+  const displayBase = move[0]
+
+  const last = moveQueue[moveQueue.length - 1]
+  if (last && last.base === mapping.base && last.displayBase === displayBase) {
+    last.steps += delta
+  } else {
+    moveQueue.push({ base: mapping.base, displayBase, steps: delta })
+  }
+
+  processNextMove()
+}
+
+const allMoves = Object.keys(MOVE_MAP)
+
+const scramble = () => {
+  for (let i = 0; i < 30; i += 1) {
+    const move = allMoves[Math.floor(Math.random() * allMoves.length)]
+    applyMove(move)
+  }
+}
+
+watch(cubies, () => {
+  if (!pendingLogicalUpdate.value) return
+  pendingLogicalUpdate.value = false
+
+  if (currentMoveId.value !== null) {
+    const idx = movesHistory.value.findIndex(m => m.id === currentMoveId.value)
+    if (idx !== -1) {
+      movesHistory.value[idx] = {
+        ...movesHistory.value[idx],
+        status: 'done'
+      }
+    }
+    currentMoveId.value = null
+  }
+
+  activeLayer.value = null
+  currentLayerRotation.value = 0
+  isAnimating.value = false
+  selectedCubie.value = null
+  selectedFace.value = null
+  processNextMove()
+})
+
+onMounted(() => {
+  initCube()
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', onMouseUp)
+  window.addEventListener('resize', recalcMovesLayout)
+  nextTick(recalcMovesLayout)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', onMouseMove)
+  window.removeEventListener('mouseup', onMouseUp)
+  window.removeEventListener('resize', recalcMovesLayout)
+})
+
+watch(displayMoves, () => {
+  nextTick(recalcMovesLayout)
+})
+
+</script>
+
+<template>
+  <div class="smart-cube-container">
+    <div class="scene" :style="{ transform: `rotateX(${rx}deg) rotateY(${ry}deg)` }">
+      <div class="cube">
+        <div v-for="c in cubies" :key="c.id"
+             class="cubie"
+             :style="getCubieStyle(c)"
+             :data-cubie-id="c.id">
+
+          <div v-for="(color, face) in c.faces" :key="face"
+               class="sticker"
+               :class="[face, color]"
+               :style="{ opacity: isCubeTranslucent ? 0.3 : 1 }"
+               :data-id="c.id"
+               :data-face="face">
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <div class="controls controls-left">
+      <div class="controls-row">
+        <button class="btn-neon move-btn" @click="applyMove('U')">U</button>
+        <button class="btn-neon move-btn" @click="applyMove('D')">D</button>
+        <button class="btn-neon move-btn" @click="applyMove('L')">L</button>
+      </div>
+      <div class="controls-row">
+        <button class="btn-neon move-btn" @click="applyMove('U-prime')">U'</button>
+        <button class="btn-neon move-btn" @click="applyMove('D-prime')">D'</button>
+        <button class="btn-neon move-btn" @click="applyMove('L-prime')">L'</button>
+      </div>
+      <div class="controls-row">
+        <button class="btn-neon move-btn" @click="applyMove('U2')">U2</button>
+        <button class="btn-neon move-btn" @click="applyMove('D2')">D2</button>
+        <button class="btn-neon move-btn" @click="applyMove('L2')">L2</button>
+      </div>
+    </div>
+
+    <div class="controls controls-right">
+      <div class="controls-row">
+        <button class="btn-neon move-btn" @click="applyMove('R')">R</button>
+        <button class="btn-neon move-btn" @click="applyMove('F')">F</button>
+        <button class="btn-neon move-btn" @click="applyMove('B')">B</button>
+      </div>
+      <div class="controls-row">
+        <button class="btn-neon move-btn" @click="applyMove('R-prime')">R'</button>
+        <button class="btn-neon move-btn" @click="applyMove('F-prime')">F'</button>
+        <button class="btn-neon move-btn" @click="applyMove('B-prime')">B'</button>
+      </div>
+      <div class="controls-row">
+        <button class="btn-neon move-btn" @click="applyMove('R2')">R2</button>
+        <button class="btn-neon move-btn" @click="applyMove('F2')">F2</button>
+        <button class="btn-neon move-btn" @click="applyMove('B2')">B2</button>
+      </div>
+    </div>
+
+    <button class="btn-neon move-btn scramble-btn" @click="scramble">
+      Scramble
+    </button>
+
+    <div class="moves-history">
+      <div class="moves-inner" ref="movesHistoryEl">
+        <div
+          v-for="(row, rowIndex) in moveRows"
+          :key="rowIndex"
+          class="moves-row"
+          :style="{ columnGap: movesColumnGap + 'px' }"
+        >
+          <span
+            v-for="(m, idx) in row"
+            :key="m.id"
+            class="move-pill"
+            :class="{
+              'move-pill-active': m.status === 'in_progress',
+              'move-pill-pending': m.status === 'pending'
+            }"
+            :ref="rowIndex === 0 && idx === 0 ? setSamplePill : null"
+          >
+            {{ m.label }}
+          </span>
+        </div>
+      </div>
+      <div v-if="displayMoves.length" class="moves-actions">
+        <button class="queue-action" @click="copyQueueToClipboard">copy</button>
+        <button class="queue-action" @click="resetQueue">reset</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.smart-cube-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  background: transparent; /* Use global background */
+  perspective: 1000px;
+}
+
+.scene {
+  position: relative;
+  width: 0;
+  height: 0;
+  transform-style: preserve-3d;
+}
+
+.cube {
+  position: relative;
+  transform-style: preserve-3d;
+}
+
+.cubie {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  margin-left: -50px;
+  margin-top: -50px;
+  transform-style: preserve-3d;
+}
+
+.controls {
+  position: absolute;
+  top: 96px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 50;
+}
+
+.controls-left {
+  left: 24px;
+}
+
+.controls-right {
+  right: 24px;
+}
+
+.controls-row {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.move-btn {
+  min-width: 44px;
+  height: 36px;
+  font-size: 0.9rem;
+  padding: 0 10px;
+}
+
+.scramble-btn {
+  position: absolute;
+  bottom: 72px;
+  left: 24px;
+  z-index: 50;
+}
+
+.moves-history {
+  position: absolute;
+  bottom: 72px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: calc(100vw - 360px);
+  overflow-x: hidden;
+  padding: 12px 12px 26px 12px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 8px;
+  backdrop-filter: blur(8px);
+}
+
+.moves-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.moves-row {
+  display: flex;
+}
+
+.move-pill {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  padding: 4px 8px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  font-size: 0.8rem;
+  color: #fff;
+  white-space: nowrap;
+}
+
+.move-pill-active {
+  background: #ffd500;
+  color: #000;
+  border-color: #ffd500;
+}
+
+.move-pill-pending {
+  opacity: 0.4;
+}
+
+.moves-actions {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  display: flex;
+  gap: 0px;
+}
+
+.queue-action {
+  border: none;
+  background: transparent;
+  padding: 6px 6px;
+  color: #fff;
+  font-size: 0.8rem;
+  cursor: pointer;
+}
+
+.moves-history::after {
+  content: none;
+}
+
+.queue-action:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+/* Projection Styles */
+.projections {
+  position: absolute;
+  top: 0; left: 0;
+  width: 0; height: 0;
+  pointer-events: none; /* Let clicks pass through to the cube */
+  transform-style: preserve-3d;
+}
+
+/*
+  Positioning relative to center (0,0,0).
+  Cube size is approx 300px (3 * 100px).
+  Projections are "exploded" views floating around the cube.
+*/
+
+/* Projection Groups - Exploded View Containers */
+.projection-group {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  transform-style: preserve-3d;
+  pointer-events: none;
+}
+
+.cubie-placeholder {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 0;
+  left: 0;
+  margin-top: -50px;
+  margin-left: -50px;
+  transform-style: preserve-3d;
+}
+
+.left-projection {
+  transform: translateX(-350px) translateY(0) translateZ(0) rotateY(-90deg);
+}
+
+.back-projection {
+  transform: translateX(0) translateY(-200px) translateZ(-350px) rotateY(0deg);
+}
+
+.down-projection {
+  transform: translateX(0) translateY(350px) translateZ(0) rotateX(90deg);
+}
+
+
+.sticker {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  background-color: #000; /* Black plastic base */
+  border: 1px solid #000; /* Ensure edge is solid */
+  box-shadow: 0 0 0 1px #000; /* External bleed to cover sub-pixel gaps */
+  border-radius: 2px; /* Minimal rounding for plastic edges, practically square */
+  backface-visibility: hidden; /* Hide inside faces */
+}
+
+/* Pseudo-element for the colored sticker part */
+.sticker::after {
+  content: '';
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  right: 4px;
+  bottom: 4px;
+  border-radius: 8px; /* Rounded sticker */
+  box-shadow: inset 0 0 5px rgba(0,0,0,0.3); /* Inner depth */
+  z-index: 1;
+}
+
+/* Sticker Positions relative to Cubie Center */
+.sticker.up    { transform: rotateX(90deg) translateZ(50px); }
+.sticker.down  { transform: rotateX(-90deg) translateZ(50px); }
+.sticker.front { transform: translateZ(50px); }
+.sticker.back  { transform: rotateY(180deg) translateZ(50px); }
+.sticker.left  { transform: rotateY(-90deg) translateZ(50px); }
+.sticker.right { transform: rotateY(90deg) translateZ(50px); }
+
+/* Colors - apply to the pseudo-element */
+.white::after  { background: #E0E0E0; }
+.yellow::after { background: #FFD500; }
+.green::after  { background: #009E60; }
+.blue::after   { background: #0051BA; }
+.orange::after { background: #FF5800; }
+.red::after    { background: #C41E3A; }
+
+/* Black internal faces - no sticker needed */
+.black  {
+  background: #050505;
+  border: 1px solid #000;
+  border-radius: 0;
+  display: block;
+  box-shadow: 0 0 0 1px #000; /* Fill gaps between internal faces */
+}
+.black::after {
+  display: none;
+}
+
+</style>

src/composables/useCube.js

@@ -1,42 +1,56 @@
+
 import { ref, computed } from 'vue';
-import { Cube, COLORS, FACES } from '../utils/Cube';
+import { COLORS, FACES } from '../utils/CubeModel';
+
+// Singleton worker
+const worker = new Worker(new URL('../workers/Cube.worker.js', import.meta.url), { type: 'module' });
+
+// Reactive state
+const cubies = ref([]);
+const isReady = ref(false);
+const validationResult = ref(null);
+
+worker.onmessage = (e) => {
+  const { type, payload } = e.data;
+  if (type === 'STATE_UPDATE') {
+    cubies.value = payload.cubies;
+    isReady.value = true;
+  } else if (type === 'VALIDATION_RESULT') {
+    validationResult.value = payload;
+  } else if (type === 'ERROR') {
+    console.error('Worker Error:', payload);
+  }
+};
+
+// Init worker
+worker.postMessage({ type: 'INIT' });
 
 export function useCube() {
-  const cube = ref(new Cube());
-  
-  // Make cubies reactive so Vue tracks changes
-  // We can just expose the cube instance, but better to expose reactive properties
-  // Since `cube` is a ref, `cube.value.cubies` is not deeply reactive by default unless `cube.value` is reactive.
-  // But `ref` wraps the object. If we mutate properties of the object, it might not trigger.
-  // Let's rely on triggering updates manually or creating a new instance on reset.
-  // For rotation, we will force update.
-  
-  const cubies = computed(() => cube.value.cubies);
-
-  // Compute the 6-face state matrix for display/debug
-  const cubeState = computed(() => cube.value.getState());
 
   const initCube = () => {
-    cube.value.reset();
+    worker.postMessage({ type: 'RESET' });
-    triggerUpdate();
-  };
-
-  const triggerUpdate = () => {
-    // Force Vue to notice change
-    cube.value = Object.assign(Object.create(Object.getPrototypeOf(cube.value)), cube.value);
   };
 
   const rotateLayer = (axis, index, direction) => {
-    cube.value.rotateLayer(axis, index, direction);
+    worker.postMessage({ type: 'ROTATE_LAYER', payload: { axis, index, direction } });
-    triggerUpdate();
   };
-  
+
+  const turn = (move) => {
+    worker.postMessage({ type: 'TURN', payload: { move } });
+  };
+
+  const validate = () => {
+    worker.postMessage({ type: 'VALIDATE' });
+  };
+
   return {
-    cube,
+    cubies: computed(() => cubies.value),
-    cubies,
+    isReady: computed(() => isReady.value),
-    cubeState,
+    validationResult: computed(() => validationResult.value),
     initCube,
     rotateLayer,
+    turn,
+    validate,
     COLORS,
     FACES
   };

src/composables/useDebug.js

@@ -1,50 +0,0 @@
-
-import { reactive, watch } from 'vue'
-
-const settings = reactive({
-  viewRotation: {
-    invertX: false, // Inverts Up/Down view rotation
-    invertY: false,  // Inverts Left/Right view rotation (Drag Right -> Increase Angle -> Rotate Right)
-    speed: 0.5
-  },
-  dragMapping: {
-    // Multipliers for drag direction on faces
-    front: { x: 1, y: -1 }, // Changed x to 1
-    back: { x: 1, y: 1 },
-    right: { x: -1, y: 1 },
-    left: { x: -1, y: -1 },
-    up: { x: 1, y: 1 },
-    down: { x: -1, y: -1 }
-  },
-  physics: {
-    enabled: true,
-    tension: 200,
-    friction: 10 // Not currently used but good for future
-  }
-})
-
-// Persist to localStorage for convenience during reload
-const STORAGE_KEY = 'rubik-debug-settings-v2' // Changed key to force reset settings
-
-try {
-  const saved = localStorage.getItem(STORAGE_KEY)
-  if (saved) {
-    const parsed = JSON.parse(saved)
-    // Merge deeply? For now just top level sections
-    Object.assign(settings.viewRotation, parsed.viewRotation)
-    Object.assign(settings.dragMapping, parsed.dragMapping)
-    Object.assign(settings.physics, parsed.physics)
-  }
-} catch (e) {
-  console.warn('Failed to load debug settings', e)
-}
-
-watch(settings, (newSettings) => {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(newSettings))
-}, { deep: true })
-
-export function useDebug() {
-  return {
-    settings
-  }
-}

src/composables/useInteractionLogger.js

@@ -1,50 +0,0 @@
-
-import { ref, reactive } from 'vue'
-
-// Global state for logs so it persists across component re-mounts
-const logs = ref([])
-const isRecording = ref(true)
-const maxLogs = 500 // Limit history size
-
-export function useInteractionLogger() {
-  
-  const addLog = (type, data) => {
-    if (!isRecording.value) return
-
-    const timestamp = Date.now()
-    const logEntry = {
-      id: timestamp + Math.random().toString(36).substr(2, 9),
-      timestamp,
-      type,
-      data: JSON.parse(JSON.stringify(data)) // Deep copy to snapshot state
-    }
-
-    logs.value.push(logEntry)
-    if (logs.value.length > maxLogs) {
-      logs.value.shift()
-    }
-  }
-
-  const clearLogs = () => {
-    logs.value = []
-  }
-
-  const exportLogs = () => {
-    return JSON.stringify(logs.value, null, 2)
-  }
-
-  // Helper to format logs for LLM analysis
-  const getRecentLogsForAnalysis = (count = 50) => {
-    const recent = logs.value.slice(-count)
-    return JSON.stringify(recent, null, 2)
-  }
-
-  return {
-    logs,
-    isRecording,
-    addLog,
-    clearLogs,
-    exportLogs,
-    getRecentLogsForAnalysis
-  }
-}

src/composables/useRenderer.js

@@ -1,23 +0,0 @@
-import { ref } from 'vue';
-
-const RENDERERS = {
-  CSS: 'CSS',
-  SVG: 'SVG',
-  CANVAS: 'Canvas'
-};
-
-const activeRenderer = ref(RENDERERS.CSS);
-
-export function useRenderer() {
-  const setRenderer = (renderer) => {
-    if (Object.values(RENDERERS).includes(renderer)) {
-      activeRenderer.value = renderer;
-    }
-  };
-
-  return {
-    activeRenderer,
-    setRenderer,
-    RENDERERS
-  };
-}

src/composables/useSettings.js

@@ -0,0 +1,25 @@
+import { ref } from 'vue';
+
+let initialCubeTranslucent = false;
+try {
+  const stored = localStorage.getItem('cubeTranslucent');
+  if (stored !== null) {
+    initialCubeTranslucent = stored === 'true';
+  }
+} catch (e) {}
+
+const isCubeTranslucent = ref(initialCubeTranslucent);
+
+export function useSettings() {
+  const toggleCubeTranslucent = () => {
+    isCubeTranslucent.value = !isCubeTranslucent.value;
+    try {
+      localStorage.setItem('cubeTranslucent', String(isCubeTranslucent.value));
+    } catch (e) {}
+  };
+
+  return {
+    isCubeTranslucent,
+    toggleCubeTranslucent
+  };
+}

src/config/animationSettings.js

@@ -0,0 +1 @@
+export const LAYER_ANIMATION_DURATION = 200

src/style.css

@@ -13,9 +13,9 @@
   -moz-osx-font-smoothing: grayscale;
 
   /* --- Glassmorphism Design System (from Nonograms) --- */
-  --bg-gradient: linear-gradient(135deg, #2c3e50 0%, #000000 100%);
+  --bg-gradient: radial-gradient(circle at center, #444 0%, #000000 100%);
-  --glass-bg: rgba(255, 255, 255, 0.05);
+  --glass-bg: rgba(255, 255, 255, 0.1);
-  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-border: rgba(255, 255, 255, 0.2);
   --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
   --text-color: #ffffff;
   --text-strong: #ffffff;
@@ -25,10 +25,55 @@
   --accent-purple: #4facfe;
   --primary-accent: #00f2fe;
   --title-glow: rgba(0, 255, 255, 0.2);
+  --toggle-bg: rgba(255, 255, 255, 0.08);
+  --toggle-border: rgba(255, 255, 255, 0.2);
+  --toggle-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
   --toggle-btn-border: rgba(255, 255, 255, 0.2);
-  --panel-bg: rgba(255, 255, 255, 0.05);
+  --toggle-hover-border: #ffffff;
+  --toggle-active-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
+  --panel-bg: rgba(255, 255, 255, 0.1);
   --panel-border: rgba(255, 255, 255, 0.1);
   --panel-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  --button-bg: rgba(255, 255, 255, 0.1);
+  --button-border: rgba(255, 255, 255, 0.2);
+  --button-text: #ffffff;
+  --button-hover-bg: rgba(255, 255, 255, 0.25);
+  --button-hover-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+  --button-active-shadow: 0 0 20px rgba(79, 172, 254, 0.4);
+  --cube-edge-color: #333333;
+  --title-gradient: linear-gradient(45deg, #00f2fe, #4facfe);
+}
+
+:root[data-theme="light"] {
+  --bg-gradient: radial-gradient(circle at center, #ffffff 0%, #cccccc 100%);
+  --glass-bg: rgba(255, 255, 255, 0.75);
+  --glass-border: rgba(15, 23, 42, 0.12);
+  --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.12);
+  --text-color: #0f172a;
+  --text-strong: #0f172a;
+  --text-secondary: rgba(15, 23, 42, 0.7);
+  --text-muted: rgba(15, 23, 42, 0.6);
+  --accent-cyan: #0ea5e9;
+  --accent-purple: #6366f1;
+  --primary-accent: #0ea5e9;
+  --title-glow: rgba(14, 165, 233, 0.35);
+  --toggle-bg: rgba(255, 255, 255, 0.85);
+  --toggle-border: rgba(15, 23, 42, 0.12);
+  --toggle-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
+  --toggle-btn-border: rgba(15, 23, 42, 0.18);
+  --toggle-hover-border: rgba(15, 23, 42, 0.5);
+  --toggle-active-shadow: 0 0 12px rgba(14, 165, 233, 0.25);
+  --panel-bg: rgba(255, 255, 255, 0.7);
+  --panel-border: rgba(15, 23, 42, 0.12);
+  --panel-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
+  --button-bg: rgba(255, 255, 255, 0.85);
+  --button-border: rgba(15, 23, 42, 0.16);
+  --button-text: #0f172a;
+  --button-hover-bg: rgba(255, 255, 255, 1);
+  --button-hover-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
+  --button-active-shadow: 0 0 18px rgba(14, 165, 233, 0.25);
+  --cube-edge-color: #000000;
+  --title-gradient: linear-gradient(45deg, #0ea5e9, #6366f1);
 }
 
 a {
@@ -44,11 +89,12 @@ body {
   margin: 0;
   display: flex;
   min-width: 320px;
-  min-height: 100vh;
+  height: 100vh;
   flex-direction: column;
   background: var(--bg-gradient);
   background-attachment: fixed;
   color: var(--text-color);
+  overflow: hidden;
 }
 
 h1 {
@@ -81,7 +127,7 @@ button:focus-visible {
 
 #app {
   width: 100%;
-  min-height: 100vh;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -90,11 +136,56 @@ button:focus-visible {
 /* Glassmorphism utility class */
 .glass-panel {
   background: var(--glass-bg);
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 16px;
   border: 1px solid var(--glass-border);
   box-shadow: var(--glass-shadow);
 }
 
+/* Button Styles */
+button.btn-neon {
+  background: var(--button-bg);
+  border: 1px solid var(--button-border);
+  color: var(--button-text);
+  padding: 10px 20px;
+  font-size: 0.95rem;
+  border-radius: 30px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(4px);
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  outline: none;
+}
+
+button.btn-neon:hover {
+  background: var(--button-hover-bg);
+  transform: translateY(-2px);
+  box-shadow: var(--button-hover-shadow);
+  border-color: var(--toggle-hover-border);
+}
+
+button.btn-neon.active {
+  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
+  border-color: transparent;
+  box-shadow: var(--button-active-shadow);
+  font-weight: 700;
+  color: #fff;
+}
+
+button.btn-neon.icon-only {
+  padding: 10px;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

src/utils/Cube.js

@@ -1,500 +0,0 @@
-
-// Enum for colors
-export const COLORS = {
-  WHITE: 'white',
-  YELLOW: 'yellow',
-  ORANGE: 'orange',
-  RED: 'red',
-  GREEN: 'green',
-  BLUE: 'blue',
-  BLACK: 'black'
-};
-
-// Faces enum
-export const FACES = {
-  UP: 'up',
-  DOWN: 'down',
-  LEFT: 'left',
-  RIGHT: 'right',
-  FRONT: 'front',
-  BACK: 'back',
-};
-
-class Cubie {
-  constructor(id, x, y, z) {
-    this.id = id;
-    this.x = x;
-    this.y = y;
-    this.z = z;
-    this.faces = {
-      [FACES.UP]: COLORS.BLACK,
-      [FACES.DOWN]: COLORS.BLACK,
-      [FACES.LEFT]: COLORS.BLACK,
-      [FACES.RIGHT]: COLORS.BLACK,
-      [FACES.FRONT]: COLORS.BLACK,
-      [FACES.BACK]: COLORS.BLACK,
-    };
-
-    // Assign initial colors based on position (Solved State)
-    if (y === 1) this.faces[FACES.UP] = COLORS.WHITE;
-    if (y === -1) this.faces[FACES.DOWN] = COLORS.YELLOW;
-    if (x === -1) this.faces[FACES.LEFT] = COLORS.ORANGE;
-    if (x === 1) this.faces[FACES.RIGHT] = COLORS.RED;
-    if (z === 1) this.faces[FACES.FRONT] = COLORS.GREEN;
-    if (z === -1) this.faces[FACES.BACK] = COLORS.BLUE;
-  }
-}
-
-export class Cube {
-  constructor() {
-    this.cubies = [];
-    this.reset();
-  }
-
-  reset() {
-    this.cubies = [];
-    let id = 0;
-    for (let x = -1; x <= 1; x++) {
-      for (let y = -1; y <= 1; y++) {
-        for (let z = -1; z <= 1; z++) {
-          this.cubies.push(new Cubie(id++, x, y, z));
-        }
-      }
-    }
-  }
-
-  // Perform a standard move (U, D, L, R, F, B, M, E, S, x, y, z)
-  // Modifier: ' (prime) or 2 (double)
-  move(moveStr) {
-    let move = moveStr[0];
-    let modifier = moveStr.length > 1 ? moveStr[1] : '';
-
-    let direction = 1; // CW
-    let times = 1;
-
-    if (modifier === "'") {
-      direction = -1;
-    } else if (modifier === '2') {
-      times = 2;
-    }
-
-    // Standard Notation Mapping to (axis, index, direction)
-    // Note: Direction 1 in rotateLayer is "Positive Axis Rotation".
-    // We need to map Standard CW to Axis Direction.
-
-    // U (Up): y=1. Top face CW.
-    // Looking from Top (y+), CW is Rotation around Y (-). Wait.
-    // Right Hand Rule on Y axis: Thumb up, fingers curl CCW.
-    // So Positive Y Rotation is CCW from Top.
-    // So U (CW) is Negative Y Rotation.
-    // Let's verify _rotateCubiePosition for 'y'.
-    // dir > 0 (Pos): nx = z, nz = -x. (z, -x).
-    // (1,0) -> (0,-1). Right -> Back.
-    // Top View: Right is 3 o'clock. Back is 12 o'clock? No, Back is Up.
-    // Top View:
-    //      B (z=-1)
-    // L(x=-1)     R(x=1)
-    //      F (z=1)
-    // Right (x=1) -> Back (z=-1).
-    // This is CCW.
-    // So `direction > 0` (Positive Y) is CCW from Top.
-    // Standard U is CW. So U is `direction = -1`.
-
-    // D (Down): y=-1. Bottom face CW.
-    // Looking from Bottom (y-), CW.
-    // If I look from bottom, Y axis points away.
-    // Positive Y is CCW from Top -> CW from Bottom?
-    // Let's check.
-    // Pos Y: Right -> Back.
-    // Bottom View: Right is Right. Back is "Down"?
-    // It's confusing.
-    // Let's use simple logic: D moves same direction as U' (visually from side?). No.
-    // U and D turn "same way" if you hold cube? No, opposite layers turn opposite relative to axis.
-    // D (CW) matches Y (Pos) ?
-    // Let's check movement of Front face on D.
-    // D moves Front -> Right.
-    // Y (Pos) moves Front (z=1) -> Right (x=1)?
-    // Pos Y: (0, 1) -> (1, 0). z=1 -> x=1.
-    // Yes. Front -> Right.
-    // So D (CW) = Y (Pos). `direction = 1`.
-
-    // L (Left): x=-1. Left face CW.
-    // L moves Front -> Down.
-    // X (Pos) moves Front (z=1) -> Up (y=1)?
-    // _rotateCubiePosition 'x':
-    // dir > 0: ny = -z. z=1 -> y=-1 (Down).
-    // So X (Pos) moves Front -> Down.
-    // So L (CW) = X (Pos). `direction = 1`.
-
-    // R (Right): x=1. Right face CW.
-    // R moves Front -> Up.
-    // X (Pos) moves Front -> Down.
-    // So R (CW) = X (Neg). `direction = -1`.
-
-    // F (Front): z=1. Front face CW.
-    // F moves Up -> Right.
-    // Z (Pos) moves Up (y=1) -> Left (x=-1)?
-    // _rotateCubiePosition 'z':
-    // dir > 0: nx = -y. y=1 -> x=-1 (Left).
-    // So Z (Pos) moves Up -> Left.
-    // F (CW) moves Up -> Right.
-    // So F (CW) = Z (Neg). `direction = -1`.
-    // Wait. My `rotateLayer` logic for Z was flipped in previous turn to match Visual.
-    // Let's re-read `_rotateCubieFaces` for Z.
-    // dir > 0 (CCW in Math/Pos): Left <- Up. Up moves to Left.
-    // So Pos Z moves Up to Left.
-    // F (CW) needs Up to Right.
-    // So F (CW) is Neg Z. `direction = -1`.
-
-    // B (Back): z=-1. Back face CW.
-    // B moves Up -> Left.
-    // Z (Pos) moves Up -> Left.
-    // So B (CW) = Z (Pos). `direction = 1`.
-
-    const layerOps = [];
-
-    switch (move) {
-      case 'U': layerOps.push({ axis: 'y', index: 1, dir: -1 }); break;
-      case 'D': layerOps.push({ axis: 'y', index: -1, dir: 1 }); break;
-      case 'L': layerOps.push({ axis: 'x', index: -1, dir: 1 }); break;
-      case 'R': layerOps.push({ axis: 'x', index: 1, dir: -1 }); break;
-      case 'F': layerOps.push({ axis: 'z', index: 1, dir: -1 }); break;
-      case 'B': layerOps.push({ axis: 'z', index: -1, dir: 1 }); break;
-
-      // Slices
-      case 'M': // Middle (between L and R), follows L direction
-        layerOps.push({ axis: 'x', index: 0, dir: 1 }); break;
-      case 'E': // Equator (between U and D), follows D direction
-        layerOps.push({ axis: 'y', index: 0, dir: 1 }); break;
-      case 'S': // Standing (between F and B), follows F direction
-        layerOps.push({ axis: 'z', index: 0, dir: -1 }); break;
-
-      // Whole Cube Rotations
-      case 'x': // Follows R
-        layerOps.push({ axis: 'x', index: -1, dir: -1 });
-        layerOps.push({ axis: 'x', index: 0, dir: -1 });
-        layerOps.push({ axis: 'x', index: 1, dir: -1 });
-        break;
-      case 'y': // Follows U
-        layerOps.push({ axis: 'y', index: -1, dir: -1 });
-        layerOps.push({ axis: 'y', index: 0, dir: -1 });
-        layerOps.push({ axis: 'y', index: 1, dir: -1 });
-        break;
-      case 'z': // Follows F
-        layerOps.push({ axis: 'z', index: -1, dir: -1 });
-        layerOps.push({ axis: 'z', index: 0, dir: -1 });
-        layerOps.push({ axis: 'z', index: 1, dir: -1 });
-        break;
-    }
-
-    // Apply operations
-    for (let i = 0; i < times; i++) {
-      layerOps.forEach(op => {
-        this.rotateLayer(op.axis, op.index, op.dir * direction);
-      });
-    }
-  }
-
-  // Rotate a layer
-  // axis: 'x', 'y', 'z'
-  // Helper: Rotate a 2D matrix
-  // direction: 1 (CW), -1 (CCW)
-  _rotateMatrix(matrix, direction) {
-    const N = matrix.length;
-    // Transpose
-    for (let i = 0; i < N; i++) {
-      for (let j = i; j < N; j++) {
-        [matrix[i][j], matrix[j][i]] = [matrix[j][i], matrix[i][j]];
-      }
-    }
-
-    // Reverse Rows (for CW) or Columns (for CCW)
-    if (direction > 0) {
-      // CW: Reverse each row
-      matrix.forEach(row => row.reverse());
-    } else {
-      // CCW: Reverse columns (or Reverse rows before transpose? No.)
-      // Transpose + Reverse Rows = CW.
-      // Transpose + Reverse Cols = CCW?
-      // Let's check:
-      // [1 2] T [1 3] RevCol [3 1] -> CCW?
-      // [3 4]   [2 4]        [4 2]
-      // 1 (0,0) -> (0,1). (Top-Left -> Top-Right). This is CW.
-      // Wait.
-      // CW: (x,y) -> (y, -x).
-      // (0,0) -> (0, 0).
-      // (1,0) -> (0, -1).
-
-      // Let's stick to standard:
-      // CW: Transpose -> Reverse Rows.
-      // CCW: Reverse Rows -> Transpose.
-
-      // Since I already transposed:
-      // To get CCW from Transpose:
-      // [1 2] T [1 3]
-      // [3 4]   [2 4]
-      // Target CCW:
-      // [2 4]
-      // [1 3]
-      // This is reversing columns of Transpose.
-      // Or reversing rows of original, then transpose.
-
-      // Since I modify in place and already transposed:
-      // I need to reverse columns.
-      // Alternatively, re-implement:
-
-      // Undo transpose for CCW case and do correct order?
-      // No, let's just reverse columns.
-       for (let i = 0; i < N; i++) {
-         for (let j = 0; j < N / 2; j++) {
-           [matrix[j][i], matrix[N - 1 - j][i]] = [matrix[N - 1 - j][i], matrix[j][i]];
-         }
-       }
-    }
-  }
-
-  // index: -1, 0, 1
-  // direction: 1 (Positive Axis), -1 (Negative Axis)
-  rotateLayer(axis, index, direction) {
-    // 1. Select cubies in the layer
-    const layerCubies = this.cubies.filter(c => c[axis] === index);
-
-    // 2. Map cubies to 3x3 Matrix based on Axis View
-    // We need a consistent mapping from (u, v) -> Matrix[row][col]
-    // such that RotateMatrix(CW) corresponds to Physical CW Rotation.
-
-    // Grid coordinates:
-    // Row: 0..2, Col: 0..2
-
-    // Mapping function: returns {row, col} for a cubie
-    // Inverse function: updates cubie coordinates from {row, col}
-
-    let mapToGrid, updateFromGrid;
-
-    if (axis === 'z') {
-      // Front (z=1): X=Right, Y=Up.
-      // Matrix: Row 0 is Top (y=1). Col 0 is Left (x=-1).
-      mapToGrid = (c) => ({ row: 1 - c.y, col: c.x + 1 });
-      updateFromGrid = (c, row, col) => { c.y = 1 - row; c.x = col - 1; };
-    } else if (axis === 'x') {
-      // Right (x=1): Y=Up, Z=Back?
-      // CW Rotation around X (Right face):
-      // Up -> Front -> Down -> Back.
-      // Matrix: Row 0 is Top (y=1).
-      // Col 0 is Front (z=1)?
-      // If Col 0 is Front, Col 2 is Back (z=-1).
-      // Let's check CW:
-      // Top (y=1) -> Front (z=1).
-      // Matrix (0, ?) -> (?, 0).
-      // (0, 1) [Top-Center] -> (1, 0) [Front-Center].
-      // Row 0 -> Col 0. (Transpose).
-      // Then Reverse Rows?
-      // (0, 1) -> (1, 0).
-      // (0, 0) [Top-Front] -> (0, 0) [Front-Top]? No.
-      // Top-Front (y=1, z=1).
-      // Rot X CW: (y, z) -> (-z, y).
-      // (1, 1) -> (-1, 1). (Back-Top).
-      // Wait.
-      // Rot X CW:
-      // Y->Z->-Y->-Z.
-      // Up(y=1) -> Front(z=1)? No.
-      // Standard Axis Rotation (Right Hand Rule):
-      // Thumb +X. Fingers Y -> Z.
-      // So Y axis moves towards Z axis.
-      // (0, 1, 0) -> (0, 0, 1).
-      // Up -> Front.
-      // So Top (y=1) moves to Front (z=1).
-
-      // Let's map:
-      // Row 0 (Top, y=1). Row 2 (Bottom, y=-1).
-      // Col 0 (Front, z=1). Col 2 (Back, z=-1).
-      mapToGrid = (c) => ({ row: 1 - c.y, col: 1 - c.z });
-      updateFromGrid = (c, row, col) => { c.y = 1 - row; c.z = 1 - col; };
-    } else if (axis === 'y') {
-      // Up (y=1): Z=Back, X=Right.
-      // Rot Y CW:
-      // Z -> X.
-      // Back (z=-1) -> Right (x=1).
-      // Matrix: Row 0 (Back, z=-1). Row 2 (Front, z=1).
-      // Col 0 (Left, x=-1). Col 2 (Right, x=1).
-      mapToGrid = (c) => ({ row: c.z + 1, col: c.x + 1 });
-      updateFromGrid = (c, row, col) => { c.z = row - 1; c.x = col - 1; };
-    }
-
-    // 3. Create Matrix
-    const matrix = Array(3).fill(null).map(() => Array(3).fill(null));
-    layerCubies.forEach(c => {
-      const { row, col } = mapToGrid(c);
-      matrix[row][col] = c;
-    });
-
-    // 4. Rotate Matrix
-    // Note: Direction 1 is Physical CW (CCW in Math).
-    // Mapping analysis shows that for all axes (X, Y, Z),
-    // Physical CW corresponds to Matrix CW.
-    // However, rotateLayer receives direction -1 for CW (from move() notation).
-    // _rotateMatrix expects direction 1 for CW.
-    // So we must invert the direction for all axes.
-
-    const matrixDirection = -direction;
-    this._rotateMatrix(matrix, matrixDirection);
-
-    // 5. Update Cubie Coordinates
-    for (let r = 0; r < 3; r++) {
-      for (let c = 0; c < 3; c++) {
-        const cubie = matrix[r][c];
-        if (cubie) {
-          updateFromGrid(cubie, r, c);
-        }
-      }
-    }
-
-    // 6. Rotate Faces of each cubie
-    layerCubies.forEach(cubie => {
-      this._rotateCubieFaces(cubie, axis, direction);
-    });
-  }
-
-  _rotateCubieFaces(cubie, axis, direction) {
-    const f = { ...cubie.faces };
-
-    // Helper to swap faces
-    // We map: newFace <- oldFace
-
-    // Axis X Rotation (Right/Left)
-    // CW (dir > 0): Up -> Front -> Down -> Back -> Up
-    if (axis === 'x') {
-      if (direction > 0) {
-        // Corrected cycle for +X rotation:
-        // Up face moves to Front face
-        // Front face moves to Down face
-        // Down face moves to Back face
-        // Back face moves to Up face
-        cubie.faces[FACES.FRONT] = f[FACES.UP];
-        cubie.faces[FACES.DOWN] = f[FACES.FRONT];
-        cubie.faces[FACES.BACK] = f[FACES.DOWN];
-        cubie.faces[FACES.UP] = f[FACES.BACK];
-      } else {
-        // Reverse cycle for -X
-        cubie.faces[FACES.UP] = f[FACES.FRONT];
-        cubie.faces[FACES.FRONT] = f[FACES.DOWN];
-        cubie.faces[FACES.DOWN] = f[FACES.BACK];
-        cubie.faces[FACES.BACK] = f[FACES.UP];
-      }
-    }
-
-    // Axis Y Rotation (Up/Down)
-    // CW (dir > 0): Front -> Right -> Back -> Left -> Front
-    // Front -> Right, Right -> Back, Back -> Left, Left -> Front
-    if (axis === 'y') {
-      if (direction > 0) {
-        cubie.faces[FACES.RIGHT] = f[FACES.FRONT];
-        cubie.faces[FACES.BACK] = f[FACES.RIGHT];
-        cubie.faces[FACES.LEFT] = f[FACES.BACK];
-        cubie.faces[FACES.FRONT] = f[FACES.LEFT];
-      } else {
-        cubie.faces[FACES.LEFT] = f[FACES.FRONT];
-        cubie.faces[FACES.BACK] = f[FACES.LEFT];
-        cubie.faces[FACES.RIGHT] = f[FACES.BACK];
-        cubie.faces[FACES.FRONT] = f[FACES.RIGHT];
-      }
-    }
-
-    // Axis Z Rotation (Front/Back)
-    // CW (dir > 0) in Math is CCW visually: Top -> Left -> Bottom -> Right -> Top
-    if (axis === 'z') {
-      if (direction > 0) {
-        // CCW
-        cubie.faces[FACES.LEFT] = f[FACES.UP];
-        cubie.faces[FACES.DOWN] = f[FACES.LEFT];
-        cubie.faces[FACES.RIGHT] = f[FACES.DOWN];
-        cubie.faces[FACES.UP] = f[FACES.RIGHT];
-      } else {
-        // CW
-        cubie.faces[FACES.RIGHT] = f[FACES.UP];
-        cubie.faces[FACES.DOWN] = f[FACES.RIGHT];
-        cubie.faces[FACES.LEFT] = f[FACES.DOWN];
-        cubie.faces[FACES.UP] = f[FACES.LEFT];
-      }
-    }
-  }
-
-  // Get current state as standard 6-face matrices (for display/export)
-  getState() {
-    const state = {
-      [FACES.UP]: [[],[],[]],
-      [FACES.DOWN]: [[],[],[]],
-      [FACES.LEFT]: [[],[],[]],
-      [FACES.RIGHT]: [[],[],[]],
-      [FACES.FRONT]: [[],[],[]],
-      [FACES.BACK]: [[],[],[]]
-    };
-
-    this.cubies.forEach(c => {
-      // Map x,y,z to matrix indices
-
-      // UP: y=1. row = z (-1->0, 0->1, 1->2)?
-      // In `CubeCSS` I reversed this logic to match `Cube.js`.
-      // Let's stick to standard visual mapping.
-      // UP Face (Top View):
-      // Row 0 is Back (z=-1). Row 2 is Front (z=1).
-      // Col 0 is Left (x=-1). Col 2 is Right (x=1).
-      if (c.y === 1) {
-        const row = c.z + 1;
-        const col = c.x + 1;
-        state[FACES.UP][row][col] = c.faces[FACES.UP];
-      }
-
-      // DOWN Face (Bottom View):
-      // Usually "unfolded". Top of Down face is Front (z=1).
-      // Row 0 is Front (z=1). Row 2 is Back (z=-1).
-      // Col 0 is Left (x=-1). Col 2 is Right (x=1).
-      if (c.y === -1) {
-        const row = 1 - c.z;
-        const col = c.x + 1;
-        state[FACES.DOWN][row][col] = c.faces[FACES.DOWN];
-      }
-
-      // FRONT Face (z=1):
-      // Row 0 is Top (y=1). Row 2 is Bottom (y=-1).
-      // Col 0 is Left (x=-1). Col 2 is Right (x=1).
-      if (c.z === 1) {
-        const row = 1 - c.y;
-        const col = c.x + 1;
-        state[FACES.FRONT][row][col] = c.faces[FACES.FRONT];
-      }
-
-      // BACK Face (z=-1):
-      // Viewed from Back.
-      // Row 0 is Top (y=1).
-      // Col 0 is Right (x=1) (Viewer's Left). Col 2 is Left (x=-1).
-      if (c.z === -1) {
-        const row = 1 - c.y;
-        const col = 1 - c.x;
-        state[FACES.BACK][row][col] = c.faces[FACES.BACK];
-      }
-
-      // LEFT Face (x=-1):
-      // Viewed from Left.
-      // Row 0 is Top (y=1).
-      // Col 0 is Back (z=-1). Col 2 is Front (z=1).
-      if (c.x === -1) {
-        const row = 1 - c.y;
-        const col = c.z + 1;
-        state[FACES.LEFT][row][col] = c.faces[FACES.LEFT];
-      }
-
-      // RIGHT Face (x=1):
-      // Viewed from Right.
-      // Row 0 is Top (y=1).
-      // Col 0 is Front (z=1). Col 2 is Back (z=-1).
-      if (c.x === 1) {
-        const row = 1 - c.y;
-        const col = 1 - c.z;
-        state[FACES.RIGHT][row][col] = c.faces[FACES.RIGHT];
-      }
-    });
-
-    return state;
-  }
-}

src/utils/CubeModel.js

@@ -0,0 +1,345 @@
+/**
+ * Dedicated 3x3x3 Rubik's Cube Model
+ *
+ * Representation:
+ * A collection of 27 Cubie objects, each with position (x, y, z) and face colors.
+ * Coordinate System:
+ * x: Left (-1) to Right (1)
+ * y: Bottom (-1) to Top (1)
+ * z: Back (-1) to Front (1)
+ *
+ * This logical model maintains the state of the cube and handles rotations.
+ */
+
+export const COLORS = {
+  WHITE: 'white',
+  YELLOW: 'yellow',
+  ORANGE: 'orange',
+  RED: 'red',
+  GREEN: 'green',
+  BLUE: 'blue',
+  BLACK: 'black'
+};
+
+export const FACES = {
+  UP: 'up',
+  DOWN: 'down',
+  LEFT: 'left',
+  RIGHT: 'right',
+  FRONT: 'front',
+  BACK: 'back',
+};
+
+// Standard Face Colors (Solved State)
+const SOLVED_COLORS = {
+  [FACES.UP]: COLORS.WHITE,
+  [FACES.DOWN]: COLORS.YELLOW,
+  [FACES.LEFT]: COLORS.ORANGE,
+  [FACES.RIGHT]: COLORS.RED,
+  [FACES.FRONT]: COLORS.GREEN,
+  [FACES.BACK]: COLORS.BLUE,
+};
+
+class Cubie {
+  constructor(id, x, y, z) {
+    this.id = id;
+    this.x = x;
+    this.y = y;
+    this.z = z;
+    this.faces = {
+      [FACES.UP]: COLORS.BLACK,
+      [FACES.DOWN]: COLORS.BLACK,
+      [FACES.LEFT]: COLORS.BLACK,
+      [FACES.RIGHT]: COLORS.BLACK,
+      [FACES.FRONT]: COLORS.BLACK,
+      [FACES.BACK]: COLORS.BLACK,
+    };
+    this.initColors();
+  }
+
+  // Set initial colors based on position in solved state
+  initColors() {
+    if (this.y === 1) this.faces[FACES.UP] = SOLVED_COLORS[FACES.UP];
+    if (this.y === -1) this.faces[FACES.DOWN] = SOLVED_COLORS[FACES.DOWN];
+    if (this.x === -1) this.faces[FACES.LEFT] = SOLVED_COLORS[FACES.LEFT];
+    if (this.x === 1) this.faces[FACES.RIGHT] = SOLVED_COLORS[FACES.RIGHT];
+    if (this.z === 1) this.faces[FACES.FRONT] = SOLVED_COLORS[FACES.FRONT];
+    if (this.z === -1) this.faces[FACES.BACK] = SOLVED_COLORS[FACES.BACK];
+  }
+}
+
+export class CubeModel {
+  constructor() {
+    this.size = 3;
+    this.cubies = [];
+    this.init();
+  }
+
+  init() {
+    this.cubies = [];
+    let id = 0;
+    for (let x = -1; x <= 1; x++) {
+      for (let y = -1; y <= 1; y++) {
+        for (let z = -1; z <= 1; z++) {
+          this.cubies.push(new Cubie(id++, x, y, z));
+        }
+      }
+    }
+  }
+
+  reset() {
+    this.init();
+  }
+
+  /**
+   * Rotates a layer around an axis.
+   * @param {string} axis - 'x', 'y', 'z'
+   * @param {number} index - -1 (Left/Bottom/Back), 0 (Middle), 1 (Right/Top/Front)
+   * @param {number} direction - 1 (CW), -1 (CCW) relative to axis positive direction
+   */
+  rotateLayer(axis, index, direction) {
+    // Determine the relevant cubies in the slice
+    const slice = this.cubies.filter(c => c[axis] === index);
+
+    // Coordinate rotation (Matrix Logic)
+    // 90 deg CW rotation formulas:
+    // X-Axis: (y, z) -> (-z, y)
+    // Y-Axis: (x, z) -> (z, -x)
+    // Z-Axis: (x, y) -> (-y, x)
+    // Note: direction 1 is usually CCW in math (right hand rule around axis).
+    // Let's verify standard:
+    // Right Hand Rule with Thumb along Axis: Fingers curl in Positive Rotation direction.
+    // X (Right): Curl from Y (Up) to Z (Front). (0,1,0)->(0,0,1).
+    // y' = -z, z' = y?
+    // Let's check (0,1): y=1, z=0 -> y'=0, z'=1. Correct.
+
+    // So if direction is 1 (Positive/CW around axis):
+    // X: y' = -z, z' = y
+    // Y: z' = -x, x' = z
+    // Z: x' = -y, y' = x
+
+    // If direction is -1: Inverse.
+
+    slice.forEach(cubie => {
+      this._rotateCubieCoordinates(cubie, axis, direction);
+      this._rotateCubieFaces(cubie, axis, direction);
+    });
+  }
+
+  _rotateCubieCoordinates(cubie, axis, direction) {
+    const { x, y, z } = cubie;
+
+    if (axis === 'x') {
+      if (direction === 1) {
+        cubie.y = -z;
+        cubie.z = y;
+      } else {
+        cubie.y = z;
+        cubie.z = -y;
+      }
+    } else if (axis === 'y') {
+      if (direction === 1) {
+        cubie.z = -x;
+        cubie.x = z;
+      } else {
+        cubie.z = x;
+        cubie.x = -z;
+      }
+    } else if (axis === 'z') {
+      if (direction === 1) { // CW
+        cubie.x = -y;
+        cubie.y = x;
+      } else { // CCW
+        cubie.x = y;
+        cubie.y = -x;
+      }
+    }
+  }
+
+  _rotateCubieFaces(cubie, axis, direction) {
+    // When a cubie rotates, its faces move to new positions.
+    // We swap the COLORS on the faces.
+    // Example: Rotate X (Roll Forward). Up Face becomes Front Face.
+    // So new Front Color = old Up Color.
+    // cubie.faces[FRONT] = old_faces[UP]
+
+    const f = { ...cubie.faces };
+
+    if (axis === 'x') {
+      if (direction === 1) { // Up -> Front -> Down -> Back -> Up
+        cubie.faces[FACES.FRONT] = f[FACES.UP];
+        cubie.faces[FACES.DOWN] = f[FACES.FRONT];
+        cubie.faces[FACES.BACK] = f[FACES.DOWN];
+        cubie.faces[FACES.UP] = f[FACES.BACK];
+        // Left/Right unchanged in position, but might rotate? No, faces are solid colors.
+      } else { // Up -> Back -> Down -> Front -> Up
+        cubie.faces[FACES.BACK] = f[FACES.UP];
+        cubie.faces[FACES.DOWN] = f[FACES.BACK];
+        cubie.faces[FACES.FRONT] = f[FACES.DOWN];
+        cubie.faces[FACES.UP] = f[FACES.FRONT];
+      }
+    } else if (axis === 'y') {
+      if (direction === 1) { // Front -> Right -> Back -> Left -> Front
+        cubie.faces[FACES.RIGHT] = f[FACES.FRONT];
+        cubie.faces[FACES.BACK] = f[FACES.RIGHT];
+        cubie.faces[FACES.LEFT] = f[FACES.BACK];
+        cubie.faces[FACES.FRONT] = f[FACES.LEFT];
+      } else { // Front -> Left -> Back -> Right -> Front
+        cubie.faces[FACES.LEFT] = f[FACES.FRONT];
+        cubie.faces[FACES.BACK] = f[FACES.LEFT];
+        cubie.faces[FACES.RIGHT] = f[FACES.BACK];
+        cubie.faces[FACES.FRONT] = f[FACES.RIGHT];
+      }
+    } else if (axis === 'z') {
+      if (direction === 1) { // CCW: Up -> Left -> Down -> Right -> Up
+        cubie.faces[FACES.LEFT] = f[FACES.UP];
+        cubie.faces[FACES.DOWN] = f[FACES.LEFT];
+        cubie.faces[FACES.RIGHT] = f[FACES.DOWN];
+        cubie.faces[FACES.UP] = f[FACES.RIGHT];
+      } else { // CW: Up -> Right -> Down -> Left -> Up
+        cubie.faces[FACES.RIGHT] = f[FACES.UP];
+        cubie.faces[FACES.DOWN] = f[FACES.RIGHT];
+        cubie.faces[FACES.LEFT] = f[FACES.DOWN];
+        cubie.faces[FACES.UP] = f[FACES.LEFT];
+      }
+    }
+  }
+
+  toCubies() {
+    // Return copy of state for rendering
+    // CubeCSS expects array of objects with x, y, z, faces
+    return this.cubies.map(c => ({
+      id: c.id,
+      x: c.x,
+      y: c.y,
+      z: c.z,
+      faces: { ...c.faces }
+    }));
+  }
+
+  /**
+   * Applies a standard Rubik's Cube move
+   * @param {string} move - e.g. "U", "R'", "F2"
+   */
+  applyMove(move) {
+    const base = move[0];
+    const modifier = move.substring(1);
+    let direction = -1; // Standard CW is -1 for U, L, F, B? Let's check.
+    // Direction Mapping based on rotateLayer Math:
+    // X(1) = CW (Up->Front)
+    // Y(1) = CW (Right->Front)
+    // Z(1) = CCW (Right->Up)
+
+    // R (CW around X): 1
+    // L (CW around -X): -1
+    // U (CW around Y): 1
+    // D (CW around -Y): -1
+    // F (CW around Z): -1 (since Z(1) is CCW)
+    // B (CW around -Z): 1 (since Z(1) is CW around -Z)
+
+    switch (base) {
+      case 'U': direction = 1; break;
+      case 'D': direction = -1; break;
+      case 'L': direction = -1; break;
+      case 'R': direction = 1; break;
+      case 'F': direction = -1; break;
+      case 'B': direction = 1; break;
+    }
+
+    if (modifier === "'") direction *= -1;
+    if (modifier === '2') {
+      // 2 moves. Direction doesn't matter for 180, but let's keep it.
+      // We will call rotateLayer twice.
+    }
+
+    const count = modifier === '2' ? 2 : 1;
+
+    for (let i = 0; i < count; i++) {
+      switch (base) {
+        case 'U': this.rotateLayer('y', 1, direction); break;
+        case 'D': this.rotateLayer('y', -1, direction); break;
+        case 'L': this.rotateLayer('x', -1, direction); break;
+        case 'R': this.rotateLayer('x', 1, direction); break;
+        case 'F': this.rotateLayer('z', 1, direction); break;
+        case 'B': this.rotateLayer('z', -1, direction); break;
+      }
+    }
+  }
+
+  // Debug printer for tests
+  toString() {
+    let out = "Cube State (3x3x3):\n";
+    // We can print faces.
+    // Order: U, D, F, B, L, R
+    const printFace = (face, name) => {
+      out += `Face ${name}:\n`;
+      // Grid 3x3.
+      // U: y=1. x from -1 to 1. z from -1 to 1.
+      // Coordinate mapping depends on face.
+      // Let's iterate standard grid rows/cols.
+      for (let r = 0; r < 3; r++) {
+        let rowStr = "";
+        for (let c = 0; c < 3; c++) {
+          let cubie;
+          // Map r,c to x,y,z based on face
+          if (face === FACES.UP) { // y=1. r=0->z=-1 (Back), r=2->z=1 (Front). c=0->x=-1 (Left).
+            // Standard U face view: Top Left is Back Left (-1, 1, -1).
+            // Row 0 (Top of U face) is Back.
+            // Row 2 (Bottom of U face) is Front.
+            cubie = this.cubies.find(cu => cu.y === 1 && cu.x === (c - 1) && cu.z === (r - 1)); // Wait.
+            // Back is z=-1. Front is z=1.
+            // Visual Top of U face is Back (z=-1).
+            // Visual Bottom of U face is Front (z=1).
+            cubie = this.cubies.find(cu => cu.y === 1 && cu.x === (c - 1) && cu.z === (r - 1 - 2 * r)); // Complicated.
+            // Let's just find by strict coordinates
+            // r=0 -> z=-1. r=1 -> z=0. r=2 -> z=1.
+            // c=0 -> x=-1. c=1 -> x=0. c=2 -> x=1.
+            cubie = this.cubies.find(cu => cu.y === 1 && cu.x === (c - 1) && cu.z === (r - 1));
+          }
+          else if (face === FACES.DOWN) cubie = this.cubies.find(cu => cu.y === -1 && cu.x === (c - 1) && cu.z === (1 - r)); // Down View?
+          else if (face === FACES.FRONT) cubie = this.cubies.find(cu => cu.z === 1 && cu.x === (c - 1) && cu.y === (1 - r));
+          else if (face === FACES.BACK) cubie = this.cubies.find(cu => cu.z === -1 && cu.x === (1 - c) && cu.y === (1 - r));
+          else if (face === FACES.LEFT) cubie = this.cubies.find(cu => cu.x === -1 && cu.z === (1 - c) && cu.y === (1 - r)); // Left view z order?
+          else if (face === FACES.RIGHT) cubie = this.cubies.find(cu => cu.x === 1 && cu.z === (c - 1) && cu.y === (1 - r));
+
+          if (cubie) {
+            rowStr += cubie.faces[face][0].toUpperCase() + " ";
+          } else {
+            rowStr += "? ";
+          }
+        }
+        out += rowStr + "\n";
+      }
+      out += "\n";
+    };
+
+    printFace(FACES.UP, 'U');
+    printFace(FACES.DOWN, 'D');
+    printFace(FACES.FRONT, 'F');
+    printFace(FACES.BACK, 'B');
+    printFace(FACES.LEFT, 'L');
+    printFace(FACES.RIGHT, 'R');
+    return out;
+  }
+  scramble(n = 20) {
+    const axes = ['x', 'y', 'z'];
+    const indices = [-1, 1]; // Usually rotate outer layers for scramble
+    // Actually, scrambling usually involves random face moves (U, D, L, R, F, B)
+    // U: y=1, dir -1 (Standard CW)
+    // D: y=-1, dir 1
+    // L: x=-1, dir -1
+    // R: x=1, dir 1
+    // F: z=1, dir 1
+    // B: z=-1, dir -1
+
+    // We can just generate random rotateLayer calls
+
+    for (let i = 0; i < n; i++) {
+      const axis = axes[Math.floor(Math.random() * axes.length)];
+      // Allow middle layer? Standard Scramble usually doesnt.
+      const index = indices[Math.floor(Math.random() * indices.length)];
+      const dir = Math.random() > 0.5 ? 1 : -1;
+      this.rotateLayer(axis, index, dir);
+    }
+  }
+}

src/utils/Matrix4.js

@@ -1,112 +0,0 @@
-export class Matrix4 {
-  constructor() {
-    this.elements = [
-      1, 0, 0, 0,
-      0, 1, 0, 0,
-      0, 0, 1, 0,
-      0, 0, 0, 1
-    ];
-  }
-
-  static identity() {
-    return new Matrix4();
-  }
-
-  multiply(other) {
-    const a = this.elements;
-    const b = other.elements;
-    const result = new Matrix4();
-    const r = result.elements;
-
-    // a is row-major? No, CSS matrix3d is column-major.
-    // Let's stick to column-major as per WebGL/CSS standard.
-    // r[0] = a[0]*b[0] + a[4]*b[1] + a[8]*b[2] + a[12]*b[3] ...
-    
-    for (let i = 0; i < 4; i++) { // Column of B
-      for (let j = 0; j < 4; j++) { // Row of A
-        let sum = 0;
-        for (let k = 0; k < 4; k++) {
-          sum += a[j + k * 4] * b[i * 4 + k]; // Correct for column-major storage
-        }
-        r[j + i * 4] = sum;
-      }
-    }
-    return result;
-  }
-  
-  // Multiply this * other
-  multiplySelf(other) {
-    this.elements = this.multiply(other).elements;
-    return this;
-  }
-  
-  // Multiply other * this (pre-multiply)
-  premultiply(other) {
-    this.elements = other.multiply(this).elements;
-    return this;
-  }
-
-  static translation(x, y, z) {
-    const m = new Matrix4();
-    m.elements[12] = x;
-    m.elements[13] = y;
-    m.elements[14] = z;
-    return m;
-  }
-
-  static rotationX(angleRad) {
-    const m = new Matrix4();
-    const c = Math.cos(angleRad);
-    const s = Math.sin(angleRad);
-    m.elements[5] = c;
-    m.elements[6] = s;
-    m.elements[9] = -s;
-    m.elements[10] = c;
-    return m;
-  }
-
-  static rotationY(angleRad) {
-    const m = new Matrix4();
-    const c = Math.cos(angleRad);
-    const s = Math.sin(angleRad);
-    m.elements[0] = c;
-    m.elements[2] = -s;
-    m.elements[8] = s;
-    m.elements[10] = c;
-    return m;
-  }
-
-  static rotationZ(angleRad) {
-    const m = new Matrix4();
-    const c = Math.cos(angleRad);
-    const s = Math.sin(angleRad);
-    m.elements[0] = c;
-    m.elements[1] = s;
-    m.elements[4] = -s;
-    m.elements[5] = c;
-    return m;
-  }
-  
-  translate(x, y, z) {
-    return this.multiplySelf(Matrix4.translation(x, y, z));
-  }
-  
-  rotateX(deg) {
-    return this.multiplySelf(Matrix4.rotationX(deg * Math.PI / 180));
-  }
-  
-  rotateY(deg) {
-    return this.multiplySelf(Matrix4.rotationY(deg * Math.PI / 180));
-  }
-  
-  rotateZ(deg) {
-    return this.multiplySelf(Matrix4.rotationZ(deg * Math.PI / 180));
-  }
-
-  toCSS() {
-    // CSS matrix3d takes comma-separated values
-    // Round to avoid scientific notation like 1e-15 which CSS hates
-    const rounded = this.elements.map(v => Math.abs(v) < 1e-10 ? 0 : v);
-    return `matrix3d(${rounded.join(',')})`;
-  }
-}

src/utils/RubiksJSModel.js

@@ -0,0 +1,172 @@
+import { State } from 'rubiks-js/src/state/index.js';
+import { CubeModel } from './CubeModel.js';
+
+// Static order definitions from rubiks-js source
+const CORNER_ORDER = ['URF', 'ULF', 'ULB', 'URB', 'DRF', 'DLF', 'DLB', 'DRB'];
+const EDGE_ORDER = ['UF', 'UL', 'UB', 'UR', 'FR', 'FL', 'BL', 'BR', 'DF', 'DL', 'DB', 'DR'];
+
+// Coordinate mapping for visualization
+// Coordinates match the visual grid positions
+const CORNER_SLOTS = [
+    { id: 'URF', x: 1, y: 1, z: 1 },
+    { id: 'ULF', x: -1, y: 1, z: 1 },
+    { id: 'ULB', x: -1, y: 1, z: -1 },
+    { id: 'URB', x: 1, y: 1, z: -1 },
+    { id: 'DRF', x: 1, y: -1, z: 1 },
+    { id: 'DLF', x: -1, y: -1, z: 1 },
+    { id: 'DLB', x: -1, y: -1, z: -1 },
+    { id: 'DRB', x: 1, y: -1, z: -1 }
+];
+
+const EDGE_SLOTS = [
+    { id: 'UF', x: 0, y: 1, z: 1 },
+    { id: 'UL', x: -1, y: 1, z: 0 },
+    { id: 'UB', x: 0, y: 1, z: -1 },
+    { id: 'UR', x: 1, y: 1, z: 0 },
+    { id: 'FR', x: 1, y: 0, z: 1 },
+    { id: 'FL', x: -1, y: 0, z: 1 },
+    { id: 'BL', x: -1, y: 0, z: -1 },
+    { id: 'BR', x: 1, y: 0, z: -1 },
+    { id: 'DF', x: 0, y: -1, z: 1 },
+    { id: 'DL', x: -1, y: -1, z: 0 },
+    { id: 'DB', x: 0, y: -1, z: -1 },
+    { id: 'DR', x: 1, y: -1, z: 0 }
+];
+
+const CENTERS = [
+    { id: 'c0', x: 0, y: 1, z: 0, faces: { up: 'white' } },
+    { id: 'c1', x: 0, y: -1, z: 0, faces: { down: 'yellow' } },
+    { id: 'c2', x: 0, y: 0, z: 1, faces: { front: 'green' } },
+    { id: 'c3', x: 0, y: 0, z: -1, faces: { back: 'blue' } },
+    { id: 'c4', x: -1, y: 0, z: 0, faces: { left: 'orange' } },
+    { id: 'c5', x: 1, y: 0, z: 0, faces: { right: 'red' } },
+    { id: 'core', x: 0, y: 0, z: 0, faces: {} }
+];
+
+// Face mapping for pieces
+// Each piece (e.g. URF) has 3 faces. We need to map them to colors based on orientation.
+// Standard color scheme: U=white, D=yellow, F=green, B=blue, L=orange, R=red
+const FACE_COLORS = {
+    U: 'white', D: 'yellow', F: 'green', B: 'blue', L: 'orange', R: 'red'
+};
+
+// Map piece name (e.g. 'URF') to its primary face keys
+const CORNER_FACES = {
+    'URF': ['up', 'right', 'front'],
+    'ULF': ['up', 'front', 'left'],
+    'ULB': ['up', 'left', 'back'],
+    'URB': ['up', 'back', 'right'],
+    'DRF': ['down', 'right', 'front'],
+    'DLF': ['down', 'left', 'front'],
+    'DLB': ['down', 'back', 'left'],
+    'DRB': ['down', 'right', 'back']
+};
+
+const EDGE_FACES = {
+    'UF': ['up', 'front'],
+    'UL': ['up', 'left'],
+    'UB': ['up', 'back'],
+    'UR': ['up', 'right'],
+    'FR': ['front', 'right'],
+    'FL': ['front', 'left'],
+    'BL': ['back', 'left'],
+    'BR': ['back', 'right'],
+    'DF': ['down', 'front'],
+    'DL': ['down', 'left'],
+    'DB': ['down', 'back'],
+    'DR': ['down', 'right']
+};
+
+// Map piece name to its solved colors
+const getCornerColors = (name) => {
+    // URF -> white, red, green
+    const map = {
+        'URF': ['white', 'red', 'green'],
+        'ULF': ['white', 'green', 'orange'],
+        'ULB': ['white', 'orange', 'blue'],
+        'URB': ['white', 'blue', 'red'],
+        'DRF': ['yellow', 'red', 'green'],
+        'DLF': ['yellow', 'orange', 'green'], // Adjusted to match DLF face order (D, L, F)
+        'DLB': ['yellow', 'blue', 'orange'], // Adjusted to match DLB face order (D, B, L)
+        'DRB': ['yellow', 'red', 'blue']  // Adjusted to match DRB face order (D, R, B)
+    };
+    return map[name];
+};
+
+const getEdgeColors = (name) => {
+    const map = {
+        'UF': ['white', 'green'],
+        'UL': ['white', 'orange'],
+        'UB': ['white', 'blue'],
+        'UR': ['white', 'red'],
+        'FR': ['green', 'red'],
+        'FL': ['green', 'orange'],
+        'BL': ['blue', 'orange'],
+        'BR': ['blue', 'red'],
+        'DF': ['yellow', 'green'],
+        'DL': ['yellow', 'orange'],
+        'DB': ['yellow', 'blue'],
+        'DR': ['yellow', 'red']
+    };
+    return map[name];
+};
+
+export class RubiksJSModel {
+    constructor() {
+        this.state = new State(false); // trackCenters=false
+        this.visual = new CubeModel();
+    }
+
+    reset() {
+        this.state = new State(false);
+        this.visual = new CubeModel();
+    }
+
+    rotateLayer(axis, index, dir) {
+        let move = '';
+        if (axis === 'y') {
+            if (index === 1) move = dir === 1 ? "U'" : "U";
+            else if (index === -1) move = dir === 1 ? "D'" : "D";
+        }
+        else if (axis === 'x') {
+            if (index === 1) move = dir === 1 ? "R'" : "R";
+            else if (index === -1) move = dir === 1 ? "L'" : "L";
+        }
+        else if (axis === 'z') {
+            if (index === 1) move = dir === 1 ? "F'" : "F";
+            else if (index === -1) move = dir === 1 ? "B'" : "B";
+        }
+
+        if (move) {
+            console.log('[RubiksJSModel] Applying move:', move);
+            try {
+                this.state.applyTurn(move);
+                console.log('[RubiksJSModel] Move applied successfully');
+            } catch (e) {
+                console.error('[RubiksJSModel] Failed to apply move:', move, e);
+            }
+
+            this.visual.rotateLayer(axis, index, dir);
+        }
+    }
+
+    applyTurn(move) {
+        if (!move) return;
+        try {
+            this.state.applyTurn(move);
+        } catch (e) {
+            console.error('[RubiksJSModel] Failed to apply direct move:', move, e);
+        }
+
+        this.visual.applyMove(move);
+    }
+
+    toCubies() {
+        return this.visual.toCubies();
+    }
+
+    validate() {
+        // State doesn't expose validate, but we can assume it's valid if using the library
+        return { valid: true, errors: [] };
+    }
+}

src/workers/Cube.worker.js

@@ -0,0 +1,54 @@
+import { RubiksJSModel } from '../utils/RubiksJSModel.js';
+
+const cube = new RubiksJSModel();
+
+// Helper to send state update
+const sendUpdate = () => {
+  try {
+    const cubies = cube.toCubies();
+    // console.log('[Worker] Sending update with cubies:', cubies.length);
+    postMessage({
+      type: 'STATE_UPDATE',
+      payload: {
+        cubies
+      }
+    });
+  } catch (e) {
+    console.error('[Worker] Error generating cubies:', e);
+    postMessage({ type: 'ERROR', payload: e.message });
+  }
+};
+
+self.onmessage = (e) => {
+  const { type, payload } = e.data;
+
+  switch (type) {
+    case 'INIT':
+    case 'RESET':
+      cube.reset();
+      sendUpdate();
+      break;
+
+    case 'ROTATE_LAYER': {
+      const { axis, index, direction } = payload;
+      cube.rotateLayer(axis, index, direction);
+      sendUpdate();
+      break;
+    }
+
+    case 'TURN': {
+      const { move } = payload;
+      cube.applyTurn(move);
+      sendUpdate();
+      break;
+    }
+
+    case 'VALIDATE':
+      const validation = cube.validate();
+      postMessage({
+        type: 'VALIDATION_RESULT',
+        payload: { valid: validation.valid, errors: validation.errors }
+      });
+      break;
+  }
+};

test/cube_integrity.test.js

@@ -0,0 +1,161 @@
+
+import { Cube, FACES, COLORS } from '../src/utils/Cube.js';
+import assert from 'assert';
+
+console.log('Running Cube Integrity Tests...');
+
+const cube = new Cube();
+
+// Helper: Count colors on all faces
+const countColors = () => {
+  const counts = {
+    [COLORS.WHITE]: 0,
+    [COLORS.YELLOW]: 0,
+    [COLORS.ORANGE]: 0,
+    [COLORS.RED]: 0,
+    [COLORS.GREEN]: 0,
+    [COLORS.BLUE]: 0,
+    [COLORS.BLACK]: 0 // Should be ignored or internal
+  };
+
+  cube.cubies.forEach(cubie => {
+    Object.values(cubie.faces).forEach(color => {
+      if (counts[color] !== undefined) {
+        counts[color]++;
+      }
+    });
+  });
+
+  return counts;
+};
+
+// Helper: Verify solved state counts
+const verifyCounts = (counts) => {
+  // Each face has 9 stickers. 6 faces.
+  // 9 * 6 = 54 colored stickers.
+  // 27 cubies * 6 faces = 162 total faces.
+  // 162 - 54 = 108 black faces (internal).
+  
+  assert.strictEqual(counts[COLORS.WHITE], 9, 'White count should be 9');
+  assert.strictEqual(counts[COLORS.YELLOW], 9, 'Yellow count should be 9');
+  assert.strictEqual(counts[COLORS.ORANGE], 9, 'Orange count should be 9');
+  assert.strictEqual(counts[COLORS.RED], 9, 'Red count should be 9');
+  assert.strictEqual(counts[COLORS.GREEN], 9, 'Green count should be 9');
+  assert.strictEqual(counts[COLORS.BLUE], 9, 'Blue count should be 9');
+};
+
+// Helper: Verify piece integrity
+// Corners: 8 corners, each has 3 colors.
+// Edges: 12 edges, each has 2 colors.
+// Centers: 6 centers, each has 1 color.
+// Core: 1 core, 0 colors.
+const verifyPieceTypes = () => {
+  let corners = 0;
+  let edges = 0;
+  let centers = 0;
+  let cores = 0;
+
+  cube.cubies.forEach(cubie => {
+    const coloredFaces = Object.values(cubie.faces).filter(c => c !== COLORS.BLACK).length;
+    if (coloredFaces === 3) corners++;
+    else if (coloredFaces === 2) edges++;
+    else if (coloredFaces === 1) centers++;
+    else if (coloredFaces === 0) cores++;
+    else assert.fail(`Invalid cubie with ${coloredFaces} colors at (${cubie.x},${cubie.y},${cubie.z})`);
+  });
+
+  assert.strictEqual(corners, 8, 'Should have 8 corners');
+  assert.strictEqual(edges, 12, 'Should have 12 edges');
+  assert.strictEqual(centers, 6, 'Should have 6 centers');
+  assert.strictEqual(cores, 1, 'Should have 1 core');
+};
+
+// Helper: Verify specific relative positions of centers (they never change relative to each other)
+// Up (White) opposite Down (Yellow)
+// Front (Green) opposite Back (Blue)
+// Left (Orange) opposite Right (Red)
+const verifyCenters = () => {
+  const centers = cube.cubies.filter(c => 
+    Object.values(c.faces).filter(f => f !== COLORS.BLACK).length === 1
+  );
+  
+  // Find center by color
+  const findCenter = (color) => centers.find(c => Object.values(c.faces).includes(color));
+  
+  const white = findCenter(COLORS.WHITE);
+  const yellow = findCenter(COLORS.YELLOW);
+  const green = findCenter(COLORS.GREEN);
+  const blue = findCenter(COLORS.BLUE);
+  const orange = findCenter(COLORS.ORANGE);
+  const red = findCenter(COLORS.RED);
+
+  // Check opposites
+  // Distance between opposites should be 2 (e.g. y=1 and y=-1)
+  // And they should be on same axis
+  
+  // Note: After rotations, x/y/z coordinates change.
+  // But relative vectors should hold?
+  // Actually, centers DO rotate around the core.
+  // But White is always opposite Yellow.
+  // So vector(White) + vector(Yellow) == (0,0,0).
+  
+  const checkOpposite = (c1, c2, name) => {
+    assert.strictEqual(c1.x + c2.x, 0, `${name} X mismatch`);
+    assert.strictEqual(c1.y + c2.y, 0, `${name} Y mismatch`);
+    assert.strictEqual(c1.z + c2.z, 0, `${name} Z mismatch`);
+  };
+
+  checkOpposite(white, yellow, 'White-Yellow');
+  checkOpposite(green, blue, 'Green-Blue');
+  checkOpposite(orange, red, 'Orange-Red');
+};
+
+
+// --- Test Execution ---
+
+// 1. Initial State
+console.log('Test 1: Initial State Integrity');
+verifyCounts(countColors());
+verifyPieceTypes();
+verifyCenters();
+console.log('PASS Initial State');
+
+// 2. Single Rotation (R)
+console.log('Test 2: Single Rotation (R)');
+cube.rotateLayer('x', 1, -1); // R
+verifyCounts(countColors());
+verifyPieceTypes();
+verifyCenters();
+console.log('PASS Single Rotation');
+
+// 3. Multiple Rotations (R U R' U')
+console.log('Test 3: Sexy Move (R U R\' U\')');
+cube.reset();
+cube.move("R");
+cube.move("U");
+cube.move("R'");
+cube.move("U'");
+verifyCounts(countColors());
+verifyPieceTypes();
+verifyCenters();
+console.log('PASS Sexy Move');
+
+// 4. Random Rotations (Fuzzing)
+console.log('Test 4: 100 Random Moves');
+cube.reset();
+const axes = ['x', 'y', 'z'];
+const indices = [-1, 0, 1];
+const dirs = [1, -1];
+
+for (let i = 0; i < 100; i++) {
+  const axis = axes[Math.floor(Math.random() * axes.length)];
+  const index = indices[Math.floor(Math.random() * indices.length)];
+  const dir = dirs[Math.floor(Math.random() * dirs.length)];
+  cube.rotateLayer(axis, index, dir);
+}
+verifyCounts(countColors());
+verifyPieceTypes();
+verifyCenters();
+console.log('PASS 100 Random Moves');
+
+console.log('ALL INTEGRITY TESTS PASSED');

test/simulate_moves.js

@@ -0,0 +1,117 @@
+
+import { Cube, FACES, COLORS } from '../src/utils/Cube.js';
+
+// Helper to print face
+const printFace = (matrix, name) => {
+  console.log(`--- ${name} ---`);
+  matrix.forEach(row => console.log(row.map(c => c ? c[0].toUpperCase() : '-').join(' ')));
+};
+
+// Helper to check if a face matches expected color (center color)
+const checkFaceColor = (matrix, expectedColor) => {
+  return matrix.every(row => row.every(c => c === expectedColor));
+};
+
+console.log("=== RUBIK'S CUBE SIMULATION & DIAGNOSTIC ===");
+
+const cube = new Cube();
+
+// 1. Initial State Check
+console.log("\n1. Checking Initial State...");
+let state = cube.getState();
+const isSolved = 
+  checkFaceColor(state[FACES.UP], COLORS.WHITE) &&
+  checkFaceColor(state[FACES.DOWN], COLORS.YELLOW) &&
+  checkFaceColor(state[FACES.FRONT], COLORS.GREEN) &&
+  checkFaceColor(state[FACES.BACK], COLORS.BLUE) &&
+  checkFaceColor(state[FACES.LEFT], COLORS.ORANGE) &&
+  checkFaceColor(state[FACES.RIGHT], COLORS.RED);
+
+if (isSolved) {
+  console.log("✅ Initial state is SOLVED.");
+} else {
+  console.error("❌ Initial state is BROKEN.");
+  process.exit(1);
+}
+
+// 2. Simulate Move: Front Face Drag Down
+// Visual: Drag Down on Front Face (Left Layer).
+// Axis: X. Index: -1 (Left).
+// Physical expectation: The Left slice moves "towards the user" (if looking from top) or "down" (if looking from front).
+// Standard Notation: L (Left CW).
+// L move: Top -> Front -> Down -> Back -> Top.
+// Let's verify what L does.
+// Standard L: Front gets Top color.
+// If I drag Left Layer DOWN on Front face, the Front face pieces move DOWN.
+// So Front gets Top pieces.
+// So Drag Down = L = Front gets Top.
+
+console.log("\n2. Simulating: Left Layer (x=-1) Rotation (L-like move)...");
+// We need to find which 'direction' in our engine corresponds to L.
+// Our engine: rotateLayer('x', -1, direction).
+
+// Try direction = 1
+console.log("-> Applying rotateLayer('x', -1, 1)...");
+cube.rotateLayer('x', -1, 1);
+state = cube.getState();
+
+// Check result on Left Column of Front Face
+// Front is Green. Top is White.
+// If L (Drag Down): Front-Left-Col should be White.
+const frontLeftCol = [state[FACES.FRONT][0][0], state[FACES.FRONT][1][0], state[FACES.FRONT][2][0]];
+console.log("Front Left Column colors:", frontLeftCol);
+
+if (frontLeftCol.every(c => c === COLORS.WHITE)) {
+  console.log("✅ Result: Front got White (Top). This matches 'Drag Down' (L move).");
+  console.log("=> CONCLUSION: direction=1 corresponds to Drag Down (L).");
+} else if (frontLeftCol.every(c => c === COLORS.YELLOW)) {
+  console.log("⚠️ Result: Front got Yellow (Down). This matches 'Drag Up' (L' move).");
+  console.log("=> CONCLUSION: direction=1 corresponds to Drag Up (L').");
+} else {
+  console.error("❌ Unexpected colors:", frontLeftCol);
+}
+
+// Reset for next test
+cube.reset();
+
+// 3. Simulate Move: Front Face Drag Right
+// Visual: Drag Right on Front Face (Top Layer).
+// Axis: Y. Index: 1 (Top).
+// Physical expectation: Top slice moves Right.
+// Standard Notation: U' (Up CCW) ? No.
+// If I hold cube, drag Top Layer to Right.
+// Front face pieces move to Right face.
+// Standard U (CW): Front -> Left.
+// So Drag Right is U' (CCW).
+// Let's verify.
+// Drag Right: Front -> Right.
+
+console.log("\n3. Simulating: Top Layer (y=1) Rotation...");
+// Try direction = 1
+console.log("-> Applying rotateLayer('y', 1, 1)...");
+cube.rotateLayer('y', 1, 1);
+state = cube.getState();
+
+// Check result on Top Row of Front Face
+// Front is Green. Left is Orange. Right is Red.
+// If Drag Right: Front-Top-Row should be Orange? No.
+// Drag Right: The pieces move Right. So Front REPLACES Right?
+// Or Front GETS Left?
+// Visually: The face moves Right. So the Green pieces go to Right face.
+// And Front face gets Left (Orange) pieces.
+// So Front-Top-Row should be Orange.
+
+const frontTopRow = state[FACES.FRONT][0];
+console.log("Front Top Row colors:", frontTopRow);
+
+if (frontTopRow.every(c => c === COLORS.ORANGE)) {
+  console.log("✅ Result: Front got Orange (Left). This matches 'Drag Right'.");
+  console.log("=> CONCLUSION: direction=1 corresponds to Drag Right.");
+} else if (frontTopRow.every(c => c === COLORS.RED)) {
+  console.log("⚠️ Result: Front got Red (Right). This matches 'Drag Left'.");
+  console.log("=> CONCLUSION: direction=1 corresponds to Drag Left.");
+} else {
+  console.error("❌ Unexpected colors:", frontTopRow);
+}
+
+console.log("\n=== END SIMULATION ===");

test/test_new_model.js

@@ -0,0 +1,72 @@
+
+import { CubeModel, FACES, COLORS } from '../src/utils/CubeModel.js';
+
+console.log('Running CubeModel Rotation Logic Tests...');
+
+const cube1 = new CubeModel();
+const cube2 = new CubeModel();
+
+const compareCubes = (c1, c2, message) => {
+  const s1 = c1.toString();
+  const s2 = c2.toString();
+  if (s1 === s2) {
+    console.log(`✅ PASS: ${message}`);
+    return true;
+  } else {
+    console.error(`❌ FAIL: ${message}`);
+    console.log('Expected (Standard Move):');
+    console.log(s2);
+    console.log('Actual (Layer Rotation):');
+    console.log(s1);
+    return false;
+  }
+};
+
+// Test 1: Top Layer (y=1) CW vs U
+cube1.reset();
+cube2.reset();
+console.log('Testing Top Layer CW vs U...');
+cube1.rotateLayer('y', 1, 1); // Top CW
+cube2.applyMove('U');
+compareCubes(cube1, cube2, "Top Layer CW matches U");
+
+// Test 2: Bottom Layer (y=-1) CW vs D
+cube1.reset();
+cube2.reset();
+console.log('Testing Bottom Layer CW vs D...');
+cube1.rotateLayer('y', -1, -1); // Bottom CW (CW around -Y is CCW around Y)
+cube2.applyMove('D');
+compareCubes(cube1, cube2, "Bottom Layer CW matches D");
+
+// Test 3: Left Layer (x=-1) CW vs L
+cube1.reset();
+cube2.reset();
+console.log('Testing Left Layer CW vs L...');
+cube1.rotateLayer('x', -1, -1); // Left CW (CW around -X is CCW around X)
+cube2.applyMove('L');
+compareCubes(cube1, cube2, "Left Layer CW matches L");
+
+// Test 4: Right Layer (x=1) CW vs R
+cube1.reset();
+cube2.reset();
+console.log('Testing Right Layer CW vs R...');
+cube1.rotateLayer('x', 1, 1); // Right CW
+cube2.applyMove('R');
+compareCubes(cube1, cube2, "Right Layer CW matches R");
+
+// Test 5: Front Layer (z=1) CW vs F
+cube1.reset();
+cube2.reset();
+console.log('Testing Front Layer CW vs F...');
+cube1.rotateLayer('z', 1, 1); // Front CW
+cube2.applyMove('F');
+compareCubes(cube1, cube2, "Front Layer CW matches F");
+
+// Test 6: Back Layer (z=-1) CW vs B
+cube1.reset();
+cube2.reset();
+console.log('Testing Back Layer CW vs B...');
+cube1.rotateLayer('z', -1, -1); // Back CW (CW around -Z is CCW around Z)
+cube2.applyMove('B');
+compareCubes(cube1, cube2, "Back Layer CW matches B");
+

test/test_rubiks_import.js

@@ -0,0 +1,12 @@
+
+import { State } from 'rubiks-js/src/state/index.js';
+
+console.log('State imported successfully');
+const state = new State(true);
+console.log('State instantiated');
+
+state.applyTurn('R');
+console.log('Applied turn R');
+
+const encoded = state.encode();
+console.log('Encoded state:', encoded);

vite.config.js

@@ -1,9 +1,13 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import pkg from './package.json'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  define: {
+    '__APP_VERSION__': JSON.stringify(pkg.version),
+  },
   server: {
     port: 5174,
     hmr: {