@saluzi/saluzi-edu 0.2.34 → 0.2.35

package/dist/guide/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="zh-CN" class="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Saluzi Guide · 使用指南</title>
+    <meta name="description" content="Saluzi CLI 使用指南 — 新手入门、命令字典、环境变量、Saluzi 特色" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <script type="module" crossorigin src="/assets/main-KHtjEkbM.js"></script>
+    <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-S-ySWqyJ.js">
+    <link rel="modulepreload" crossorigin href="/assets/shiki-CMaUdEs0.js">
+    <link rel="modulepreload" crossorigin href="/assets/streamdown-nMT_aKRc.js">
+    <link rel="modulepreload" crossorigin href="/assets/vendor-BU1MXatO.js">
+    <link rel="stylesheet" crossorigin href="/assets/main-ByIvcCOw.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/dist/parade/web/cube.js

@@ -2,7 +2,7 @@
  * Parade overlay cube renderer and session info bar controller.
  *
  * Responsibilities:
- *   1. Render a purple 3D cube via WebGL in the left canvas area.
+ *   1. Render a purple 3D cube via CSS 3D transforms in the left stage area.
  *   2. Animate the cube with gyroscope-style rotation when runningCount > 0.
  *   3. Update the info bar (right side) with running/waiting counts and
  *      per-session prompt text from WebSocket pushes.
@@ -15,7 +15,6 @@
 // Configuration
 // ---------------------------------------------------------------------------
 
-const PURPLE = [0.545, 0.361, 0.965] // #8B5CF6
 const MAX_PROMPT_LENGTH = 30
 const MAX_DISPLAYED_SESSIONS = 5
 const WS_RECONNECT_MS = 2000
@@ -24,7 +23,7 @@ const WS_RECONNECT_MS = 2000
 // DOM references
 // ---------------------------------------------------------------------------
 
-const canvas = document.getElementById('cube-canvas')
+const cubeEl = document.getElementById('cube')
 const runningCountEl = document.getElementById('running-count')
 const waitingCountEl = document.getElementById('waiting-count')
 const waitingPillEl = document.getElementById('waiting-pill')
@@ -267,6 +266,7 @@ function updateCounts() {
   } else {
     waitingPillEl.classList.add('zero')
   }
+  updateCubeRotation()
 }
 
 function updateSessionRows() {
@@ -473,304 +473,34 @@ ctxMode.addEventListener('click', function () {
     /* ignore */
   }
   updateModeLabel()
+  updateCubeRotation()
 })
 
 updateModeLabel()
 
 // ---------------------------------------------------------------------------
-// WebGL: Purple 3D Cube
+// CSS 3D Cube rotation control
 // ---------------------------------------------------------------------------
-
-var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
-var cubeProgram = null
-var cubeBuffer = null
-var cubeIndexBuffer = null
-
-// Sync the canvas drawing buffer to its CSS display size × devicePixelRatio.
-// Without this, the canvas keeps its initial 240×320 buffer regardless of the
-// actual display area — if the window's client height isn't exactly 160px
-// (e.g. DPI scaling, title bar subtraction, WM overrides), the cube renders
-// at the wrong aspect ratio and looks stretched/squished. This makes the
-// cube correct at any window size, on any DPI/resolution/scaling setting.
-function resizeCanvasToDisplaySize() {
-  var dpr = window.devicePixelRatio || 1
-  var rect = canvas.getBoundingClientRect()
-  var displayW = Math.max(1, Math.floor(rect.width * dpr))
-  var displayH = Math.max(1, Math.floor(rect.height * dpr))
-  if (canvas.width !== displayW || canvas.height !== displayH) {
-    canvas.width = displayW
-    canvas.height = displayH
-  }
-}
-window.addEventListener('resize', function () {
-  resizeCanvasToDisplaySize()
-  updateScrollbar()
-})
-resizeCanvasToDisplaySize()
-
-if (gl) {
-  initCube()
-}
-
-function initCube() {
-  // -- Shaders --
-  var vsSource = [
-    'attribute vec3 aPos;',
-    'uniform mat4 uMVP;',
-    'void main() {',
-    '  gl_Position = uMVP * vec4(aPos, 1.0);',
-    '}',
-  ].join('\n')
-
-  var fsSource = [
-    'precision mediump float;',
-    'uniform vec3 uColor;',
-    'void main() {',
-    '  gl_FragColor = vec4(uColor, 1.0);',
-    '}',
-  ].join('\n')
-
-  var vs = compileShader(gl.VERTEX_SHADER, vsSource)
-  var fs = compileShader(gl.FRAGMENT_SHADER, fsSource)
-  if (!vs || !fs) return
-
-  cubeProgram = gl.createProgram()
-  gl.attachShader(cubeProgram, vs)
-  gl.attachShader(cubeProgram, fs)
-  gl.linkProgram(cubeProgram)
-
-  // -- Cube vertices (8 corners, unit cube centered at origin) --
-  var vertices = new Float32Array([
-    -0.5, -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, 0.5, -0.5, -0.5,
-    -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5,
-  ])
-
-  // -- Index buffer (12 triangles = 6 faces * 2 triangles) --
-  var indices = new Uint16Array([
-    // Front face
-    0, 1, 2, 0, 2, 3,
-    // Back face
-    5, 4, 7, 5, 7, 6,
-    // Top face
-    3, 2, 6, 3, 6, 7,
-    // Bottom face
-    4, 5, 1, 4, 1, 0,
-    // Right face
-    1, 5, 6, 1, 6, 2,
-    // Left face
-    4, 0, 3, 4, 3, 7,
-  ])
-
-  cubeBuffer = gl.createBuffer()
-  gl.bindBuffer(gl.ARRAY_BUFFER, cubeBuffer)
-  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
-
-  cubeIndexBuffer = gl.createBuffer()
-  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer)
-  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW)
-
-  // -- Initial render --
-  gl.enable(gl.DEPTH_TEST)
-  gl.clearColor(0.102, 0.102, 0.18, 1.0) // #1a1a2e
-  renderFrame()
-}
-
-function compileShader(type, source) {
-  var shader = gl.createShader(type)
-  gl.shaderSource(shader, source)
-  gl.compileShader(shader)
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    gl.deleteShader(shader)
-    return null
-  }
-  return shader
-}
-
-// ---------------------------------------------------------------------------
-// Matrix math (minimal 4x4 operations for perspective + model-view)
-// ---------------------------------------------------------------------------
-
-function mat4Identity() {
-  var m = new Float32Array(16)
-  m[0] = 1
-  m[5] = 1
-  m[10] = 1
-  m[15] = 1
-  return m
-}
-
-function mat4Perspective(fovY, aspect, near, far) {
-  var f = 1.0 / Math.tan(fovY / 2)
-  var m = new Float32Array(16)
-  m[0] = f / aspect
-  m[5] = f
-  m[10] = (far + near) / (near - far)
-  m[11] = -1
-  m[14] = (2 * far * near) / (near - far)
-  return m
-}
-
-function mat4Translate(m, x, y, z) {
-  var r = new Float32Array(m)
-  r[12] = m[0] * x + m[4] * y + m[8] * z + m[12]
-  r[13] = m[1] * x + m[5] * y + m[9] * z + m[13]
-  r[14] = m[2] * x + m[6] * y + m[10] * z + m[14]
-  r[15] = m[3] * x + m[7] * y + m[11] * z + m[15]
-  return r
-}
-
-function mat4RotateX(m, a) {
-  var c = Math.cos(a),
-    s = Math.sin(a)
-  var r = new Float32Array(m)
-  var m4 = m[4],
-    m5 = m[5],
-    m6 = m[6],
-    m7 = m[7]
-  var m8 = m[8],
-    m9 = m[9],
-    m10 = m[10],
-    m11 = m[11]
-  r[4] = m4 * c + m8 * s
-  r[5] = m5 * c + m9 * s
-  r[6] = m6 * c + m10 * s
-  r[7] = m7 * c + m11 * s
-  r[8] = m8 * c - m4 * s
-  r[9] = m9 * c - m5 * s
-  r[10] = m10 * c - m6 * s
-  r[11] = m11 * c - m7 * s
-  return r
-}
-
-function mat4RotateY(m, a) {
-  var c = Math.cos(a),
-    s = Math.sin(a)
-  var r = new Float32Array(m)
-  var m0 = m[0],
-    m1 = m[1],
-    m2 = m[2],
-    m3 = m[3]
-  var m8 = m[8],
-    m9 = m[9],
-    m10 = m[10],
-    m11 = m[11]
-  r[0] = m0 * c - m8 * s
-  r[1] = m1 * c - m9 * s
-  r[2] = m2 * c - m10 * s
-  r[3] = m3 * c - m11 * s
-  r[8] = m0 * s + m8 * c
-  r[9] = m1 * s + m9 * c
-  r[10] = m2 * s + m10 * c
-  r[11] = m3 * s + m11 * c
-  return r
-}
-
-function mat4Scale(m, sx, sy, sz) {
-  var r = new Float32Array(m)
-  r[0] *= sx
-  r[1] *= sx
-  r[2] *= sx
-  r[3] *= sx
-  r[4] *= sy
-  r[5] *= sy
-  r[6] *= sy
-  r[7] *= sy
-  r[8] *= sz
-  r[9] *= sz
-  r[10] *= sz
-  r[11] *= sz
-  return r
-}
-
-// ---------------------------------------------------------------------------
-// Render loop
-// ---------------------------------------------------------------------------
-
-var rotX = 0.4 // Initial tilt for better visual
-var rotY = 0
-
-function renderFrame() {
-  if (!gl || !cubeProgram) return
-
-  // Re-sync buffer to display size in case the window resized since last frame.
-  resizeCanvasToDisplaySize()
-  gl.viewport(0, 0, canvas.width, canvas.height)
-  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
-
-  gl.useProgram(cubeProgram)
-
-  // Projection: 45 degree FOV, canvas aspect ratio
-  var proj = mat4Perspective(
-    Math.PI / 4,
-    canvas.width / canvas.height,
-    0.1,
-    100,
-  )
-
-  // View: camera pulled back along Z
-  var view = mat4Translate(proj, 0, 0, -4)
-
-  // Model: rotate then scale
-  var model = mat4Identity()
-  model = mat4RotateX(model, rotX)
-  model = mat4RotateY(model, rotY)
-  model = mat4Scale(model, 1.2, 1.2, 1.2)
-
-  // MVP = projection * view * model (already combined above)
-  var mvp = view
-  // Multiply view * model
-  var mvpFinal = mat4Multiply(mvp, model)
-
-  // Set uniforms
-  var uMVP = gl.getUniformLocation(cubeProgram, 'uMVP')
-  var uColor = gl.getUniformLocation(cubeProgram, 'uColor')
-  gl.uniformMatrix4fv(uMVP, false, mvpFinal)
-  gl.uniform3fv(uColor, PURPLE)
-
-  // Bind vertex buffer
-  var aPos = gl.getAttribLocation(cubeProgram, 'aPos')
-  gl.bindBuffer(gl.ARRAY_BUFFER, cubeBuffer)
-  gl.enableVertexAttribArray(aPos)
-  gl.vertexAttribPointer(aPos, 3, gl.FLOAT, false, 0, 0)
-
-  // Draw indexed triangles
-  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeIndexBuffer)
-  gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0)
-}
-
-function mat4Multiply(a, b) {
-  var r = new Float32Array(16)
-  var i, j
-  for (i = 0; i < 4; i++) {
-    for (j = 0; j < 4; j++) {
-      r[j * 4 + i] =
-        a[i] * b[j * 4] +
-        a[4 + i] * b[j * 4 + 1] +
-        a[8 + i] * b[j * 4 + 2] +
-        a[12 + i] * b[j * 4 + 3]
-    }
-  }
-  return r
-}
-
-/**
- * Animation loop. Rotates the cube on X and Y axes (gyroscope-style)
- * based on the current cube mode:
- *   Dynamic: rotate when runningCount > 0
- *   Static:  rotate when runningCount === 0 (inverse)
- */
-function animate() {
+// The cube is a CSS 3D transform element (see index.html <style>). Rotation
+// is driven by applying/removing the .rotating class, which toggles the
+// cube-spin @keyframes animation. Logic mirrors the previous WebGL loop:
+//   Dynamic: rotate when runningCount > 0
+//   Static:  rotate when runningCount === 0 (inverse)
+
+function updateCubeRotation() {
+  if (!cubeEl) return
   var shouldRotate =
     cubeMode === 'dynamic' ? runningCount > 0 : runningCount === 0
   if (shouldRotate) {
-    rotY += 0.025
-    rotX += 0.012
+    cubeEl.classList.add('rotating')
+  } else {
+    cubeEl.classList.remove('rotating')
   }
-  renderFrame()
-  requestAnimationFrame(animate)
 }
 
-// Start the render loop and WebSocket connection
+// Apply initial state — re-evaluated on each WS message via updateCounts
+updateCubeRotation()
+
+// Start the WebSocket connection
 setWsStatus('connecting')
-requestAnimationFrame(animate)
 connectWebSocket()

package/dist/parade/web/index.html

@@ -34,8 +34,9 @@
 
   /* ---- Left: cube stage ----
      Use flex-basis instead of fixed px so the stage scales with the window.
-     The cube canvas inside auto-syncs its buffer to the display size, so the
-     cube renders correctly at any window dimension. */
+     The cube is a CSS 3D transform element — three faces (body + ::before
+     + ::after) form a visible cube. Rotates when .rotating class is applied
+     (driven by runningCount + cubeMode in cube.js). */
   #cube-stage {
     flex: 0 0 43%;  /* ~95px of 220px, but proportional so it scales */
     height: 100%;
@@ -47,10 +48,44 @@
     align-items: center;
     justify-content: center;
     border-right: 1px solid var(--border);
+    perspective: 200px;
   }
-  #cube-canvas {
-    width: 100%; height: 100%;
-    display: block;
+  /* CSS 3D cube: body is the front face, ::before is the right face,
+     ::after is the top face. Half-size translates position them at 90°. */
+  .cube {
+    width: 22px;
+    height: 22px;
+    position: relative;
+    transform-style: preserve-3d;
+    transform: rotateX(-28deg) rotateY(45deg);
+    background: rgba(139, 92, 246, 0.45);
+    border: 1px solid #8B5CF6;
+  }
+  .cube.rotating {
+    animation: cube-spin 8s linear infinite;
+  }
+  .cube::before,
+  .cube::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+  .cube::before {
+    transform: rotateY(90deg) translateZ(11px);
+    background: rgba(167, 139, 250, 0.55);
+    border: 1px solid #a78bfa;
+  }
+  .cube::after {
+    transform: rotateX(90deg) translateZ(11px);
+    background: rgba(109, 40, 217, 0.4);
+    border: 1px solid #6d28d9;
+  }
+  @keyframes cube-spin {
+    from { transform: rotateX(-28deg) rotateY(0deg); }
+    to   { transform: rotateX(-28deg) rotateY(360deg); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cube.rotating { animation: none; }
   }
   /* Subtle ring frame around the cube */
   #cube-stage::after {
@@ -355,7 +390,7 @@
 </head>
 <body>
   <div id="cube-stage">
-    <canvas id="cube-canvas" width="240" height="320"></canvas>
+    <div class="cube" id="cube"></div>
   </div>
   <div id="panel">
     <div id="counts-row">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saluzi/saluzi-edu",
-  "version": "0.2.34",
+  "version": "0.2.35",
   "description": "Saluzi CLI - interactive AI coding assistant in the terminal",
   "license": "MIT",
   "type": "module",