@deepseek-ai/dsh-client-ui-sidebar-documentpreview 0.1.7-alpha.2 → 0.1.7-rc.2

package/lib/client.pdf.js

@@ -959,7 +959,7 @@ window.__ModuleLoader__.load({
 		* @param pageNumber - 1-based selected page.
 		* @param canvas - canvas owned by this render only.
 		* @param signal - render lifetime.
-		* @param pixelRatio - display pixel ratio.
+		* @param pixelRatio - device pixel ratio multiplied by the settled document zoom.
 		* @param renderText - optional selectable text layer sharing this page and viewport.
 		* @returns the page's CSS dimensions after rendering completes.
 		*/
@@ -32376,7 +32376,7 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4<f32> {
 		}
 		//#endregion
 		//#region \0dsh-css:/home/runner/work/deepseek-harness/deepseek-harness/packages/client/ui-sidebar-documentpreview/src/client/pdf/PdfBody.module.css.mjs
-		const css = ".E0GbtG_body{box-sizing:border-box;background:var(--dsw-alias-bg-document-preview);width:100%;min-width:100%;min-height:0;font-family:var(--dsw-font,sans-serif);white-space:normal;flex-direction:column;display:flex;overflow:visible}.E0GbtG_page{box-sizing:border-box;width:100%;min-width:0;overflow-x:visible}.E0GbtG_placeholder{aspect-ratio:3/4;background:var(--dsw-alias-bg-skeleton);width:100%}.E0GbtG_canvas{width:100%;max-width:none;height:auto;margin-inline:auto;display:block}.E0GbtG_surface{max-width:none;box-shadow:var(--dsw-elevation-prominent);margin-inline:auto;position:relative}.E0GbtG_surface[hidden]{display:none}.E0GbtG_text{position:absolute;inset:0;overflow:clip}.E0GbtG_text .textLayer{text-align:initial;letter-spacing:normal;word-spacing:normal;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;caret-color:canvastext;z-index:0;--text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size));--min-font-size-inv:calc(1 / var(--min-font-size));line-height:1;position:absolute;inset:0;overflow:clip}.E0GbtG_text .textLayer[data-main-rotation=\"90\"]{transform:rotate(90deg)translateY(-100%)}.E0GbtG_text .textLayer[data-main-rotation=\"180\"]{transform:rotate(180deg)translate(-100%,-100%)}.E0GbtG_text .textLayer[data-main-rotation=\"270\"]{transform:rotate(270deg)translate(-100%)}.E0GbtG_text :is(span,br){color:#0000;white-space:pre;cursor:text;transform-origin:0 0;user-select:text;position:absolute}.E0GbtG_text .textLayer>:not(.markedContent),.E0GbtG_text .markedContent span:not(.markedContent){z-index:1;--font-height:0;--scale-x:1;--rotate:0deg;font-size:calc(var(--text-scale-factor) * var(--font-height));transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv))}.E0GbtG_text .markedContent{display:contents}.E0GbtG_text ::selection{background:var(--dsw-alias-interactive-bg-hover-accent);color:#0000}.E0GbtG_text br::selection{background:0 0}.E0GbtG_text .textLayer .endOfContent{z-index:0;cursor:default;user-select:none;display:block;position:absolute;inset:100% 0 0}.E0GbtG_text .selecting .endOfContent{top:0}.E0GbtG_status{color:var(--dsw-alias-label-secondary);align-items:center;gap:8px;padding:10px;font-size:13px;line-height:1.5;display:flex}.E0GbtG_body .E0GbtG_status{color:var(--dsw-alias-label-document-preview)}.E0GbtG_opening{box-sizing:border-box;justify-content:center;width:100%;min-height:100%}";
+		const css = ".E0GbtG_body{box-sizing:border-box;background:var(--dsw-alias-bg-document-preview);width:100%;min-width:100%;min-height:100%;font-family:var(--dsw-font,sans-serif);white-space:normal;flex-direction:column;gap:12px;padding:12px;display:flex;overflow:visible}[data-document-zoom-mode=fixed] .E0GbtG_body{width:max-content}.E0GbtG_page{box-sizing:border-box;width:100%;min-width:0;overflow-x:visible}.E0GbtG_placeholder{aspect-ratio:3/4;background:var(--dsw-alias-bg-skeleton);width:100%}.E0GbtG_canvas{width:100%;max-width:none;height:auto;margin-inline:auto;display:block}.E0GbtG_surface{max-width:none;box-shadow:var(--dsw-elevation-prominent);margin-inline:auto;position:relative}.E0GbtG_surface[hidden]{display:none}.E0GbtG_text{position:absolute;inset:0;overflow:clip}.E0GbtG_text .textLayer{text-align:initial;letter-spacing:normal;word-spacing:normal;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;caret-color:canvastext;z-index:0;--text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size));--min-font-size-inv:calc(1 / var(--min-font-size));line-height:1;position:absolute;inset:0;overflow:clip}.E0GbtG_text .textLayer[data-main-rotation=\"90\"]{transform:rotate(90deg)translateY(-100%)}.E0GbtG_text .textLayer[data-main-rotation=\"180\"]{transform:rotate(180deg)translate(-100%,-100%)}.E0GbtG_text .textLayer[data-main-rotation=\"270\"]{transform:rotate(270deg)translate(-100%)}.E0GbtG_text :is(span,br){color:#0000;white-space:pre;cursor:text;transform-origin:0 0;user-select:text;position:absolute}.E0GbtG_text .textLayer>:not(.markedContent),.E0GbtG_text .markedContent span:not(.markedContent){z-index:1;--font-height:0;--scale-x:1;--rotate:0deg;font-size:calc(var(--text-scale-factor) * var(--font-height));transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv))}.E0GbtG_text .markedContent{display:contents}.E0GbtG_text ::selection{background:var(--dsw-alias-interactive-bg-hover-accent);color:#0000}.E0GbtG_text br::selection{background:0 0}.E0GbtG_text .textLayer .endOfContent{z-index:0;cursor:default;user-select:none;display:block;position:absolute;inset:100% 0 0}.E0GbtG_text .selecting .endOfContent{top:0}.E0GbtG_status{color:var(--dsw-alias-label-secondary);align-items:center;gap:8px;padding:10px;font-size:13px;line-height:1.5;display:flex}.E0GbtG_body .E0GbtG_status{color:var(--dsw-alias-label-document-preview)}";
 		const tagId = "@deepseek-ai/dsh-client-ui-sidebar-documentpreview/PdfBody.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -32388,7 +32388,6 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4<f32> {
 		var PdfBody_module_css_default = {
 			"body": "E0GbtG_body",
 			"canvas": "E0GbtG_canvas",
-			"opening": "E0GbtG_opening",
 			"page": "E0GbtG_page",
 			"placeholder": "E0GbtG_placeholder",
 			"status": "E0GbtG_status",
@@ -32402,7 +32401,7 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4<f32> {
 		const FIT_WIDTH = { kind: "fit-width" };
 		/**
 		* Present a PDF with tab-local viewing preferences and component-owned rendering resources.
-		* @param props - complete bytes and framework-owned tab/store/locale seats.
+		* @param props - complete bytes, framework-owned tab/store/locale seats, and main-bundle loading content.
 		* @returns the PDF reader.
 		*/
 		function PdfBody(props) {
@@ -32412,6 +32411,7 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4<f32> {
 			const [load, setLoad] = (0, react.useState)();
 			const [attempt, setAttempt] = (0, react.useState)(0);
 			const [pageWidth, setPageWidth] = (0, react.useState)();
+			const [renderZoom, setRenderZoom] = (0, react.useState)(1);
 			const { retainTab, actions, t, ZoomViewport, zoomSurfaceClass } = props;
 			const preference = view.zoom ?? FIT_WIDTH;
 			const labels = {
@@ -32474,13 +32474,7 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4<f32> {
 				role: "alert",
 				children: t("unsupported")
 			});
-			if (load?.data !== data) return (0, react_jsx_runtime.jsx)("span", {
-				className: `${PdfBody_module_css_default.status} ${PdfBody_module_css_default.opening}`,
-				role: "status",
-				"aria-label": t("loading"),
-				"data-document-loading": true,
-				children: (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.StateDot, { state: "ongoing" })
-			});
+			if (load?.data !== data) return props.loading;
 			if (load.kind === "failed") return (0, react_jsx_runtime.jsxs)("div", {
 				className: PdfBody_module_css_default.status,
 				role: "alert",
@@ -32502,6 +32496,7 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4<f32> {
 					onVisible: pageVisible,
 					signal: tab.signal,
 					onWidth: index === 0 ? setPageWidth : void 0,
+					zoom: renderZoom,
 					zoomSurfaceClass,
 					t
 				}, index))
@@ -32509,70 +32504,104 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4<f32> {
 			return (0, react_jsx_runtime.jsx)(ZoomViewport, {
 				preference,
 				intrinsicWidth: pageWidth,
+				horizontalInset: 24,
 				labels,
 				signal: tab.signal,
 				scrollportRef: props.scrollportRef,
 				onPreference: setPreference,
+				onRenderZoom: setRenderZoom,
 				children: pages
 			});
 		}
-		function PdfPage({ document, page, requested: initiallyRequested, onVisible, signal, onWidth, zoomSurfaceClass, t }) {
+		function PdfPage({ document, page, requested: initiallyRequested, onVisible, signal, onWidth, zoom, zoomSurfaceClass, t }) {
 			const host = (0, react.useRef)(null);
 			const canvas = (0, react.useRef)(null);
 			const text = (0, react.useRef)(null);
 			const [width, setWidth] = (0, react.useState)();
 			const [requested, setRequested] = (0, react.useState)(initiallyRequested);
+			const [visible, setVisible] = (0, react.useState)(initiallyRequested);
+			const renderedZoom = (0, react.useRef)();
+			const pendingRender = (0, react.useRef)(Promise.resolve());
+			const textTask = (0, react.useRef)();
 			const [state, setState] = (0, react.useState)("loading");
 			const [failure, setFailure] = (0, react.useState)();
 			const [attempt, setAttempt] = (0, react.useState)(0);
 			(0, react.useEffect)(() => {
-				const node = host.current;
+				const node = state === "ready" ? canvas.current : host.current;
 				if (typeof IntersectionObserver === "undefined") {
 					setRequested(true);
+					setVisible(true);
 					return;
 				}
 				let disposed = false;
 				const observer = new IntersectionObserver((entries) => {
-					if (disposed || !entries.some((entry) => entry.isIntersecting)) return;
+					if (disposed) return;
+					const intersects = entries.some((entry) => entry.isIntersecting);
+					setVisible(intersects);
+					if (!intersects) return;
 					setRequested(true);
 					onVisible(page);
-					observer.disconnect();
 				}, { rootMargin: "100% 0px" });
 				observer.observe(node);
 				return () => {
 					disposed = true;
 					observer.disconnect();
 				};
-			}, [page, onVisible]);
+			}, [
+				page,
+				onVisible,
+				state
+			]);
+			(0, react.useEffect)(() => () => {
+				textTask.current?.cancel();
+			}, []);
 			(0, react.useEffect)(() => {
 				if (!requested) return;
+				setFailure(void 0);
+				if (renderedZoom.current !== void 0 && (!visible || renderedZoom.current === zoom)) return;
 				const node = canvas.current;
 				const lifetime = new AbortController();
 				const renderSignal = AbortSignal.any([lifetime.signal, signal]);
-				setState("loading");
-				setFailure(void 0);
-				const createText = pdfTextRenderer(text.current);
-				let textTask;
-				renderPdfPage(document, page, node, renderSignal, window.devicePixelRatio, (pdfPage, viewport) => {
-					textTask = createText(pdfPage, viewport);
-					return textTask;
-				}).then((size) => {
-					if (!renderSignal.aborted) {
+				let newText;
+				pendingRender.current = pendingRender.current.then(async () => {
+					renderSignal.throwIfAborted();
+					const buffer = node.ownerDocument.createElement("canvas");
+					try {
+						const size = await renderPdfPage(document, page, buffer, renderSignal, window.devicePixelRatio * zoom, textTask.current === void 0 ? (pdfPage, viewport) => {
+							newText = pdfTextRenderer(text.current)(pdfPage, viewport);
+							return newText;
+						} : void 0);
+						renderSignal.throwIfAborted();
+						const context = node.getContext("2d");
+						if (context === null) throw new Error("PDF canvas has no 2D context");
+						node.width = buffer.width;
+						node.height = buffer.height;
+						node.style.setProperty("--pdf-page-width", `${size.width}px`);
+						node.style.setProperty("--pdf-page-height", `${size.height}px`);
+						context.drawImage(buffer, 0, 0);
+						textTask.current ??= newText;
+						newText = void 0;
+						renderedZoom.current = zoom;
 						setWidth(size.width);
 						onWidth?.(size.width);
 						setState("ready");
+					} finally {
+						buffer.width = buffer.height = 0;
+						newText?.cancel();
 					}
-				}, (error) => {
+				}).catch((error) => {
 					if (!renderSignal.aborted) setFailure({ error });
 				});
 				return () => {
 					lifetime.abort();
-					textTask?.cancel();
+					newText?.cancel();
 				};
 			}, [
 				document,
 				page,
 				requested,
+				visible,
+				zoom,
 				signal,
 				attempt,
 				onWidth
@@ -32602,7 +32631,7 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4<f32> {
 						className: `${PdfBody_module_css_default.surface} ${zoomSurfaceClass}`,
 						"data-document-zoom-surface": true,
 						style: { "--document-zoom-width": `${width ?? 0}px` },
-						hidden: state !== "ready" || failure !== void 0,
+						hidden: state !== "ready",
 						children: [(0, react_jsx_runtime.jsx)("canvas", {
 							ref: canvas,
 							className: PdfBody_module_css_default.canvas,

package/lib/types/client/LoadingIndicator.d.ts

@@ -1,12 +1,11 @@
 /** Shared indeterminate loading feedback for document reads and rendering. */
 import type { ReactNode } from 'react';
 /**
- * @param props - localized status label, carried as the accessible name with
- * no visible text, and optional placement style.
- * @returns an animated, accessible loading status.
+ * @param props - localized status label and compact inline placement for additional pages.
+ * @returns a centered document loading status or an accessible inline spinner.
  */
-export declare function LoadingIndicator({ label, className }: {
+export declare function LoadingIndicator({ label, inline }: {
     label: string;
-    className?: string | undefined;
+    inline?: boolean;
 }): ReactNode;
 //# sourceMappingURL=LoadingIndicator.d.ts.map

package/lib/types/client/excel/LazyExcelBody.d.ts

@@ -8,9 +8,10 @@ import type { ExcelLimits } from './model.ts';
 export type ExcelBodyProps = DocumentPreviewProps & PropsLocale<'sidebarExcel'> & {
     readonly limits: ExcelLimits;
 };
-/** Lazily loaded renderer input with the filename-derived parser choice. */
+/** Lazily loaded renderer input with the parser choice and main-bundle loading content. */
 export type LoadedExcelBodyProps = ExcelBodyProps & {
     readonly format: ExcelFormat;
+    readonly loading: ReactNode;
 };
 /**
  * Load the browser spreadsheet renderer for every registered format.

package/lib/types/client/excel/excel.d.ts

@@ -7,5 +7,5 @@ import type { LoadedExcelBodyProps } from './LazyExcelBody.tsx';
  * @param props - Complete workbook bytes, limits, and locale.
  * @returns An isolated spreadsheet surface with cancellable loading.
  */
-export declare function ExcelBody({ content, format, limits, t }: LoadedExcelBodyProps): ReactNode;
+export declare function ExcelBody({ content, format, limits, t, loading }: LoadedExcelBodyProps): ReactNode;
 //# sourceMappingURL=excel.d.ts.map

package/lib/types/client/markdown/path-images.d.ts

@@ -3,7 +3,7 @@
  * @param base - document base URI, including any deployment prefix.
  * @param documentPath - absolute source path reported by the Host, when available.
  * @param destination - authored Markdown image URL; query and fragment are not filename components.
- * @returns an HTTP(S) file URL, or undefined for unsupported or malformed destinations.
+ * @returns a Web or Desktop file URL, or undefined for unsupported or malformed destinations.
  */
 export declare function markdownImageUrl(base: string, documentPath: string | undefined, destination: string): string | undefined;
 //# sourceMappingURL=path-images.d.ts.map

package/lib/types/client/pdf/document.d.ts

@@ -30,7 +30,7 @@ export type RenderPdfText = (page: PDFPageProxy, viewport: PageViewport) => {
  * @param pageNumber - 1-based selected page.
  * @param canvas - canvas owned by this render only.
  * @param signal - render lifetime.
- * @param pixelRatio - display pixel ratio.
+ * @param pixelRatio - device pixel ratio multiplied by the settled document zoom.
  * @param renderText - optional selectable text layer sharing this page and viewport.
  * @returns the page's CSS dimensions after rendering completes.
  */

package/lib/types/client/pdf/pdf.d.ts

@@ -22,8 +22,10 @@ export interface PdfBodyInjected {
 export type PdfBodyProps = DocumentPreviewProps & PropsLocale<'sidebarPdf'> & PropsStore<PdfStore> & PdfBodyInjected;
 /**
  * Present a PDF with tab-local viewing preferences and component-owned rendering resources.
- * @param props - complete bytes and framework-owned tab/store/locale seats.
+ * @param props - complete bytes, framework-owned tab/store/locale seats, and main-bundle loading content.
  * @returns the PDF reader.
  */
-export declare function PdfBody(props: PdfBodyProps): ReactNode;
+export declare function PdfBody(props: PdfBodyProps & {
+    readonly loading: ReactNode;
+}): ReactNode;
 //# sourceMappingURL=pdf.d.ts.map

package/lib/types/client/zoom/ZoomViewport.d.ts

@@ -12,6 +12,8 @@ export interface ZoomViewportProps {
     readonly signal: AbortSignal;
     readonly scrollportRef: RefCallback<HTMLElement>;
     readonly onPreference: (preference: ZoomPreference) => void;
+    /** Resolved scale after a gesture settles or fit-width measurement changes. */
+    readonly onRenderZoom?: (zoom: number) => void;
     readonly children: ReactNode;
 }
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@deepseek-ai/dsh-client-ui-sidebar-documentpreview",
   "description": "Extensible Sidebar previews for Office documents, spreadsheets, Markdown, code, images, PDF, HTML, and plain text",
-  "version": "0.1.7-alpha.2",
+  "version": "0.1.7-rc.2",
   "publishConfig": {
     "access": "public"
   },
@@ -62,25 +62,25 @@
     "react-dom": "^18.2.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
     "@deepseek-ai/cordis": "~4.0.4",
-    "@deepseek-ai/dsh-api-gateway": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-api-remotes": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-api-workspace-files": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-client-connection": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-client-locale": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-client-resources": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-client-store": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-client-test-runtime": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-client-ui-primitives": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-client-ui-renderer": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-client-ui-dockkit": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-client-ui-session": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-client-ui-settings": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-client-ui-sidebar-right": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-client-ui-slots": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-office-to-pdf": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-host-webserver": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-session": "0.1.7-alpha.2",
-    "@deepseek-ai/dsh-util-workspace-path": "0.1.7-alpha.2"
+    "@deepseek-ai/dsh-api-remotes": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-api-workspace-files": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-client-connection": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-api-gateway": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-client-locale": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-client-resources": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-client-store": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-client-test-runtime": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-client-ui-dockkit": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-client-ui-renderer": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-client-ui-settings": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-client-ui-slots": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-client-ui-sidebar-right": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-office-to-pdf": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-host-webserver": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-session": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-util-workspace-path": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-client-ui-session": "0.1.7-rc.2"
   },
   "files": [
     "lib/index.js",