Estante 3D: entradas, orden A–Z, sin conexión, pósit y giroscopio calibrado

- Estante: entradas desde el menú, la librería y la ficha; orden reciente o A–Z; foto del estante, arte de lomos y portadas
  guardados en el dispositivo; sin conexión muestra solo lo guardado.
- Notas de 40 letras sin cortar palabras, lomo curvo, sombra en las portadas de frente y lomos con logo sin el título.
- Pósit cuadrado con el capítulo y la página por la que va el usuario; paso al lector sin pantalla de carga.
- Giroscopio: integra rotationRate (sin los saltos de β/γ con el dispositivo vertical), tope suave, menos sensibilidad al
  caminar, lado en horizontal según la gravedad, suavizado por tiempo y más rango en el estante y el libro.
- Laboratorio del giroscopio en Ajustes (temporal, solo desarrollo) para grabar los sensores.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/public/shelf3d.js

@@ -117,6 +117,7 @@ uniform float uHas, uPitch, uDepth, uDim, uAlpha;
 uniform vec4 uSpot; // mesa: centro del tomo y radio de la luz
 uniform vec2 uTab; // mesa propia: escala de la foto; sin ella, madera repetida
 uniform vec2 uSize;
+uniform vec2 uFace; // portada de frente: ancho y alto, para la sombra que le hace el hueco del estante (0: sin sombra)
 uniform vec4 uHide; // x0, x1, y0, y1 del hueco del tomo sacado: ni él ni sus costados se pintan en la fila
 in vec3 vPos; in vec3 vNor; in vec2 vUV;
 out vec4 color;
@@ -131,7 +132,16 @@ void main() {
   vec3 c;
   if (uKind == 0) c = texture(uTex, vUV, -0.4).rgb * vec3(0.92, 0.84, 0.76); // madera del mueble, algo más oscura que la mesa
   else if (uKind == 1) c = texture(uTex, vUV).rgb; // lomos
-  else if (uKind == 2) c = uHas > 0.5 ? texture(uTex, vUV, -0.5).rgb : uColor; // portada
+  else if (uKind == 2) { // portada
+    c = uHas > 0.5 ? texture(uTex, vUV, -0.5).rgb : uColor;
+    if (uFace.x > 0.0) {
+      // Metida en el estante: la luz llega de arriba a la izquierda, así que el lomo o el costado de la izquierda le hace
+      // sombra, y la balda de arriba y el fondo la oscurecen hacia los bordes.
+      float dl = vUV.x * uFace.x, dr = (1.0 - vUV.x) * uFace.x, dt = vUV.y * uFace.y, db = (1.0 - vUV.y) * uFace.y;
+      c *= mix(0.28, 1.0, smoothstep(0.0, 0.13, dl)) * mix(0.6, 1.0, smoothstep(0.0, 0.06, dr))
+         * mix(0.45, 1.0, smoothstep(0.0, 0.36, dt)) * mix(0.66, 1.0, smoothstep(0.0, 0.04, db)) * 0.88;
+    }
+  }
   else if (uKind == 3 || uKind == 5) { // las hojas, vistas por arriba: rayas irregulares a lo ancho del tomo, medidas en el mueble
     float a = uKind == 3 ? vUV.x : vUV.y, v = a / 0.0042, w = fwidth(v), k = floor(v);
     float n = fract(sin(k * 12.9898) * 43758.5453);
@@ -156,6 +166,19 @@ void main() {
   color = vec4(c * lit * shade * room * uDim * vec3(1.03, 1.0, 0.95), uAlpha);
 }`
 
+// Lomo curvo: a lo ancho, el centro sobresale y los bordes quedan SPINE_ROUND del ancho más atrás.
+// a0 y len: dónde empieza y cuánto mide a lo ancho; top y H: arriba y alto; front: lo más saliente.
+// place(a lo ancho, salida) da x y z del punto; turn pasa la normal (a lo ancho, 0, salida) a esos mismos ejes.
+const SPINE_ROUND = 0.16, SPINE_COLS = 8
+function roundSpine(sh, a0, len, top, H, front, R, place, [U0, U1], turn = n => n) {
+  const w = Math.abs(len)
+  sh.grid(SPINE_COLS, 1, (c, r) => {
+    const t = c / SPINE_COLS, out = front - R * (1 - Math.sin(Math.PI * t)), slope = ((R * Math.PI) / w) * Math.cos(Math.PI * t)
+    const k = Math.hypot(slope, 1), n = turn([-slope / k * Math.sign(len), 0, 1 / k])
+    const [px, , pz] = place(a0 + len * t, out)
+    return [px, top - H * r, pz, ...n, U0 + (U1 - U0) * t, r]
+  })
+}
 // Un cuadrilátero: origen, dos lados, normal y coordenadas de textura en sus esquinas.
 function quad(sh, o, a, b, n, uv = [0, 0, 1, 1]) {
   sh.grid(1, 1, (c, r) => [o[0] + a[0] * c + b[0] * r, o[1] + a[1] * c + b[1] * r, o[2] + a[2] * c + b[2] * r, ...n, uv[0] + (uv[2] - uv[0]) * c, uv[1] + (uv[3] - uv[1]) * r])
@@ -203,10 +226,10 @@ export function loadNoteFonts() {
 const IDENTITY = new Float32Array([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1])
 const FLY_MS = 900
 const PEEK_OPEN_MS = 720, PEEK_CLOSE_MS = 520, PEEK_SLIDE = 0.34 // el tomo sale recto de la fila y luego gira hacia la cámara
-const ZOOM_MAX = 3, ORBIT_TILT = 10, ORBIT_YAW = 18, ORBIT_BACK = 0.08, REST_TILT = -3, FRICTION_MS = 320
+const ZOOM_MAX = 3, ORBIT_TILT = 14, ORBIT_YAW = 26, ORBIT_BACK = 0.11, REST_TILT = -3, FRICTION_MS = 320
 
 export function createShelf3D(container, lib, { works: firstWorks = [], rowsLandscape = 2.3, rowsPortrait = 3, still = false, pagesOf = null, onPeek = null, onOpen = null, table = null } = {}) {
-  const { Shape, woodCanvas, cameraMatrix, project, FOV, coverPalette, inkOn, css, createTilt, MAX_DEG } = lib
+  const { Shape, woodCanvas, cameraMatrix, project, FOV, coverPalette, inkOn, css, createTilt, followTilt } = lib
   const canvas = document.createElement('canvas')
   canvas.className = 'shelfcanvas'
   const gl = canvas.getContext('webgl2', { alpha: false, antialias: true, depth: true, powerPreference: 'high-performance' })
@@ -267,7 +290,7 @@ export function createShelf3D(container, lib, { works: firstWorks = [], rowsLand
     if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(prog) || 'shader')
     gl.useProgram(prog)
     u = {}
-    for (const n of ['uM', 'uModel', 'uKind', 'uTex', 'uColor', 'uHas', 'uPitch', 'uDepth', 'uSize', 'uDim', 'uHide', 'uAlpha', 'uSpot', 'uTab']) u[n] = gl.getUniformLocation(prog, n)
+    for (const n of ['uM', 'uModel', 'uKind', 'uTex', 'uColor', 'uHas', 'uPitch', 'uDepth', 'uSize', 'uDim', 'uHide', 'uAlpha', 'uSpot', 'uTab', 'uFace']) u[n] = gl.getUniformLocation(prog, n)
     gl.uniform1i(u.uTex, 0)
     gl.uniformMatrix4fv(u.uModel, false, IDENTITY)
     gl.uniform1f(u.uDim, 1)
@@ -346,15 +369,29 @@ export function createShelf3D(container, lib, { works: firstWorks = [], rowsLand
   // keep: la imagen se guarda en el dispositivo (portadas de frente y logos) y de ahí sale la próxima vez.
   const keepUrls = new Set()
   function loadImage(url, done, keep = false) {
-    if (keep && url.startsWith('/')) keepUrls.add(url)
     if (loadingImg.has(url)) { loadingImg.get(url).push(done); return }
     loadingImg.set(url, [done])
-    waiting.push(url)
-    pumpImages()
+    if (!keep || !url.startsWith('/')) { waiting.push(url); return pumpImages() }
+    keepUrls.add(url)
+    // Lo guardado en el dispositivo no espera a la red: no ocupa sitio en la cola.
+    keptBlob('img', url).then(hit => {
+      if (dead) return
+      if (!hit) { waiting.push(url); return pumpImages() }
+      const im = new Image(), src = URL.createObjectURL(hit)
+      im.decoding = 'async'
+      const finish = ok => {
+        URL.revokeObjectURL(src)
+        if (!ok) { waiting.push(url); return pumpImages() } // lo guardado no sirve: de la red
+        const list = loadingImg.get(url) || []
+        loadingImg.delete(url)
+        for (const f of list) f(im)
+      }
+      im.onload = () => finish(true)
+      im.onerror = () => finish(false)
+      im.src = src
+    })
   }
-  async function keptSrc(url) {
-    const hit = await keptBlob('img', url)
-    if (hit) return URL.createObjectURL(hit)
+  async function keptSrc(url) { // ya se miró lo guardado: de la red, y se guarda
     const r = await fetch(url, { credentials: 'same-origin' }).catch(() => null)
     if (!r?.ok || !/^image\//.test(r.headers.get('content-type') || '')) return null
     const blob = await r.blob()
@@ -386,7 +423,7 @@ export function createShelf3D(container, lib, { works: firstWorks = [], rowsLand
       keptSrc(url).catch(() => null).then(src => {
         im.onload = () => { if (src) URL.revokeObjectURL(src); finish(true) }
         im.onerror = () => {
-          if (src) { URL.revokeObjectURL(src); src = null; im.src = url; return } // lo guardado no sirve: de la red
+          if (src) { URL.revokeObjectURL(src); src = null; im.src = url; return } // lo bajado no se pudo leer: tal cual
           finish(false)
         }
         im.src = src || url
@@ -717,24 +754,26 @@ export function createShelf3D(container, lib, { works: firstWorks = [], rowsLand
         g.drawImage(logo.im, -len / 2, -thick / 2, len, thick)
         g.restore()
       }
-      let size = wText * (art ? 0.44 : 0.5)
-      g.font = `700 ${Math.round(size)}px system-ui, sans-serif`
-      let long = g.measureText(it.work.title).width
-      if (long > room) { size = Math.max(wText * 0.32, (size * room) / long); g.font = `700 ${Math.round(size)}px system-ui, sans-serif`; long = g.measureText(it.work.title).width }
-      const len = Math.min(long, room), mid = art ? to - len / STRIP_H / 2 - 0.012 : (from + to) / 2
-      if (backing && !logo) {
-        const bw = size * 1.45 * sx, pad = size * 0.55
-        ink = backing((w - bw) / 2, STRIP_H * mid - len / 2 - pad, bw, len + pad * 2)
+      // Con logo, el título ya está: solo queda el número del tomo.
+      if (!logo) {
+        let size = wText * (art ? 0.44 : 0.5)
+        g.font = `700 ${Math.round(size)}px system-ui, sans-serif`
+        let long = g.measureText(it.work.title).width
+        if (long > room) { size = Math.max(wText * 0.32, (size * room) / long); g.font = `700 ${Math.round(size)}px system-ui, sans-serif`; long = g.measureText(it.work.title).width }
+        const len = Math.min(long, room), mid = art ? to - len / STRIP_H / 2 - 0.012 : (from + to) / 2
+        if (backing) {
+          const bw = size * 1.45 * sx, pad = size * 0.55
+          ink = backing((w - bw) / 2, STRIP_H * mid - len / 2 - pad, bw, len + pad * 2)
+        }
+        g.save()
+        g.scale(sx, 1)
+        g.fillStyle = css(ink)
+        if (backing) { g.shadowColor = ink[0] > 0.5 ? 'rgba(0,0,0,.55)' : 'rgba(255,255,255,.5)'; g.shadowBlur = 3 }
+        g.translate(wText / 2, STRIP_H * mid)
+        g.rotate(Math.PI / 2)
+        g.fillText(it.work.title, 0, 0, room)
+        g.restore()
       }
-      g.save()
-      g.scale(sx, 1)
-      if (logo) g.globalAlpha = 0 // ya está el logo
-      g.fillStyle = css(ink)
-      if (backing) { g.shadowColor = ink[0] > 0.5 ? 'rgba(0,0,0,.55)' : 'rgba(255,255,255,.5)'; g.shadowBlur = 3 }
-      g.translate(wText / 2, STRIP_H * mid)
-      g.rotate(Math.PI / 2)
-      g.fillText(it.work.title, 0, 0, room)
-      g.restore()
       if (it.vol.vol != null) {
         const nSize = wText * 0.5, label = String(it.vol.vol), cy = STRIP_H * 0.935
         g.font = `800 ${Math.round(nSize)}px system-ui, sans-serif`
@@ -772,12 +811,13 @@ export function createShelf3D(container, lib, { works: firstWorks = [], rowsLand
         faces.push({ it, mesh: makeMesh(sh), edge: makeMesh(edge), pages: makeMesh(pages) })
         continue
       }
-      quad(spines, [x0, base + H, F], [it.w, 0, 0], [0, -H, 0], [0, 0, 1], [U0, 0, U1, 1])
+      const R = it.w * SPINE_ROUND, Fe = F - R // los bordes del lomo, algo más atrás que su centro
+      roundSpine(spines, x0, it.w, base + H, H, F, R, (along, out) => [along, 0, out], [U0, U1])
       // Los costados son las tapas: un solo color del lomo, no una columna de la tira estirada a lo largo del fondo.
       const Um = (U0 + U1) / 2, side = [Um, 0.02, Um, 0.02]
-      quad(spines, [x0, base, F - D], [0, 0, D], [0, H, 0], [-1, 0, 0], side)
-      quad(spines, [x1, base, F], [0, 0, -D], [0, H, 0], [1, 0, 0], side)
-      quad(paper, [x0, base + H, F - D], [it.w, 0, 0], [0, 0, D], [0, 1, 0], [0, it.w, it.w, it.w]) // u: a lo ancho, en el mueble; v: el grosor
+      quad(spines, [x0, base, F - D], [0, 0, D - R], [0, H, 0], [-1, 0, 0], side)
+      quad(spines, [x1, base, Fe], [0, 0, -(D - R)], [0, H, 0], [1, 0, 0], side)
+      quad(paper, [x0, base + H, F - D], [it.w, 0, 0], [0, 0, D - R], [0, 1, 0], [0, it.w, it.w, it.w]) // u: a lo ancho, en el mueble; v: el grosor
     }
     paintStrip(row, strip)
     const b = { k, key: rowKey(row), strip, tex: texFrom(strip), spines: spines.i.length ? makeMesh(spines) : null, paper: paper.i.length ? makeMesh(paper) : null, faces, stale: 0 }
@@ -908,18 +948,7 @@ export function createShelf3D(container, lib, { works: firstWorks = [], rowsLand
     if (Math.abs(velocity) < 0.00004) velocity = 0
     return !!velocity
   }
-  function stepTilt(now) {
-    tilt.fade(now)
-    const on = !still && zoom === 1
-    const want = on ? { x: tilt.target.x / MAX_DEG, y: tilt.target.y / MAX_DEG } : { x: 0, y: 0 }
-    let moving = !!(tilt.target.x || tilt.target.y) && on
-    for (const k of ['x', 'y']) {
-      const d = want[k] - tiltNow[k]
-      if (Math.abs(d) < 0.002) tiltNow[k] = want[k]
-      else { tiltNow[k] += d * 0.25; moving = true }
-    }
-    return moving
-  }
+  const stepTilt = now => followTilt(tilt, tiltNow, now, !still && zoom === 1)
   function paint() {
     raf = 0
     if (dead) return
@@ -970,8 +999,10 @@ export function createShelf3D(container, lib, { works: firstWorks = [], rowsLand
         gl.uniform1i(u.uKind, 2)
         gl.uniform1f(u.uHas, tex ? 1 : 0)
         gl.uniform3fv(u.uColor, base)
+        gl.uniform2f(u.uFace, f.it.w, f.it.h)
         if (tex) gl.bindTexture(gl.TEXTURE_2D, tex)
         drawMesh(f.mesh)
+        gl.uniform2f(u.uFace, 0, 0)
         gl.uniform1i(u.uKind, 4)
         drawMesh(f.edge)
         gl.uniform1i(u.uKind, 5)
@@ -1004,7 +1035,8 @@ export function createShelf3D(container, lib, { works: firstWorks = [], rowsLand
   function peekBox(W, H, T, U0, U1) {
     const cover = new Shape(), spine = new Shape(), back = new Shape(), paper = new Shape(), X = W / 2, Y = H / 2, Z = T / 2
     quad(cover, [-X, Y, Z], [W, 0, 0], [0, -H, 0], [0, 0, 1])
-    quad(spine, [X, Y, Z], [0, 0, -T], [0, -H, 0], [1, 0, 0], [U0, 0, U1, 1]) // en la fila, con el giro, coincide con su trozo de la tira
+    // En la fila, con el giro, coincide con su trozo de la tira, también en la curva.
+    roundSpine(spine, Z, -T, Y, H, X, T * SPINE_ROUND, (along, out) => [out, 0, along], [U0, U1], n => [n[2], 0, n[0]])
     quad(back, [X, Y, -Z], [-W, 0, 0], [0, -H, 0], [0, 0, -1])
     quad(paper, [-X, Y, -Z], [W, 0, 0], [0, 0, T], [0, 1, 0], [0, 0, W, T])
     quad(paper, [-X, -Y, -Z], [W, 0, 0], [0, 0, T], [0, -1, 0], [0, 0, W, T])
@@ -1324,7 +1356,7 @@ export function createShelf3D(container, lib, { works: firstWorks = [], rowsLand
     setZoom,
     draw,
     // Para las pruebas.
-    debug: () => ({ faces: Object.entries(palettes).filter(([k, v]) => k.startsWith('face:') && v).length, facesAsked: Object.keys(palettes).filter(k => k.startsWith('face:')).length, faceWaiting: faceWaiting.length, faceBusy, faceWorker: faceWorker === false ? 'off' : !!faceWorker, rows: rows.map(r => r.map(i => ({ id: i.work.id, vol: i.vol.vol, x: i.x, w: i.w, h: i.h, d: i.d, face: i.face }))), rowWidth, y, x, zoom, velocity, top, bottom, peek: peek && { id: peek.it.work.id, vol: peek.it.vol.vol, t: peek.t, dir: peek.dir, rank: peek.rank, rect: peekRect(), fly: peek.fly ? peek.fly.t : null }, focusId, notes: [...built.values()].map(b => ({ k: b.k, notes: (b.notes?.list || []).map(n => ({ id: n.work.id, x: n.x, w: n.w })) })), logos: logos.size, tilt: { ...tiltNow }, listening: tilt.listening, arts: arts.size, panels: panels.size, built: [...built.keys()], covers: covers.size, palettes: Object.keys(palettes).length, waiting: waiting.length, busy: imgBusy, ctx: !gl.isContextLost() }),
+    debug: () => ({ faces: Object.entries(palettes).filter(([k, v]) => k.startsWith('face:') && v).length, facesAsked: Object.keys(palettes).filter(k => k.startsWith('face:')).length, faceWaiting: faceWaiting.length, faceBusy, faceWorker: faceWorker === false ? 'off' : !!faceWorker, rows: rows.map(r => r.map(i => ({ id: i.work.id, vol: i.vol.vol, x: i.x, w: i.w, h: i.h, d: i.d, face: i.face }))), rowWidth, y, x, zoom, velocity, top, bottom, peek: peek && { id: peek.it.work.id, vol: peek.it.vol.vol, t: peek.t, dir: peek.dir, rank: peek.rank, rect: peekRect(), fly: peek.fly ? peek.fly.t : null }, focusId, notes: [...built.values()].map(b => ({ k: b.k, notes: (b.notes?.list || []).map(n => ({ id: n.work.id, x: n.x, w: n.w })) })), logos: logos.size, tilt: { x: tiltNow.x, y: tiltNow.y }, listening: tilt.listening, arts: arts.size, panels: panels.size, built: [...built.keys()], covers: covers.size, palettes: Object.keys(palettes).length, waiting: waiting.length, busy: imgBusy, ctx: !gl.isContextLost() }),
     destroy() {
       if (faceWorker) faceWorker.terminate()
       dead = true