@hamster-note/reader 0.2.0-beta.1 → 0.3.0

package/dist/style.css

@@ -75,6 +75,144 @@
   height: 100%;
   box-sizing: border-box;
 }
+.hamster-reader__document-header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+.hamster-reader__document-kicker {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #2563eb;
+}
+.hamster-reader__document-title {
+  margin: 0;
+  font-size: 24px;
+  line-height: 1.2;
+  color: #111827;
+}
+.hamster-reader__document-hint {
+  margin: 0;
+  font-size: 14px;
+  color: #6b7280;
+}
+.hamster-reader__pages {
+  display: grid;
+  gap: 20px;
+}
+.hamster-reader__page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px;
+  border: 1px solid #dbe4f0;
+  border-radius: 16px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgb(248, 250, 252));
+  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
+}
+.hamster-reader__page-header {
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+.hamster-reader__page-kicker {
+  margin: 0 0 4px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+.hamster-reader__page-title {
+  margin: 0;
+  font-size: 20px;
+  color: #0f172a;
+}
+.hamster-reader__page-meta {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, auto));
+  gap: 12px;
+  margin: 0;
+}
+.hamster-reader__page-meta div {
+  min-width: 72px;
+}
+.hamster-reader__page-meta dt {
+  margin: 0 0 4px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #94a3b8;
+}
+.hamster-reader__page-meta dd {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+}
+.hamster-reader__page-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.hamster-reader__page-surface {
+  position: relative;
+  container-type: inline-size;
+  width: min(100%, 720px);
+  min-height: 320px;
+  border-radius: 14px;
+  overflow: hidden;
+  border: 1px solid #cbd5e1;
+  background: linear-gradient(180deg, rgb(255, 255, 255), rgb(241, 245, 249));
+}
+.hamster-reader__page-surface > div {
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+}
+.hamster-reader__page-surface svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.hamster-reader__selection-layer, .hamster-reader__text-layer, .hamster-reader__drawing-layer {
+  position: absolute;
+  inset: 0;
+}
+.hamster-reader__selection-layer {
+  z-index: 2;
+}
+.hamster-reader__text-layer {
+  z-index: 1;
+}
+.hamster-reader__drawing-layer {
+  z-index: 3;
+}
+.hamster-reader__drawing-layer > div {
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+}
+.hamster-reader__text-item {
+  position: absolute;
+  display: block;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: inherit;
+  transform-origin: top left;
+}
+.hamster-reader__page-hint {
+  margin: 0;
+  font-size: 13px;
+  color: #475569;
+}
 .hamster-reader__file-info {
   display: flex;
   align-items: center;
@@ -134,10 +272,11 @@
   flex-direction: column;
   align-items: center;
   gap: 16px;
+  background-color: #f3f4f6;
   overflow: hidden;
   box-sizing: border-box;
-  height: var(--hamster-reader-viewer-height, 100vh);
-  max-height: var(--hamster-reader-viewer-max-height, 100vh);
+  height: var(--hamster-reader-viewer-height, 100%);
+  max-height: var(--hamster-reader-viewer-max-height, 100%);
   scroll-behavior: smooth;
 }
 .hamster-reader__intermediate-document-viewer .virtual-paper-wrapper {
@@ -146,6 +285,27 @@
   min-height: 0;
   touch-action: none;
 }
+.hamster-reader__intermediate-document-viewer .hamster-reader__intermediate-page {
+  margin: 12px;
+}
+.hamster-reader__intermediate-text-viewer, .hamster-reader__intermediate-text-scroll {
+  display: block;
+  overflow: auto;
+  box-sizing: border-box;
+  position: relative;
+}
+.hamster-reader__intermediate-text-spacer {
+  position: relative;
+  width: 100%;
+}
+.hamster-reader__intermediate-text-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 5px;
+  box-sizing: border-box;
+}
 .hamster-reader__html-parser-output {
   width: 100%;
   box-sizing: border-box;
@@ -184,7 +344,6 @@
   position: relative;
   box-sizing: border-box;
   background-color: #ffffff;
-  outline: 1px solid #e5e7eb;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   flex-shrink: 0;
@@ -233,6 +392,11 @@
   -webkit-user-select: text;
   z-index: 1;
 }
+.hamster-reader__intermediate-text--flow {
+  position: static;
+  display: inline;
+  white-space: normal;
+}
 .hamster-reader .hsn-selection-percent-overlay {
   mix-blend-mode: multiply;
   opacity: 1;
@@ -319,5 +483,5 @@
 }
 
 /* @hamster-note/selection/style.css */
-.hsn-selection-container{cursor:text;word-break:break-word;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;line-height:1.8;position:relative}.hsn-selection-content{z-index:1;-webkit-user-select:text;user-select:text;-webkit-touch-callout:none;touch-action:manipulation;position:relative}@media (pointer:coarse){.hsn-selection-content{-webkit-user-select:none;user-select:none}}.hsn-selection-content::selection{color:inherit;background:0 0}.hsn-selection-content ::selection{color:inherit;background:0 0}.hsn-selection-content::-moz-selection{color:inherit;background:0 0}.hsn-selection-content ::-moz-selection{color:inherit;background:0 0}.hsn-selection-overlay{pointer-events:none;z-index:2;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.hsn-selection-rect{pointer-events:none;transition:fill .15s}.hsn-selection-rect--highlight{fill:#ffd54f66}.hsn-selection-rect--selected{fill:#ffc1078c;stroke:#ff9800e6;stroke-width:1.5px}.hsn-selection-rect--active{fill:#ff69b473}.hsn-selection-percent-overlay{pointer-events:none;z-index:2;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.hsn-selection-percent-rect{pointer-events:none;border-radius:2px;transition:background-color .15s,border-color .15s,opacity .15s,transform .15s;position:absolute}.hsn-selection-percent-rect-highlight{background-color:#ffd54f66}.hsn-selection-percent-rect-selected{background-color:#ffc1078c;border:1.5px solid #ff9800e6}.hsn-selection-percent-rect-active{background-color:#ff69b473}.hsn-selection-popover{z-index:3;pointer-events:auto;-webkit-user-select:none;user-select:none;margin-top:-6px;position:absolute;transform:translate(-50%,-100%)}.hsn-selection-toolbar{z-index:1000;-webkit-user-select:none;user-select:none;background:#2d2d2d;border-radius:6px;align-items:center;gap:4px;padding:4px 8px;display:inline-flex;position:absolute;transform:translate(-50%);box-shadow:0 2px 8px #00000026,0 0 1px #0003}.hsn-selection-toolbar-btn{color:#fff;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:4px;padding:2px 8px;font-size:13px}.hsn-selection-toolbar-btn:hover{background:#ffffff26}.hsn-selection-handle{z-index:4;cursor:ew-resize;pointer-events:auto;-webkit-user-select:none;user-select:none;touch-action:none;background:#ff4fa3;border:2px solid #fff;border-radius:50%;width:12px;height:12px;margin:0;padding:0;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 4px #00000040}.hsn-selection-handle:focus{outline:none}.hsn-selection-handle--dragging{pointer-events:none}
+.hsn-selection-container{cursor:text;word-break:break-word;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;line-height:1.8;position:relative}.hsn-selection-content{z-index:1;-webkit-user-select:text;user-select:text;-webkit-touch-callout:none;touch-action:manipulation;position:relative}.hsn-selection-container--rect-tool{cursor:crosshair}.hsn-selection-container--rect-tool .hsn-selection-content{cursor:crosshair;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.hsn-selection-content{-webkit-user-select:none;user-select:none}}.hsn-selection-content::selection{color:inherit;background:0 0}.hsn-selection-content ::selection{color:inherit;background:0 0}.hsn-selection-content::-moz-selection{color:inherit;background:0 0}.hsn-selection-content ::-moz-selection{color:inherit;background:0 0}.hsn-selection-overlay{pointer-events:none;z-index:2;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.hsn-selection-rect{pointer-events:none;transition:fill .15s}.hsn-selection-rect--highlight{fill:#ffd54f66}.hsn-selection-rect--selected{fill:#ffc1078c;stroke:#ff9800e6;stroke-width:1.5px}.hsn-selection-rect--active{fill:#ff69b473}.hsn-selection-percent-overlay{pointer-events:none;z-index:2;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.hsn-selection-percent-rect{pointer-events:none;border-radius:2px;transition:background-color .15s,border-color .15s,opacity .15s,transform .15s;position:absolute}.hsn-selection-percent-rect-highlight{background-color:#ffd54f66}.hsn-selection-percent-rect-selected{background-color:#ffc1078c;border:1.5px solid #ff9800e6}.hsn-selection-percent-rect-active{background-color:#ff69b473}.hsn-selection-popover{z-index:3;pointer-events:auto;-webkit-user-select:none;user-select:none;margin-top:-6px;position:absolute;transform:translate(-50%,-100%)}.hsn-selection-toolbar{z-index:1000;-webkit-user-select:none;user-select:none;background:#2d2d2d;border-radius:6px;align-items:center;gap:4px;padding:4px 8px;display:inline-flex;position:absolute;transform:translate(-50%);box-shadow:0 2px 8px #00000026,0 0 1px #0003}.hsn-selection-toolbar-btn{color:#fff;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:4px;padding:2px 8px;font-size:13px}.hsn-selection-toolbar-btn:hover{background:#ffffff26}.hsn-selection-handle{z-index:4;cursor:ew-resize;pointer-events:auto;-webkit-user-select:none;user-select:none;touch-action:none;background:#ff4fa3;border:2px solid #fff;border-radius:50%;width:12px;height:12px;margin:0;padding:0;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 4px #00000040}.hsn-selection-handle:focus{outline:none}.hsn-selection-handle--dragging{pointer-events:none}
 /*$vite$:1*/

package/dist/types/selection.d.ts

@@ -1,4 +1,4 @@
-import type { LinkedSelectionData, LinkedSelectionRange, MousePosition, OverlayRect, OverlayRectType, SelectionEndpoint } from '@hamster-note/selection';
+import type { LinkedSelectionData, LinkedSelectionRange, MousePosition, OverlayRect, OverlayRectType, SelectionEndpoint, SelectionRect, SelectionTool } from '@hamster-note/selection';
 /**
  * Reader 公开 linked selection 端点。
  *
@@ -9,6 +9,10 @@ import type { LinkedSelectionData, LinkedSelectionRange, MousePosition, OverlayR
 export type ReaderSelectionEndpoint = SelectionEndpoint;
 /** Reader 公开 selection 矩形；linked ranges 按页面 ID 分组保存这些矩形。 */
 export type ReaderSelectionRect = OverlayRect;
+/** Reader 公开矩形框选工具类型。 */
+export type ReaderSelectionTool = SelectionTool;
+/** Reader 公开矩形框选数据。 */
+export type ReaderSelectionRectangle = SelectionRect;
 export type ReaderLinkedSelectionRange = Omit<LinkedSelectionRange, 'start' | 'end' | 'rectsBySelectionId'> & {
     start: ReaderSelectionEndpoint;
     end: ReaderSelectionEndpoint;
@@ -27,15 +31,39 @@ export type ReaderLinkedSelectionData = Omit<LinkedSelectionData, 'items' | 'act
  *
  * 由 Reader 自己实现，不是上游 @hamster-note/selection 的 `SelectionRef`。
  * Reader 在内部将 `highlight()` / `clear()` 分发到各页面的上游
- * `SelectionRef`，并新增 `scrollToRange()` 来滚动到指定 range。
+ * `SelectionRef`，并新增 `scrollToRange()` / `scrollToRect()` / `scrollToPosition()`
+ * 来滚动到指定 range、矩形或滚动偏移。
  */
 export interface ReaderSelectionRef {
     /** 执行高亮：将当前用户选中的文本确认为一个持久高亮 range。 */
     highlight: () => void;
+    /**
+     * 通用确认：根据当前 tool 模式分发。
+     * - `tool='text'`（默认）时等价于 `highlight()`
+     * - `tool='rect'` 时等价于 `confirmRect()`
+     */
+    confirm: () => void;
+    /**
+     * 矩形确认：将当前活跃的矩形框选确认为一个持久 ReaderSelectionRectangle。
+     * 内部会触发 onCreateRect 回调，然后清除活跃矩形状态。
+     */
+    confirmRect: () => void;
     /** 清除所有页面的高亮和选区状态。 */
     clear: () => void;
     /** 滚动视图到指定 range（按 range id 查找）。实现细节留给 Reader 内部。 */
     scrollToRange: (id: string) => void;
+    /** 滚动视图到指定矩形框选（按 rect id 查找）。实现细节留给 Reader 内部。 */
+    scrollToRect: (id: string) => void;
+    /**
+     * 滚动 VirtualPaper 到指定坐标位置。
+     * - `x`/`y` 为内容区滚动偏移（单位 px），(0,0) 表示内容左上角。
+     * - `scale` 可选，未提供时保持当前缩放。
+     */
+    scrollToPosition: (position: {
+        x: number;
+        y: number;
+        scale?: number;
+    }) => void;
 }
 export type ReaderMousePosition = MousePosition;
 export type ReaderSelectionOverlayRectType = OverlayRectType;

package/dist/types/selection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../src/types/selection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,oBAAoB,EACpB,aAAa,EACb,WAAW,EACX,eAAe,EACf,iBAAiB,EAClB,MAAM,yBAAyB,CAAA;AAEhC;;;;;;GAMG;AACH,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAA;AAEvD,4DAA4D;AAC5D,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAA;AAE7C,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,oBAAoB,EACpB,OAAO,GAAG,KAAK,GAAG,oBAAoB,CACvC,GAAG;IACF,KAAK,EAAE,uBAAuB,CAAA;IAC9B,GAAG,EAAE,uBAAuB,CAAA;IAC5B,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,EAAE,CAAC,CAAA;CAC1D,CAAA;AAED,wEAAwE;AACxE,MAAM,MAAM,oBAAoB,GAAG,0BAA0B,GAAG;IAC9D,QAAQ,CAAC,2BAA2B,CAAC,EAAE,KAAK,CAAA;CAC7C,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,mBAAmB,EACnB,OAAO,GAAG,aAAa,CACxB,GAAG;IACF,KAAK,EAAE,0BAA0B,EAAE,CAAA;IACnC,WAAW,CAAC,EAAE,0BAA0B,GAAG,IAAI,CAAA;CAChD,CAAA;AAED;;;;;;GAMG;AACH,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,sBAAsB;IACtB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,qDAAqD;IACrD,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACpC;AACD,MAAM,MAAM,mBAAmB,GAAG,aAAa,CAAA;AAC/C,MAAM,MAAM,8BAA8B,GAAG,eAAe,CAAA"}
+{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../src/types/selection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,oBAAoB,EACpB,aAAa,EACb,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,aAAa,EACd,MAAM,yBAAyB,CAAA;AAEhC;;;;;;GAMG;AACH,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAA;AAEvD,4DAA4D;AAC5D,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAA;AAE7C,yBAAyB;AACzB,MAAM,MAAM,mBAAmB,GAAG,aAAa,CAAA;AAE/C,uBAAuB;AACvB,MAAM,MAAM,wBAAwB,GAAG,aAAa,CAAA;AAEpD,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,oBAAoB,EACpB,OAAO,GAAG,KAAK,GAAG,oBAAoB,CACvC,GAAG;IACF,KAAK,EAAE,uBAAuB,CAAA;IAC9B,GAAG,EAAE,uBAAuB,CAAA;IAC5B,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,EAAE,CAAC,CAAA;CAC1D,CAAA;AAED,wEAAwE;AACxE,MAAM,MAAM,oBAAoB,GAAG,0BAA0B,GAAG;IAC9D,QAAQ,CAAC,2BAA2B,CAAC,EAAE,KAAK,CAAA;CAC7C,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,mBAAmB,EACnB,OAAO,GAAG,aAAa,CACxB,GAAG;IACF,KAAK,EAAE,0BAA0B,EAAE,CAAA;IACnC,WAAW,CAAC,EAAE,0BAA0B,GAAG,IAAI,CAAA;CAChD,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB;;;;OAIG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB;;;OAGG;IACH,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,sBAAsB;IACtB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,qDAAqD;IACrD,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,kDAAkD;IAClD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;;;OAIG;IACH,gBAAgB,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CAC/E;AACD,MAAM,MAAM,mBAAmB,GAAG,aAAa,CAAA;AAC/C,MAAM,MAAM,8BAA8B,GAAG,eAAe,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hamster-note/reader",
-  "version": "0.2.0-beta.1",
+  "version": "0.3.0",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -43,6 +43,7 @@
     "pack:check": "node scripts/check-pack.mjs"
   },
   "dependencies": {
+    "@hamster-note/painting": "0.1.1-beta.2",
     "@hamster-note/docx-parser": "^0.1.0",
     "@hamster-note/html-parser": "0.9.0-beta",
     "@hamster-note/image-parser": "^0.3.0",
@@ -50,17 +51,18 @@
     "@hamster-note/pdf-parser": "^1.0.0",
     "@hamster-note/txt-parser": "^0.3.0",
     "@hamster-note/types": "^0.8.0",
-    "@hamster-note/virtual-paper": "0.1.0-beta.2",
-    "@system-ui-js/multi-drag": "^0.4.0"
+    "@hamster-note/virtual-paper": "0.2.0",
+    "@system-ui-js/multi-drag": "^0.4.0",
+    "@tanstack/react-virtual": "^3.14.5"
   },
   "peerDependencies": {
-    "@hamster-note/selection": "0.0.2-beta.1",
+    "@hamster-note/selection": "0.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
-    "@hamster-note/selection": "0.0.2-beta.1",
+    "@hamster-note/selection": "0.1.0",
     "@system-ui-js/development-base": "^0.1.2",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",