@musnows/scriverse 0.4.3 → 0.4.5

package/dist/public/relationship-graph.js

@@ -1551,29 +1551,87 @@ export function layoutGalaxy(graph, seed) {
   return { nodes, byId };
 }
 
-export function createGalaxyStarfield(seed, count = 3600) {
+export function createGalaxyStarfield(seed, count = 7200) {
   const random = seededRandom(hashString(seed));
   const stars = [];
   const armCount = 4;
   for (let index = 0; index < count; index += 1) {
-    const radius = 55 + Math.pow(random(), 0.62) * 1380;
+    const population = random();
+    const isCore = population < 0.62;
+    const isHalo = !isCore && population > 0.9;
+    const radius = isCore
+      ? 32 + Math.pow(random(), 1.72) * 720
+      : 160 + Math.pow(random(), 0.68) * 1510;
     const arm = index % armCount;
     const armAngle = arm / armCount * Math.PI * 2;
-    const angle = armAngle + radius * 0.0065 + (random() - 0.5) * (0.42 + radius / 1100);
-    const thickness = 22 + radius * 0.105;
+    const angle = isHalo
+      ? random() * Math.PI * 2
+      : armAngle + radius * 0.0065 + (random() - 0.5) * (isCore ? 0.72 : 0.42 + radius / 1100);
+    const thickness = isHalo ? 70 + radius * 0.2 : (isCore ? 8 + radius * 0.045 : 22 + radius * 0.105);
     const temperature = random();
+    const x = Math.cos(angle) * radius + (random() - 0.5) * (isCore ? 42 : 78);
+    const z = Math.sin(angle) * radius + (random() - 0.5) * (isCore ? 42 : 78);
     stars.push({
-      x: Math.cos(angle) * radius + (random() - 0.5) * 62,
+      x,
       y: (random() + random() + random() - 1.5) * thickness,
-      z: Math.sin(angle) * radius + (random() - 0.5) * 62,
-      size: random() > 0.965 ? 1.7 + random() * 1.4 : 0.45 + random() * 0.85,
-      brightness: 0.22 + random() * 0.78,
+      z,
+      originX: x,
+      originZ: z,
+      vx: 0,
+      vz: 0,
+      size: isCore && random() > 0.94 ? 1.25 + random() * 1.25 : 0.38 + random() * 0.82,
+      brightness: isCore ? 0.3 + random() * 0.7 : 0.16 + random() * 0.66,
       color: temperature < 0.2 ? "255,218,176" : temperature > 0.78 ? "174,211,255" : "226,237,255"
     });
   }
   return stars;
 }
 
+export function stepGalaxyStarfieldPhysics(stars, attractor = null, options = {}) {
+  const deltaMs = clamp(Number(options.deltaMs) || 16.667, 1, 50);
+  const timeScale = deltaMs / 16.667;
+  const influenceRadius = Math.max(1, Number(options.influenceRadius) || 210);
+  const repulsionStrength = Number(options.repulsionStrength) || 5.5;
+  const springStrength = Number(options.springStrength) || 0.006;
+  const damping = clamp(Number(options.damping) || 0.84, 0, 1);
+  let energy = 0;
+
+  for (const star of stars) {
+    const originX = Number(star.originX ?? star.x);
+    const originZ = Number(star.originZ ?? star.z);
+    star.originX = originX;
+    star.originZ = originZ;
+    star.vx = Number(star.vx) || 0;
+    star.vz = Number(star.vz) || 0;
+
+    if (attractor) {
+      const deltaX = star.x - attractor.x;
+      const deltaZ = star.z - attractor.z;
+      const distance = Math.hypot(deltaX, deltaZ);
+      if (distance < influenceRadius) {
+        const angle = Math.atan2(star.originZ, star.originX);
+        const normalX = distance > 0.001 ? deltaX / distance : Math.cos(angle);
+        const normalZ = distance > 0.001 ? deltaZ / distance : Math.sin(angle);
+        const falloff = 1 - distance / influenceRadius;
+        const force = falloff * falloff * repulsionStrength * timeScale;
+        star.vx += normalX * force;
+        star.vz += normalZ * force;
+      }
+    }
+
+    star.vx += (originX - star.x) * springStrength * timeScale;
+    star.vz += (originZ - star.z) * springStrength * timeScale;
+    const frameDamping = Math.pow(damping, timeScale);
+    star.vx *= frameDamping;
+    star.vz *= frameDamping;
+    star.x += star.vx * timeScale;
+    star.z += star.vz * timeScale;
+    energy += Math.abs(star.vx) + Math.abs(star.vz) + Math.abs(originX - star.x) + Math.abs(originZ - star.z);
+  }
+
+  return energy;
+}
+
 export function projectGalaxyPoint(point, camera, viewport) {
   const relativeX = point.x - Number(camera.targetX ?? 0);
   const relativeY = point.y - Number(camera.targetY ?? 0);
@@ -1697,13 +1755,18 @@ export function createGalaxyRenderer(dialog, graph, options = {}) {
   let animationFrame = 0;
   let previousFrameTime = 0;
   let cameraFocus = null;
+  let draggedNode = null;
+  let starPhysicsEnergy = 0;
   let paused = false;
   let starsVisible = true;
+  let gridVisible = false;
   let destroyed = false;
 
   shell.classList.add("is-three-dimensional");
   shell.dataset.sceneDimension = "3";
   shell.dataset.starCount = String(stars.length);
+  shell.dataset.gridVisible = "false";
+  shell.dataset.starPhysicsEnergy = "0";
   shell.dataset.rotationSpeed = String(GALAXY_ROTATION_RADIANS_PER_MS);
   shell.dataset.layoutMinimumRadius = String(GALAXY_LAYOUT_CONFIG.minimumRadius);
   shell.dataset.layoutRadialSpan = String(GALAXY_LAYOUT_CONFIG.radialSpan);
@@ -1743,24 +1806,26 @@ export function createGalaxyRenderer(dialog, graph, options = {}) {
     context.fillStyle = backdrop;
     context.fillRect(0, 0, width, height);
 
-    context.lineWidth = 1;
-    context.strokeStyle = "rgba(105,142,182,.06)";
-    for (let offset = -1200; offset <= 1200; offset += 160) {
-      const horizontalStart = project({ x: -1200, y: 0, z: offset }, width, height);
-      const horizontalEnd = project({ x: 1200, y: 0, z: offset }, width, height);
-      const verticalStart = project({ x: offset, y: 0, z: -1200 }, width, height);
-      const verticalEnd = project({ x: offset, y: 0, z: 1200 }, width, height);
-      if (horizontalStart.visible && horizontalEnd.visible) {
-        context.beginPath();
-        context.moveTo(horizontalStart.x, horizontalStart.y);
-        context.lineTo(horizontalEnd.x, horizontalEnd.y);
-        context.stroke();
-      }
-      if (verticalStart.visible && verticalEnd.visible) {
-        context.beginPath();
-        context.moveTo(verticalStart.x, verticalStart.y);
-        context.lineTo(verticalEnd.x, verticalEnd.y);
-        context.stroke();
+    if (gridVisible) {
+      context.lineWidth = 1;
+      context.strokeStyle = "rgba(105,142,182,.06)";
+      for (let offset = -1200; offset <= 1200; offset += 160) {
+        const horizontalStart = project({ x: -1200, y: 0, z: offset }, width, height);
+        const horizontalEnd = project({ x: 1200, y: 0, z: offset }, width, height);
+        const verticalStart = project({ x: offset, y: 0, z: -1200 }, width, height);
+        const verticalEnd = project({ x: offset, y: 0, z: 1200 }, width, height);
+        if (horizontalStart.visible && horizontalEnd.visible) {
+          context.beginPath();
+          context.moveTo(horizontalStart.x, horizontalStart.y);
+          context.lineTo(horizontalEnd.x, horizontalEnd.y);
+          context.stroke();
+        }
+        if (verticalStart.visible && verticalEnd.visible) {
+          context.beginPath();
+          context.moveTo(verticalStart.x, verticalStart.y);
+          context.lineTo(verticalEnd.x, verticalEnd.y);
+          context.stroke();
+        }
       }
     }
 
@@ -1938,6 +2003,10 @@ export function createGalaxyRenderer(dialog, graph, options = {}) {
       }
     }
     if (!paused && !cameraDrag) camera.yaw += elapsed * GALAXY_ROTATION_RADIANS_PER_MS;
+    if (draggedNode || starPhysicsEnergy > 0.01) {
+      starPhysicsEnergy = stepGalaxyStarfieldPhysics(stars, draggedNode, { deltaMs: elapsed || 16.667 });
+      shell.dataset.starPhysicsEnergy = starPhysicsEnergy.toFixed(3);
+    }
     drawScene();
     animationFrame = window.requestAnimationFrame(renderFrame);
   };
@@ -2072,6 +2141,7 @@ export function createGalaxyRenderer(dialog, graph, options = {}) {
           scale: Number(button.dataset.projectedScale) || 1,
           dragged: false
         };
+        draggedNode = node;
         button.setPointerCapture(event.pointerId);
         button.classList.add("is-dragging");
         button.setAttribute("aria-grabbed", "true");
@@ -2099,6 +2169,7 @@ export function createGalaxyRenderer(dialog, graph, options = {}) {
         if (!nodeDrag || event.pointerId !== nodeDrag.pointerId) return;
         suppressClick = nodeDrag.dragged;
         nodeDrag = null;
+        if (draggedNode === node) draggedNode = null;
         button.classList.remove("is-dragging");
         button.setAttribute("aria-grabbed", "false");
         if (button.hasPointerCapture(event.pointerId)) button.releasePointerCapture(event.pointerId);
@@ -2156,9 +2227,13 @@ export function createGalaxyRenderer(dialog, graph, options = {}) {
     if (!dialog.open) dialog.showModal();
     paused = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     starsVisible = true;
+    gridVisible = false;
     background.classList.remove("hidden-stars");
+    shell.dataset.gridVisible = "false";
     dialog.querySelector("#galaxy-stars").setAttribute("aria-pressed", "true");
     dialog.querySelector("#galaxy-stars").textContent = "隐藏背景星点";
+    dialog.querySelector("#galaxy-grid").setAttribute("aria-pressed", "false");
+    dialog.querySelector("#galaxy-grid").textContent = "显示空间网格";
     updateRotationControl();
     stats.value = `${graph.stats.nodeCount} 个节点 / ${graph.stats.edgeCount} 条关系`;
     renderNodes();
@@ -2182,6 +2257,13 @@ export function createGalaxyRenderer(dialog, graph, options = {}) {
     event.currentTarget.textContent = starsVisible ? "隐藏背景星点" : "显示背景星点";
     drawScene();
   });
+  listen(dialog.querySelector("#galaxy-grid"), "click", (event) => {
+    gridVisible = !gridVisible;
+    shell.dataset.gridVisible = String(gridVisible);
+    event.currentTarget.setAttribute("aria-pressed", String(gridVisible));
+    event.currentTarget.textContent = gridVisible ? "隐藏空间网格" : "显示空间网格";
+    drawScene();
+  });
   listen(dialog.querySelector("#galaxy-rotation"), "click", () => {
     paused = !paused;
     updateRotationControl();

package/dist/public/styles.css

@@ -65,6 +65,9 @@
 }
 
 .auth-pending .app-shell { pointer-events: none; user-select: none; }
+.dev-auth-bypass .auth-view { display: none !important; }
+.dev-auth-bypass .auth-pending .app-shell { pointer-events: auto; user-select: auto; }
+.dev-auth-bypass .auth-loading { display: none !important; }
 .auth-loading { display: none; }
 .auth-pending .auth-loading { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; pointer-events: none; }
 .auth-loading::before { content: ""; width: 32px; height: 32px; border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: auth-loading-spin .8s linear infinite; }
@@ -342,7 +345,7 @@ input[type="checkbox"][hidden] { display: none; }
   align-items: center;
   border-bottom: 1px solid var(--line);
   background: var(--panel);
-  z-index: 5;
+  z-index: 20;
 }
 
 .brand-block { display: flex; align-items: center; gap: 11px; padding: 0 20px; border: 0; background: transparent; text-align: left; }
@@ -352,6 +355,8 @@ input[type="checkbox"][hidden] { display: none; }
 .brand-block small { color: var(--muted); font-size: 10px; margin-top: 2px; }
 .work-meta { font-size: 13px; color: var(--muted); padding-left: 26px; }
 .top-actions { position: relative; display: flex; justify-content: flex-end; gap: 10px; align-items: center; padding-right: 18px; }
+.mobile-module-tab { display: none; }
+.mobile-panel-backdrop { display: none; }
 .presence-control { position: relative; }
 .presence-button { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 18px; background: transparent; color: var(--muted); font-size: 11px; }
 .presence-button:hover, .presence-button:focus-visible, .presence-button[aria-expanded="true"] { border-color: var(--accent); background: var(--paper-deep); color: var(--accent-dark); outline: none; }
@@ -872,7 +877,7 @@ select:focus, input:focus, textarea:focus { border-color: #a77768; box-shadow: 0
 .chapter-add-button { flex: none; }
 .volume-chapters { display: block; }
 .volume-node.is-collapsed .volume-chapters { display: none; }
-.chapter-node { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 8px; width: 100%; padding: 9px 0 9px 20px; border: 0; background: transparent; border-radius: 4px; text-align: left; font-size: 12px; }
+.chapter-node { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 8px; width: calc(100% + 6px); padding: 9px 6px 9px 20px; border: 0; background: transparent; border-radius: 4px; text-align: left; font-size: 12px; }
 .chapter-node:hover, .chapter-node.active { background: var(--row-active); }
 .chapter-node.active { color: var(--accent-dark); font-weight: 700; }
 .chapter-node > span:first-child { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; white-space: normal; }
@@ -970,6 +975,7 @@ select:focus, input:focus, textarea:focus { border-color: #a77768; box-shadow: 0
 .module-row-path { display: block; margin-top: 2px; color: var(--accent); font-family: var(--font-latin), monospace; font-size: 11px; font-weight: 500; }
 .module-row-span { grid-column: 1 / -1; }
 .setting-row .card-actions, .module-row .card-actions { margin-top: 0; flex-wrap: wrap; justify-content: flex-end; }
+.module-row .card-actions > .record-card-edit { position: static; }
 .character-card { cursor: pointer; }
 .character-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .character-audit-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 15px 17px; border: 1px solid var(--line); background: var(--surface-soft); }
@@ -981,8 +987,8 @@ select:focus, input:focus, textarea:focus { border-color: #a77768; box-shadow: 0
 .character-duplicate-pair section > small { color: var(--muted); }
 .character-duplicate-pair section p { margin: 0; }
 .character-duplicate-evidence { display: grid; gap: 8px; margin: 13px 0; padding: 0; list-style: none; }
-.character-duplicate-evidence li { display: grid; gap: 5px; padding: 10px 12px; border-left: 2px solid var(--accent); background: var(--surface-soft); }
-.character-duplicate-evidence q { color: var(--text); line-height: 1.55; }
+.character-duplicate-evidence li { display: grid; gap: 5px; padding: 10px 12px; border-left: 2px solid var(--accent); background: var(--surface-soft); font-size: 12px; }
+.character-duplicate-evidence q { color: var(--text); font-size: 12px; line-height: 1.45; }
 .character-duplicate-evidence small, .review-resolution-note { color: var(--muted); }
 .character-duplicate-actions { flex-wrap: wrap; }
 .card-actions { display: flex; gap: 6px; margin-top: 15px; }
@@ -1333,9 +1339,9 @@ select:focus, input:focus, textarea:focus { border-color: #a77768; box-shadow: 0
 .galaxy-node { --node-size: 12px; position: absolute; left: 0; top: 0; display: grid; grid-template-rows: var(--node-size) auto; justify-items: center; align-items: start; gap: 5px; padding: 8px; border: 0; background: transparent; color: #edf7ff; cursor: grab; touch-action: none; pointer-events: auto; transform-origin: center; opacity: var(--depth-opacity, 1); will-change: transform, opacity; }
 .galaxy-node i { position: relative; isolation: isolate; width: var(--node-size); height: var(--node-size); border-radius: 50%; background: radial-gradient(circle at 32% 27%, var(--node-core, #fff) 0 7%, color-mix(in srgb, var(--node-color) 62%, #fff) 18%, var(--node-color) 52%, var(--node-rim, #07101f) 100%); box-shadow: inset -3px -4px 7px color-mix(in srgb, var(--node-rim, #07101f) 74%, transparent), 0 0 4px rgba(255,255,255,.82), 0 0 calc(7px + var(--node-glow) * 11px) var(--node-color), 0 0 calc(15px + var(--node-glow) * 25px) var(--node-atmosphere, color-mix(in srgb, var(--node-color) 72%, transparent)); filter: brightness(var(--node-brightness)); transition: filter .18s ease, box-shadow .18s ease; }
 .galaxy-node i::before, .galaxy-node i::after { content: ""; position: absolute; pointer-events: none; }
-.galaxy-node i::before { z-index: -1; inset: -42%; border-radius: 50%; background: radial-gradient(circle, var(--node-atmosphere) 0, transparent 68%); opacity: .64; }
+.galaxy-node i::before { z-index: -1; inset: -34%; border-radius: 50%; background: radial-gradient(circle, var(--node-atmosphere) 0, transparent 68%); opacity: .64; }
 .galaxy-node[data-celestial-type="star"] i { background: radial-gradient(circle at 38% 34%, #fff 0 10%, var(--node-core) 22%, var(--node-color) 53%, var(--node-rim) 100%); box-shadow: 0 0 5px #fff, 0 0 calc(10px + var(--node-glow) * 15px) var(--node-color), 0 0 calc(24px + var(--node-glow) * 34px) var(--node-atmosphere); }
-.galaxy-node[data-celestial-type="star"] i::before { inset: -72%; opacity: .92; background: radial-gradient(circle, var(--node-atmosphere) 0 12%, transparent 66%); }
+.galaxy-node[data-celestial-type="star"] i::before { inset: -48%; opacity: .92; background: radial-gradient(circle, var(--node-atmosphere) 0 12%, transparent 66%); }
 .galaxy-node[data-celestial-type="gas-giant"] i { background: linear-gradient(168deg, transparent 0 17%, color-mix(in srgb, var(--node-core) 78%, transparent) 18% 25%, transparent 26% 40%, color-mix(in srgb, var(--node-rim) 64%, transparent) 41% 50%, transparent 51% 68%, color-mix(in srgb, var(--node-core) 54%, transparent) 69% 75%, transparent 76%), radial-gradient(circle at 34% 28%, var(--node-core) 0 7%, var(--node-color) 42%, var(--node-rim) 100%); }
 .galaxy-node[data-celestial-type="ringed"] i::after { z-index: 2; left: 50%; top: 50%; width: 168%; height: 48%; border: 1px solid var(--node-ring); border-left-color: color-mix(in srgb, var(--node-ring) 28%, transparent); border-right-color: color-mix(in srgb, var(--node-ring) 88%, #fff); border-radius: 50%; box-shadow: 0 0 3px var(--node-atmosphere); transform: translate(-50%, -50%) rotate(-19deg); }
 .galaxy-node[data-celestial-type="ocean"] i { background: radial-gradient(ellipse at 67% 63%, color-mix(in srgb, var(--node-core) 48%, transparent) 0 10%, transparent 12%), radial-gradient(circle at 28% 24%, var(--node-core) 0 6%, var(--node-color) 38%, color-mix(in srgb, var(--node-color) 58%, #0b2f62) 72%, var(--node-rim) 100%); }
@@ -1695,6 +1701,8 @@ select:focus, input:focus, textarea:focus { border-color: #a77768; box-shadow: 0
 .entity-editor-header, .character-editor-header { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr) minmax(160px, 1fr); align-items: center; gap: 24px; min-height: 78px; padding: 14px clamp(18px, 3vw, 44px); border-bottom: 1px solid var(--line); background: var(--panel); }
 .entity-editor-heading { min-width: 0; text-align: center; }
 .entity-editor-heading h1 { overflow: hidden; margin: 2px 0 0; font-size: 24px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
+.entity-editor-readonly-badge { display: inline-block; width: fit-content; margin: 0 auto; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--muted) 55%, var(--line)); border-radius: 999px; color: var(--muted); font-size: 10px; line-height: 1.2; }
+.character-editor-title-row .entity-editor-readonly-badge { margin-left: 6px; vertical-align: middle; }
 .entity-editor-header > .primary-button { justify-self: end; min-width: 112px; }
 .entity-editor-back { justify-self: start; min-height: 36px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); font-size: 11px; }
 .entity-editor-back::before { content: "←"; margin-right: 7px; }
@@ -1725,7 +1733,13 @@ select:focus, input:focus, textarea:focus { border-color: #a77768; box-shadow: 0
 .vditor-editor-host.vditor { height: 100% !important; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
 .vditor-editor-host.vditor:not(.vditor--dark) { --border-color: var(--line); --panel-background-color: var(--surface); --toolbar-background-color: var(--surface-soft); --toolbar-icon-color: var(--muted); --toolbar-icon-hover-color: var(--accent-dark); --textarea-background-color: var(--surface); --textarea-text-color: var(--ink); --heading-border-color: var(--line); --blockquote-color: var(--muted); }
 .vditor-editor-host.vditor--dark { --border-color: var(--line); --panel-background-color: var(--surface); --toolbar-background-color: var(--surface-soft); --toolbar-icon-color: var(--muted); --toolbar-icon-hover-color: var(--accent); --textarea-background-color: var(--surface); --textarea-text-color: var(--ink); --heading-border-color: var(--line); --blockquote-color: var(--muted); }
-.vditor-editor-host .vditor-toolbar { flex: 0 0 auto; }
+.vditor-editor-host .vditor-toolbar { display: flex; align-items: center; flex: 0 0 auto; }
+.vditor-editor-host .markdown-word-count { display: inline-flex; align-items: center; align-self: center; min-height: 28px; margin-left: 24px; padding: 0 10px; color: var(--muted); font: 10px/1 var(--font-latin), var(--font-cjk), sans-serif; white-space: nowrap; }
+.vditor-editor-host .vditor-content { position: relative; }
+.vditor-editor-host .vditor-line-numbers { display: none; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 42px; padding: 16px 8px 16px 0; overflow: hidden; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface-soft) 88%, transparent); color: var(--muted); font: 12px/1.75 var(--font-latin), monospace; text-align: right; user-select: none; pointer-events: none; }
+.vditor-editor-host.vditor.show-line-numbers .vditor-line-numbers { display: grid; align-content: start; }
+.vditor-editor-host.vditor.show-line-numbers .vditor-ir, .vditor-editor-host.vditor.show-line-numbers .vditor-wysiwyg, .vditor-editor-host.vditor.show-line-numbers .vditor-sv textarea { padding-left: 42px; }
+.vditor-editor-host .vditor-line-number-button[aria-pressed="true"] { color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 16%, transparent); }
 .vditor-editor-host .vditor-content { min-height: 0; }
 .vditor-editor-host .vditor-reset { color: var(--ink); font-family: var(--font-cjk), var(--font-latin), sans-serif; }
 .vditor-editor-host .vditor-ir, .vditor-editor-host .vditor-sv, .vditor-editor-host .vditor-wysiwyg { background: var(--surface); color: var(--ink); }
@@ -1830,11 +1844,14 @@ select:focus, input:focus, textarea:focus { border-color: #a77768; box-shadow: 0
 .character-section-editor-header > div { grid-column: 1; grid-row: 1; justify-self: center; text-align: center; }
 .character-section-editor-header .entity-editor-back { grid-column: 1; grid-row: 1; z-index: 1; }
 .character-section-editor-header h2 { margin: 3px 0 0; font-size: 22px; font-weight: 600; }
+.character-section-editor-title-input { width: min(100%, 520px); margin: 3px auto 0; padding: 0 0 4px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; color: var(--ink); font-size: 22px; font-weight: 600; line-height: 1.2; text-align: center; }
+.character-section-editor-title-input::placeholder { color: var(--ink); opacity: .92; }
+.character-section-editor-title-input:focus { border-color: var(--accent); box-shadow: none; }
 .character-markdown-editor { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; min-height: 0; padding: 16px 22px 18px; overflow: hidden; background: var(--surface-soft); }
 .character-markdown-editor > .vditor-editor-host { width: 100%; max-width: 960px; justify-self: center; }
 .character-markdown-editor > .vditor-editor-host.vditor { border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); box-shadow: 0 12px 34px color-mix(in srgb, var(--ink) 12%, transparent); transition: border-color .16s ease, box-shadow .16s ease; }
 .character-markdown-editor > .vditor-editor-host.vditor:focus-within { border-color: color-mix(in srgb, var(--accent) 62%, var(--line)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent), 0 16px 42px color-mix(in srgb, var(--ink) 16%, transparent); }
-.character-markdown-editor-meta { display: grid; grid-template-columns: minmax(140px, .55fr) minmax(220px, 1fr) minmax(280px, 1.45fr); gap: 12px; }
+.character-markdown-editor-meta { display: grid; grid-template-columns: minmax(160px, .55fr) minmax(280px, 1.45fr); gap: 12px; }
 .character-markdown-editor label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; }
 .character-markdown-editor input, .character-markdown-editor select, .character-markdown-editor textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 12px; }
 .character-markdown-summary-field textarea { min-height: 42px; height: 42px; resize: vertical; }
@@ -1987,6 +2004,234 @@ select:focus, input:focus, textarea:focus { border-color: #a77768; box-shadow: 0
   .account-settings-form .primary-button { width: 100%; }
 }
 
+/* 移动端工作台：仅在窄屏覆盖桌面三栏布局，保留桌面端原有尺寸与排列。 */
+@media (max-width: 850px) {
+  :root { --mobile-gutter: 14px; }
+
+  html, body { min-width: 0; overflow-x: hidden; }
+  body { -webkit-text-size-adjust: 100%; }
+  button, select, input, textarea, [contenteditable="true"] { touch-action: manipulation; }
+  button, .ghost-button, .primary-button, .danger-button, select { min-height: 40px; }
+
+  .app-shell {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto auto minmax(0, 1fr);
+    min-height: 100dvh;
+    height: 100dvh;
+    overflow-x: hidden;
+    overflow-y: hidden;
+  }
+  .app-shell.shelf-mode {
+    grid-template-rows: auto minmax(0, 1fr);
+    min-height: 100dvh;
+  }
+  .topbar {
+    grid-column: 1;
+    grid-row: 1;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: 56px auto;
+    min-width: 0;
+    padding: 0 var(--mobile-gutter);
+  }
+  .app-shell.shelf-mode .topbar { grid-template-columns: minmax(0, 1fr) auto; }
+  .brand-block { min-width: 0; padding: 0; }
+  .app-shell:not(.shelf-mode):not(.left-panel-collapsed) .topbar .brand-block > div { visibility: hidden; }
+  .brand-block .brand-mark { width: 30px; height: 30px; }
+  .brand-block strong { font-size: 14px; }
+  .brand-block small { display: none; }
+  .mobile-module-tab { position: fixed; z-index: 32; top: 132px; right: 0; display: grid; width: 34px; height: 42px; padding: 0; place-items: center; border: 1px solid var(--line); border-right: 0; border-radius: 5px 0 0 5px; background: var(--surface-soft); color: var(--accent-dark); font-size: 10px; writing-mode: vertical-rl; }
+  .mobile-panel-backdrop { position: fixed; z-index: 30; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(20, 17, 14, .28); }
+  .app-shell:not(.shelf-mode):not(.left-panel-collapsed) .mobile-panel-backdrop { display: block; }
+  .work-meta {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    min-width: 0;
+    padding: 8px 0 10px;
+    border-top: 1px solid var(--line);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 11px;
+  }
+  .top-actions { gap: 5px; padding: 0; }
+  .top-actions .save-state, .top-actions .presence-control { display: none; }
+  .account-button { width: 34px; height: 34px; padding: 3px; }
+  .account-button > span:last-child { display: none; }
+  .account-button { width: 36px; min-width: 36px; height: 36px; padding: 3px; justify-content: center; border-radius: 50%; }
+  .account-avatar { width: 28px; height: 28px; }
+  .account-menu { top: 46px; right: 0; width: min(220px, calc(100vw - 28px)); }
+  .topbar-icon-button, .theme-toggle, .settings-button { width: 36px; height: 36px; min-height: 0; }
+  button.account-button { width: 36px; height: 36px; min-height: 0; }
+
+  .left-panel {
+    position: fixed;
+    z-index: 31;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: min(300px, 84vw);
+    grid-column: auto;
+    grid-row: auto;
+    min-width: 0;
+    padding: 76px var(--mobile-gutter) 18px;
+    border-left: 1px solid var(--line);
+    border-bottom: 1px solid var(--line);
+    box-shadow: -12px 0 36px rgba(36, 30, 24, .2);
+    overflow-y: auto;
+    transform: translateX(0);
+    transition: transform .2s ease;
+  }
+  .app-shell.left-panel-collapsed .left-panel { padding: 76px var(--mobile-gutter) 18px; transform: translateX(100%); }
+  .app-shell.left-panel-collapsed .left-panel > :not(.left-actions) { display: block; }
+  .app-shell.left-panel-collapsed .left-panel > .module-nav { display: grid; }
+  .left-panel > .panel-resize-handle { display: none; }
+  .left-actions { margin: 0 0 8px; }
+  .left-primary-actions { gap: 6px; }
+  .left-primary-actions .file-button { display: none; }
+  .left-primary-actions #left-panel-toggle { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; font-size: 22px; }
+  .module-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0 0 8px; overflow: visible; }
+  .module-nav > button {
+    flex: 0 0 auto;
+    min-height: 42px;
+    padding: 8px 12px;
+    white-space: nowrap;
+  }
+  .module-nav .nav-icon { width: 16px; height: 16px; }
+  .module-nav .module-nav-secondary.hidden { display: none !important; }
+  .panel-heading, #novel-tree { display: none; }
+  .app-shell.left-panel-collapsed .left-panel { padding: 8px var(--mobile-gutter) 0; }
+  .app-shell.left-panel-collapsed .left-actions { display: block; padding: 0; }
+
+  .main-panel {
+    grid-column: 1;
+    grid-row: 2;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+  .app-shell.shelf-mode .main-panel { grid-column: 1; grid-row: 2; min-height: 0; }
+  .ai-panel {
+    position: fixed;
+    z-index: 25;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    grid-column: 1;
+    grid-row: 4;
+    min-width: 0;
+    height: min(72dvh, 620px);
+    min-height: 0;
+    padding: 12px var(--mobile-gutter) 18px;
+    border-top: 1px solid var(--line);
+    border-left: 0;
+    box-shadow: 0 -14px 36px rgba(36, 30, 24, .14);
+    transform: translateY(0);
+    transition: transform .2s ease;
+  }
+  .app-shell.shelf-mode .ai-panel { display: none; }
+  .ai-panel > .panel-resize-handle { display: none; }
+  .app-shell.ai-panel-collapsed .ai-panel { height: 58px; padding-block: 8px; transform: translateY(0); }
+  .app-shell.ai-panel-collapsed .ai-panel > :not(.ai-heading) { display: none; }
+  .app-shell.ai-panel-collapsed .ai-heading { display: flex; justify-content: space-between; padding: 0; }
+
+  .shelf-view { height: auto; min-height: 100%; padding: 28px var(--mobile-gutter) 42px; }
+  #shelf-view, #settings-hub-view { padding-bottom: 0; }
+  #shelf-view .product-footer, #settings-hub-view .product-footer { margin-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
+  .shelf-header, .module-header { align-items: stretch; flex-direction: column; gap: 14px; margin-bottom: 20px; }
+  .shelf-header h1 { font-size: clamp(24px, 7.5vw, 32px); }
+  .shelf-header .primary-button { align-self: flex-start; min-width: 150px; min-height: 40px; padding: 10px 18px; }
+  .module-header-actions { width: 100%; }
+  .book-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
+  .book-info { padding-top: 10px; padding-right: 0; }
+  .book-info strong { font-size: 14px; }
+  .book-card-settings { opacity: 1; }
+  .welcome-view { padding: 28px var(--mobile-gutter); }
+  .welcome-view h1 { font-size: clamp(30px, 9vw, 44px); }
+  .welcome-grid { grid-template-columns: 1fr; margin-top: 34px; }
+
+  .editor-toolbar { padding: 18px var(--mobile-gutter) 14px; }
+  .editor-actions { position: fixed; z-index: 34; right: 0; bottom: 18px; left: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(300px, 84vw); max-width: none; gap: 6px; padding: 10px; border: 1px solid var(--line); border-right: 0; border-radius: 6px 0 0 6px; background: var(--panel); box-shadow: -12px 0 36px rgba(36, 30, 24, .2); transform: translateX(0); transition: transform .2s ease; }
+  .app-shell.left-panel-collapsed .editor-actions { transform: translateX(100%); pointer-events: none; }
+  .editor-actions .chapter-stats { grid-column: 1 / -1; }
+  .editor-actions > button { min-width: 0; min-height: 36px; padding-inline: 8px; font-size: 11px; }
+  .chapter-title { font-size: 23px; }
+  .chapter-content { padding: 22px 16px 64px 12px; font-size: max(16px, var(--editor-font-size)); }
+  .chapter-line-numbers { width: 32px; font-size: 11px; }
+  .chapter-editor-frame { grid-template-columns: 32px minmax(0, 1fr); }
+  .chapter-line-measure { left: 32px; }
+  .chapter-insight { margin: 10px var(--mobile-gutter) 0; }
+
+  .module-view { padding: 26px var(--mobile-gutter) 46px; }
+  .module-header { padding-bottom: 18px; }
+  .module-header h1 { font-size: 29px; }
+  .module-header-actions { justify-content: stretch; }
+  .module-header-actions > * { flex: 1 1 auto; }
+  .module-content { padding: 18px 0 56px; }
+  .card-grid, .provider-card-grid { grid-template-columns: minmax(0, 1fr); }
+  .record-card { padding: 15px; }
+  .card-actions, .task-row-actions, .module-header-actions { gap: 8px; }
+  .card-actions button, .task-row-actions button { flex: 1 1 auto; min-height: 38px; }
+  .setting-row, .module-row { padding: 13px; }
+  .settings-layout-toolbar, .module-layout-toolbar { align-items: stretch; flex-direction: column; }
+  .settings-layout-toggle, .module-layout-toggle { width: 100%; }
+  .settings-layout-toggle button { flex: 1; }
+
+  .dialog, .wide-dialog, .account-dialog {
+    width: calc(100vw - 20px);
+    max-width: calc(100vw - 20px);
+    max-height: calc(100dvh - 20px);
+    margin: auto;
+    border-radius: 10px;
+  }
+  .dialog-header { padding: 14px 16px 12px; }
+  .dialog-header h2 { font-size: 20px; }
+  .dialog-fields, .appearance-grid, .access-dialog-body, .account-settings-body, .versions-list, .entity-history-list { padding-inline: 16px; }
+  .dialog-actions { flex-wrap: wrap; padding: 12px 16px 16px; }
+  .dialog-actions > button { flex: 1 1 120px; }
+  .search-form { grid-template-columns: minmax(0, 1fr); }
+  .search-form .primary-button { width: 100%; }
+  .appearance-grid { grid-template-columns: minmax(0, 1fr); }
+  .appearance-whitespace-field, .font-preview { grid-column: auto; }
+  .access-row { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
+  .access-row select, .access-row button, .work-access-field .ghost-button { width: 100%; }
+  .work-access-field { align-items: stretch; flex-direction: column; }
+
+  .entity-editor-view { min-width: 0; }
+  .entity-editor-header, .character-editor-header { grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 12px var(--mobile-gutter); }
+  .entity-editor-mode-actions, .character-editor-header-actions { grid-column: 1 / -1; justify-content: stretch; flex-wrap: wrap; }
+  .entity-editor-mode-actions > button, .character-editor-header-actions > button { flex: 1 1 auto; }
+  .setting-editor-header { min-height: 0; }
+  .setting-editor-content { padding: 12px; }
+  .setting-markdown-field { height: 68dvh; }
+  .character-editor-actions { padding: 12px var(--mobile-gutter) 16px; }
+  .character-editor-actions > div { justify-content: stretch; flex-wrap: wrap; }
+  .character-editor-actions > div > button { flex: 1 1 auto; }
+  .character-markdown-editor { padding: 12px; }
+  .character-markdown-editor-actions { justify-content: stretch; flex-wrap: wrap; }
+  .character-markdown-editor-actions button { flex: 1 1 auto; }
+
+  .relationship-table-wrapper, .data-table-wrapper, .table-scroll, .module-table-wrapper { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  table { min-width: 620px; }
+}
+
+@media (max-width: 480px) {
+  .top-actions .settings-button { display: none; }
+  .topbar-icon-button, .theme-toggle, .account-button { flex: 0 0 32px; width: 32px; min-width: 32px; height: 32px; }
+  button.account-button { width: 32px; height: 32px; }
+  .top-actions { gap: 3px; }
+  .left-primary-actions .file-button { font-size: 10px; }
+  .editor-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .editor-actions .chapter-stats { display: none; }
+  .editor-actions > button { width: auto; }
+  .book-shelf { grid-template-columns: minmax(0, 1fr); max-width: 280px; }
+  .book-add-card { min-height: 220px; }
+  .onboarding-popover { width: calc(100vw - 20px); }
+}
+
+@media (max-width: 850px) {
+  #onboarding-menu-button { display: none; }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
 }