@musnows/scriverse 0.4.7 → 0.4.9

package/dist/public/avatar-crop.d.ts

@@ -0,0 +1,57 @@
+export type CropRect = {
+  x: number;
+  y: number;
+  size: number;
+};
+
+export type DisplayRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  scale: number;
+};
+
+export type CropHandle = "nw" | "ne" | "sw" | "se";
+
+export const AVATAR_CROP_OUTPUT_SIZE: number;
+export const AVATAR_CROP_MIN_SIZE: number;
+
+export function defaultCropRect(imageWidth: number, imageHeight: number): CropRect;
+export function clampCropRect(
+  rect: Partial<CropRect> | null | undefined,
+  imageWidth: number,
+  imageHeight: number,
+  minSize?: number
+): CropRect;
+export function moveCropRect(
+  rect: Partial<CropRect> | null | undefined,
+  deltaX: number,
+  deltaY: number,
+  imageWidth: number,
+  imageHeight: number
+): CropRect;
+export function resizeCropRect(
+  rect: Partial<CropRect> | null | undefined,
+  handle: CropHandle | string,
+  pointerX: number,
+  pointerY: number,
+  imageWidth: number,
+  imageHeight: number
+): CropRect;
+export function containImageRect(
+  imageWidth: number,
+  imageHeight: number,
+  viewportWidth: number,
+  viewportHeight: number
+): DisplayRect;
+export function mapDisplayPointToImage(
+  point: { x: number; y: number },
+  displayRect: DisplayRect
+): { x: number; y: number };
+export function mapImageRectToDisplay(cropRect: CropRect, displayRect: DisplayRect): {
+  x: number;
+  y: number;
+  size: number;
+};
+export function cropOutputSize(cropSize: number, maxSize?: number): number;

package/dist/public/avatar-crop.js

@@ -0,0 +1,201 @@
+/** 头像裁剪输出边长上限（像素） */
+export const AVATAR_CROP_OUTPUT_SIZE = 512;
+
+/** 选区最小边长（原图像素） */
+export const AVATAR_CROP_MIN_SIZE = 32;
+
+/**
+ * @typedef {{ x: number, y: number, size: number }} CropRect
+ * @typedef {{ x: number, y: number, width: number, height: number, scale: number }} DisplayRect
+ */
+
+function finitePositive(value) {
+  return Number.isFinite(value) && value > 0 ? value : 0;
+}
+
+/**
+ * 在图片内取居中最大正方形作为默认选区。
+ * @param {number} imageWidth
+ * @param {number} imageHeight
+ * @returns {CropRect}
+ */
+export function defaultCropRect(imageWidth, imageHeight) {
+  const width = Math.max(0, Math.floor(finitePositive(imageWidth)));
+  const height = Math.max(0, Math.floor(finitePositive(imageHeight)));
+  const size = Math.min(width, height);
+  if (size < 1) return { x: 0, y: 0, size: 0 };
+  return {
+    x: Math.floor((width - size) / 2),
+    y: Math.floor((height - size) / 2),
+    size
+  };
+}
+
+/**
+ * 将正方形选区钳制在图片范围内。
+ * @param {Partial<CropRect>} rect
+ * @param {number} imageWidth
+ * @param {number} imageHeight
+ * @param {number} [minSize]
+ * @returns {CropRect}
+ */
+export function clampCropRect(rect, imageWidth, imageHeight, minSize = AVATAR_CROP_MIN_SIZE) {
+  const width = Math.max(0, Math.floor(finitePositive(imageWidth)));
+  const height = Math.max(0, Math.floor(finitePositive(imageHeight)));
+  if (width < 1 || height < 1) return { x: 0, y: 0, size: 0 };
+
+  const maxSize = Math.min(width, height);
+  const floorMin = Math.max(1, Math.min(Math.floor(finitePositive(minSize)) || 1, maxSize));
+  let size = Math.floor(finitePositive(rect?.size));
+  if (size < floorMin) size = floorMin;
+  if (size > maxSize) size = maxSize;
+
+  let x = Math.floor(Number(rect?.x) || 0);
+  let y = Math.floor(Number(rect?.y) || 0);
+  if (x < 0) x = 0;
+  if (y < 0) y = 0;
+  if (x > width - size) x = width - size;
+  if (y > height - size) y = height - size;
+  return { x, y, size };
+}
+
+/**
+ * 平移选区。
+ * @param {CropRect} rect
+ * @param {number} deltaX
+ * @param {number} deltaY
+ * @param {number} imageWidth
+ * @param {number} imageHeight
+ * @returns {CropRect}
+ */
+export function moveCropRect(rect, deltaX, deltaY, imageWidth, imageHeight) {
+  return clampCropRect({
+    x: (Number(rect?.x) || 0) + (Number(deltaX) || 0),
+    y: (Number(rect?.y) || 0) + (Number(deltaY) || 0),
+    size: rect?.size
+  }, imageWidth, imageHeight);
+}
+
+/**
+ * 从四角手柄调整正方形选区，对边角保持固定。
+ * @param {CropRect} rect
+ * @param {"nw"|"ne"|"sw"|"se"} handle
+ * @param {number} pointerX 原图像素坐标
+ * @param {number} pointerY 原图像素坐标
+ * @param {number} imageWidth
+ * @param {number} imageHeight
+ * @returns {CropRect}
+ */
+export function resizeCropRect(rect, handle, pointerX, pointerY, imageWidth, imageHeight) {
+  const current = clampCropRect(rect, imageWidth, imageHeight);
+  const left = current.x;
+  const top = current.y;
+  const right = current.x + current.size;
+  const bottom = current.y + current.size;
+  const px = Number(pointerX) || 0;
+  const py = Number(pointerY) || 0;
+
+  let nextLeft = left;
+  let nextTop = top;
+  let nextRight = right;
+  let nextBottom = bottom;
+
+  if (handle === "nw") {
+    nextLeft = px;
+    nextTop = py;
+  } else if (handle === "ne") {
+    nextRight = px;
+    nextTop = py;
+  } else if (handle === "sw") {
+    nextLeft = px;
+    nextBottom = py;
+  } else {
+    nextRight = px;
+    nextBottom = py;
+  }
+
+  const widthSpan = Math.abs(nextRight - nextLeft);
+  const heightSpan = Math.abs(nextBottom - nextTop);
+  const size = Math.max(widthSpan, heightSpan);
+
+  if (handle === "nw") {
+    return clampCropRect({ x: right - size, y: bottom - size, size }, imageWidth, imageHeight);
+  }
+  if (handle === "ne") {
+    return clampCropRect({ x: left, y: bottom - size, size }, imageWidth, imageHeight);
+  }
+  if (handle === "sw") {
+    return clampCropRect({ x: right - size, y: top, size }, imageWidth, imageHeight);
+  }
+  return clampCropRect({ x: left, y: top, size }, imageWidth, imageHeight);
+}
+
+/**
+ * 计算 object-fit: contain 时图片在视口中的显示矩形。
+ * @param {number} imageWidth
+ * @param {number} imageHeight
+ * @param {number} viewportWidth
+ * @param {number} viewportHeight
+ * @returns {DisplayRect}
+ */
+export function containImageRect(imageWidth, imageHeight, viewportWidth, viewportHeight) {
+  const width = finitePositive(imageWidth);
+  const height = finitePositive(imageHeight);
+  const viewW = finitePositive(viewportWidth);
+  const viewH = finitePositive(viewportHeight);
+  if (!width || !height || !viewW || !viewH) {
+    return { x: 0, y: 0, width: 0, height: 0, scale: 0 };
+  }
+  const scale = Math.min(viewW / width, viewH / height);
+  const displayWidth = width * scale;
+  const displayHeight = height * scale;
+  return {
+    x: (viewW - displayWidth) / 2,
+    y: (viewH - displayHeight) / 2,
+    width: displayWidth,
+    height: displayHeight,
+    scale
+  };
+}
+
+/**
+ * 视口坐标映射到原图像素坐标。
+ * @param {{ x: number, y: number }} point
+ * @param {DisplayRect} displayRect
+ * @returns {{ x: number, y: number }}
+ */
+export function mapDisplayPointToImage(point, displayRect) {
+  const scale = finitePositive(displayRect?.scale);
+  if (!scale) return { x: 0, y: 0 };
+  return {
+    x: ((Number(point?.x) || 0) - (Number(displayRect.x) || 0)) / scale,
+    y: ((Number(point?.y) || 0) - (Number(displayRect.y) || 0)) / scale
+  };
+}
+
+/**
+ * 原图选区映射到视口显示矩形。
+ * @param {CropRect} cropRect
+ * @param {DisplayRect} displayRect
+ * @returns {{ x: number, y: number, size: number }}
+ */
+export function mapImageRectToDisplay(cropRect, displayRect) {
+  const scale = finitePositive(displayRect?.scale);
+  return {
+    x: (Number(displayRect?.x) || 0) + (Number(cropRect?.x) || 0) * scale,
+    y: (Number(displayRect?.y) || 0) + (Number(cropRect?.y) || 0) * scale,
+    size: (Number(cropRect?.size) || 0) * scale
+  };
+}
+
+/**
+ * 裁剪输出边长：不超过原选区，也不超过上限。
+ * @param {number} cropSize
+ * @param {number} [maxSize]
+ * @returns {number}
+ */
+export function cropOutputSize(cropSize, maxSize = AVATAR_CROP_OUTPUT_SIZE) {
+  const size = Math.max(1, Math.floor(finitePositive(cropSize)) || 1);
+  const limit = Math.max(1, Math.floor(finitePositive(maxSize)) || AVATAR_CROP_OUTPUT_SIZE);
+  return Math.min(size, limit);
+}

package/dist/public/index.html

@@ -10,7 +10,7 @@
     <link rel="icon" href="/icon.svg?v=20260712" type="image/svg+xml">
     <link rel="manifest" href="/site.webmanifest">
     <link rel="stylesheet" href="/vendor/vditor/dist/index.css?v=3.11.2">
-    <link rel="stylesheet" href="/styles.css?v=20260725-mobile-workspace-unify">
+    <link rel="stylesheet" href="/styles.css?v=20260725-module-header-scale">
   </head>
   <body class="auth-pending">
     <section id="auth-view" class="auth-view hidden" aria-labelledby="auth-title">
@@ -123,10 +123,10 @@
           <button type="button" data-module="organizations"><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>组织</button>
           <button type="button" data-module="timeline"><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>时间轴</button>
           <button type="button" data-module="relationships"><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.59 13.51 6.83 3.98"/><path d="m15.41 6.51-6.82 3.98"/></svg>关系</button>
-          <button type="button" data-module="outlines"><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/></svg><span class="nav-label">大纲/伏笔</span></button>
+          <button type="button" data-module="races"><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="4" r="2"/><circle cx="18" cy="8" r="2"/><circle cx="20" cy="16" r="2"/><path d="M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z"/></svg>种族</button>
           <button class="ai-analysis-entry" type="button" data-module="tasks"><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>AI 分析</button>
           <button id="module-more-button" type="button" aria-expanded="false"><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg><span class="nav-label">更多</span></button>
-          <button class="module-nav-secondary hidden" type="button" data-module="races"><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="4" r="2"/><circle cx="18" cy="8" r="2"/><circle cx="20" cy="16" r="2"/><path d="M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z"/></svg>种族</button>
+          <button class="module-nav-secondary hidden" type="button" data-module="outlines"><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/></svg><span class="nav-label">大纲/伏笔</span></button>
           <button class="module-nav-secondary hidden" type="button" data-module="reviews"><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="m9 14 2 2 4-4"/></svg>审核</button>
           <button class="module-nav-secondary hidden" type="button" data-module="ai-settings"><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><rect width="16" height="16" x="4" y="4" rx="2"/><rect width="6" height="6" x="9" y="9" rx="1"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/></svg>AI 设置</button>
           <button class="module-nav-secondary hidden" type="button" data-work-settings><svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.09a2 2 0 0 1 1 1.74v.5a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z"/><circle cx="12" cy="12" r="3"/></svg>作品设置</button>
@@ -202,6 +202,7 @@
               <span id="chapter-stats" class="chapter-stats">0 字 · v0</span>
               <button id="insight-button" class="ghost-button" type="button">章节概览</button>
               <button id="versions-button" class="ghost-button" type="button">版本</button>
+              <button id="chapter-edit-button" class="primary-button hidden" type="button">编辑</button>
               <button id="tidy-blank-lines-button" class="ghost-button" type="button">整理空行</button>
               <button id="save-button" class="primary-button" type="button">保存正文</button>
             </div>
@@ -590,7 +591,7 @@
           <header class="account-settings-section-header"><h3 id="profile-settings-title">个人资料</h3><p>用于作品协作和历史记录中的作者标识。</p></header>
           <div class="avatar-settings">
             <div id="profile-avatar-preview" class="user-avatar profile-avatar-preview" role="img" aria-label="当前头像"><span class="user-avatar-fallback">作</span></div>
-            <div class="avatar-settings-copy"><strong>头像图片</strong><small>支持 PNG、JPEG、WebP，文件不超过 5 MB，尺寸不超过 4096 × 4096 像素。</small></div>
+            <div class="avatar-settings-copy"><strong>头像图片</strong><small>支持 PNG、JPEG、WebP，文件不超过 5 MB。选择后可框选正方形选区再裁剪上传。</small></div>
             <div class="avatar-settings-actions"><button id="avatar-upload-button" class="ghost-button" type="button">上传头像</button><button id="avatar-remove-button" class="ghost-button hidden" type="button">移除头像</button></div>
           </div>
           <form id="profile-form" class="account-settings-form"><label>显示名称<input id="profile-display-name" name="displayName" maxlength="80" required></label><button class="primary-button" type="submit">保存名称</button></form>
@@ -613,6 +614,37 @@
       </div>
     </dialog>
 
+    <dialog id="avatar-crop-dialog" class="dialog avatar-crop-dialog" aria-labelledby="avatar-crop-dialog-title" aria-describedby="avatar-crop-dialog-description">
+      <div class="dialog-header">
+        <div>
+          <span class="eyebrow">个人账户</span>
+          <h2 id="avatar-crop-dialog-title">裁剪头像</h2>
+          <p id="avatar-crop-dialog-description" class="dialog-header-meta">拖动选区或四角手柄调整范围，圆形预览即最终显示效果。</p>
+        </div>
+        <button id="avatar-crop-close" class="dialog-close" aria-label="关闭裁剪" type="button">×</button>
+      </div>
+      <div class="avatar-crop-body">
+        <div id="avatar-crop-stage" class="avatar-crop-stage" tabindex="0" role="img" aria-label="头像裁剪选区">
+          <img id="avatar-crop-image" class="avatar-crop-image" alt="">
+          <div id="avatar-crop-shade" class="avatar-crop-shade" aria-hidden="true"></div>
+          <div id="avatar-crop-selection" class="avatar-crop-selection" hidden>
+            <button type="button" class="avatar-crop-handle" data-avatar-crop-handle="nw" aria-label="调整左上角"></button>
+            <button type="button" class="avatar-crop-handle" data-avatar-crop-handle="ne" aria-label="调整右上角"></button>
+            <button type="button" class="avatar-crop-handle" data-avatar-crop-handle="sw" aria-label="调整左下角"></button>
+            <button type="button" class="avatar-crop-handle" data-avatar-crop-handle="se" aria-label="调整右下角"></button>
+          </div>
+        </div>
+        <aside class="avatar-crop-side">
+          <div id="avatar-crop-preview" class="user-avatar avatar-crop-preview" role="img" aria-label="裁剪预览"></div>
+          <p>预览</p>
+        </aside>
+      </div>
+      <div class="dialog-actions">
+        <button id="avatar-crop-cancel" class="ghost-button" type="button">取消</button>
+        <button id="avatar-crop-confirm" class="primary-button" type="button">确认裁剪</button>
+      </div>
+    </dialog>
+
     <dialog id="members-dialog" class="dialog wide-dialog" aria-labelledby="members-dialog-title">
       <div class="dialog-header"><div><span id="members-dialog-eyebrow" class="eyebrow">作品权限</span><h2 id="members-dialog-title">成员模块权限</h2></div><button id="members-dialog-close" class="dialog-close" aria-label="关闭" type="button">×</button></div>
       <div class="access-dialog-body">
@@ -699,6 +731,6 @@
     <div id="auth-loading" class="auth-loading" role="status" aria-label="正在载入工作台"></div>
     <script id="vditorIconScript" src="/vendor/vditor/dist/js/icons/ant.js?v=3.11.2"></script>
     <script src="/vendor/vditor/dist/index.min.js?v=3.11.2"></script>
-    <script type="module" src="/app.js?v=20260725-mobile-workspace-unify"></script>
+    <script type="module" src="/app.js?v=20260725-module-header-scale"></script>
   </body>
 </html>

package/dist/public/styles.css

@@ -619,17 +619,23 @@ body.is-panel-resizing { cursor: col-resize; user-select: none; }
 .app-shell.prose-hidden-mode:not(.shelf-mode) .panel-heading,
 .app-shell.prose-hidden-mode:not(.shelf-mode) #novel-tree { display: none !important; }
 .app-shell.prose-read-only-mode:not(.shelf-mode) #tidy-blank-lines-button,
-.app-shell.prose-read-only-mode:not(.shelf-mode) #save-button { display: none !important; }
+.app-shell.prose-read-only-mode:not(.shelf-mode) #save-button,
+.app-shell.prose-read-only-mode:not(.shelf-mode) #chapter-edit-button { display: none !important; }
 .app-shell.prose-read-only-mode:not(.shelf-mode) .left-primary-actions { justify-content: flex-end; }
 .app-shell.prose-read-only-mode:not(.shelf-mode) #chapter-title[readonly],
 .app-shell.prose-read-only-mode:not(.shelf-mode) #chapter-content[readonly] { cursor: default; }
 .app-shell.view-only-mode:not(.shelf-mode) #module-create-button,
 .app-shell.view-only-mode:not(.shelf-mode) [data-work-settings],
 .app-shell.view-only-mode:not(.shelf-mode) #tidy-blank-lines-button,
-.app-shell.view-only-mode:not(.shelf-mode) #save-button { display: none !important; }
+.app-shell.view-only-mode:not(.shelf-mode) #save-button,
+.app-shell.view-only-mode:not(.shelf-mode) #chapter-edit-button { display: none !important; }
 .app-shell.view-only-mode:not(.shelf-mode) .left-primary-actions { justify-content: flex-end; }
 .app-shell.view-only-mode:not(.shelf-mode) #chapter-title[readonly],
 .app-shell.view-only-mode:not(.shelf-mode) #chapter-content[readonly] { cursor: default; }
+.editor-view.is-read-only #tidy-blank-lines-button,
+.editor-view.is-read-only #save-button { display: none !important; }
+.editor-view.is-read-only #chapter-title[readonly],
+.editor-view.is-read-only #chapter-content[readonly] { cursor: default; }
 body.work-viewer-mode [data-setting-status],
 body.work-viewer-mode [data-edit-setting],
 body.work-viewer-mode [data-edit-character],
@@ -747,6 +753,74 @@ body.work-viewer-mode .character-editor-actions { display: none !important; }
 .avatar-settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
 .avatar-settings-actions button { min-height: 32px; padding: 6px 11px; font-size: 11px; }
 .avatar-settings-actions button:disabled { cursor: wait; opacity: .5; }
+.avatar-crop-dialog { width: min(720px, 94vw); }
+.avatar-crop-body { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; align-items: start; padding: 18px 24px 8px; }
+.avatar-crop-stage {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  aspect-ratio: 1;
+  max-height: min(52vh, 480px);
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background:
+    linear-gradient(45deg, color-mix(in srgb, var(--line) 55%, transparent) 25%, transparent 25%) 0 0 / 16px 16px,
+    linear-gradient(-45deg, color-mix(in srgb, var(--line) 55%, transparent) 25%, transparent 25%) 0 8px / 16px 16px,
+    var(--surface-soft);
+  touch-action: none;
+  user-select: none;
+}
+.avatar-crop-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: none;
+}
+.avatar-crop-shade {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: color-mix(in srgb, var(--ink) 42%, transparent);
+  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
+  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+.avatar-crop-selection {
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid color-mix(in srgb, white 88%, var(--accent));
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 35%, transparent);
+  cursor: grab;
+  touch-action: none;
+}
+.avatar-crop-selection.is-dragging { cursor: grabbing; }
+.avatar-crop-selection[hidden] { display: none; }
+.avatar-crop-handle {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  padding: 0;
+  border: 2px solid color-mix(in srgb, white 90%, var(--accent));
+  border-radius: 2px;
+  background: var(--accent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent);
+}
+.avatar-crop-handle[data-avatar-crop-handle="nw"] { top: -7px; left: -7px; cursor: nwse-resize; }
+.avatar-crop-handle[data-avatar-crop-handle="ne"] { top: -7px; right: -7px; cursor: nesw-resize; }
+.avatar-crop-handle[data-avatar-crop-handle="sw"] { bottom: -7px; left: -7px; cursor: nesw-resize; }
+.avatar-crop-handle[data-avatar-crop-handle="se"] { bottom: -7px; right: -7px; cursor: nwse-resize; }
+.avatar-crop-side { display: grid; justify-items: center; gap: 8px; padding-top: 8px; }
+.avatar-crop-side p { margin: 0; color: var(--muted); font-size: 10px; }
+.avatar-crop-preview { width: 76px; height: 76px; border: 2px solid color-mix(in srgb, var(--line) 72%, transparent); background: var(--surface); }
+.avatar-crop-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
 .account-settings-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 16px; }
 .account-settings-form label { display: grid; min-width: 0; gap: 6px; color: var(--muted); font-size: 11px; }
 .account-settings-form input { width: 100%; min-height: 38px; padding: 9px 10px; background: var(--surface); font-size: 12px; }
@@ -945,7 +1019,8 @@ select:focus, input:focus, textarea:focus { border-color: #a77768; box-shadow: 0
 .module-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
 .module-header-actions > [data-module-header-action] { order: 1; }
 .module-header-actions > #module-create-button { order: 2; min-height: 36px; }
-.module-header h1 { margin: 0 0 8px; font-weight: 500; font-size: 34px; }
+.module-count-badge { display: inline-grid; min-width: 28px; height: 28px; padding: 0 7px; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--accent-dark); font-family: var(--font-latin), monospace; font-size: 11px; font-weight: 650; }
+.module-header h1 { margin: 0 0 6px; font-weight: 500; font-size: 24px; line-height: 1.25; }
 .module-header p { margin: 0; color: var(--muted); font-size: 13px; }
 .module-content { padding: 24px 0 80px; }
 .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 13px; }
@@ -963,6 +1038,8 @@ select:focus, input:focus, textarea:focus { border-color: #a77768; box-shadow: 0
 .module-filter-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
 .module-filter-toggle + .module-layout-toolbar { order: 2; }
 .module-filter-toggle ~ #module-create-button { order: 3; }
+.race-tree-expand-toolbar ~ .module-layout-toolbar { order: 2; }
+.race-tree-expand-toolbar ~ #module-create-button { order: 3; }
 .settings-layout-hint { color: var(--muted); font-size: 10px; }
 .settings-layout-toggle, .module-layout-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--surface); }
 .settings-layout-toggle button { min-height: 34px; padding: 0 12px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 11px; }
@@ -1407,6 +1484,12 @@ select:focus, input:focus, textarea:focus { border-color: #a77768; box-shadow: 0
 .book-summary-context-percent-field { width: min(100%, 280px); }
 .context-compact-threshold-field { width: min(100%, 280px); }
 .book-summary-context-percent-field input, .context-compact-threshold-field input { width: 64px; min-height: 32px; padding: 5px 8px; font-size: 13px; font-family: var(--font-latin), monospace; }
+.config-inline-save { display: flex; align-items: flex-end; gap: 10px; margin: 14px 0 4px; flex-wrap: wrap; }
+.config-inline-save .book-summary-context-percent-field,
+.config-inline-save .context-compact-threshold-field { display: grid; gap: 6px; width: auto; margin: 0; color: var(--muted); font-size: 10px; }
+.config-section .config-save-button { min-height: 32px; padding: 5px 11px; font-size: 11px; }
+.config-section .card-actions { margin-top: 12px; }
+.config-section .card-actions .config-save-button { border: 1px solid var(--line); background: transparent; color: var(--ink); }
 .field-label textarea {
   width: 100%;
   min-height: 140px;
@@ -2038,6 +2121,9 @@ select:focus, input:focus, textarea:focus { border-color: #a77768; box-shadow: 0
   .account-settings-form, .password-settings-form, .api-key-settings, .api-key-result { grid-template-columns: minmax(0, 1fr); }
   .avatar-settings { grid-template-columns: 64px minmax(0, 1fr); }
   .profile-avatar-preview { width: 64px; height: 64px; }
+  .avatar-crop-body { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 16px 4px; }
+  .avatar-crop-side { grid-template-columns: auto 1fr; align-items: center; justify-items: start; gap: 10px; padding-top: 0; }
+  .avatar-crop-preview { width: 64px; height: 64px; }
   .account-settings-form .primary-button { width: 100%; }
 }
 
@@ -2201,7 +2287,7 @@ select:focus, input:focus, textarea:focus { border-color: #a77768; box-shadow: 0
 
   .module-view { padding: 26px var(--mobile-gutter) 46px; }
   .module-header { padding-bottom: 18px; }
-  .module-header h1 { font-size: 29px; }
+  .module-header h1 { font-size: 22px; }
   .module-header-actions { justify-content: stretch; }
   .module-header-actions > * { flex: 1 1 auto; }
   .module-content { padding: 18px 0 56px; }

package/dist/store.js

@@ -608,7 +608,9 @@ export class Store {
             autoRunBatchLimit: Math.min(200, Math.max(1, Number(row?.auto_run_batch_limit ?? 20) || 20)),
             bookSummaryContextPercent: Math.min(90, Math.max(1, Number(row?.book_summary_context_percent ?? 50) || 50)),
             contextCompactThreshold: Math.min(90, Math.max(50, Number(row?.context_compact_threshold ?? 85) || 85)),
-            agentTools: json(String(row?.agent_tools_json ?? '["story_index","read_chapters","query_story_knowledge","grep","read_character_sections"]'), ["story_index", "read_chapters", "query_story_knowledge", "grep", "read_character_sections"]),
+            agentTools: json(String(row?.agent_tools_json ?? '["story_index","read_chapters","search_story_entities","grep","read_character_sections"]'), ["story_index", "read_chapters", "search_story_entities", "grep", "read_character_sections"])
+                .map((tool) => tool === "query_story_knowledge" ? "search_story_entities" : tool)
+                .filter((tool, index, tools) => tools.indexOf(tool) === index),
             updatedAt: String(row?.updated_at ?? "")
         };
     }
@@ -2282,8 +2284,9 @@ export class Store {
     listCharactersPage(workId, pagination, includeProfileSections = false, includeMerged = false, includeRaceMarkdown = true) {
         this.getWork(workId);
         const page = paginationSql(pagination);
+        const count = this.db.get(`SELECT COUNT(*) AS count FROM characters WHERE work_id = ?${includeMerged ? "" : " AND merged_into_character_id IS NULL"}`, workId);
         const rows = this.db.all(`SELECT * FROM characters WHERE work_id = ?${includeMerged ? "" : " AND merged_into_character_id IS NULL"} ORDER BY name${page.sql}`, workId, ...page.params);
-        return paginated(rows.map((row) => this.mapCharacter(row, includeProfileSections, includeRaceMarkdown)), pagination);
+        return paginated(rows.map((row) => this.mapCharacter(row, includeProfileSections, includeRaceMarkdown)), pagination, Number(count?.count ?? 0));
     }
     mapCharacterProfileSection(row) {
         return {