docblocks-react-ui 0.3.1 → 0.4.0

package/dist/{constants-D4FTL0ph.mjs → constants-BaAj3jDA.mjs}

@@ -43,6 +43,40 @@ function assertNever(value) {
 	throw new Error(`Unhandled value: ${String(value)}`);
 }
 //#endregion
+//#region src/shared/ui/icons/ChevronLeft.tsx
+function ChevronLeft(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 24,
+		height: 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+	});
+}
+//#endregion
+//#region src/shared/ui/icons/ChevronRight.tsx
+function ChevronRight(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 24,
+		height: 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+	});
+}
+//#endregion
 //#region src/shared/ui/icons/TriangleAlert.tsx
 function TriangleAlert(props) {
 	return /* @__PURE__ */ jsxs("svg", {
@@ -64,6 +98,23 @@ function TriangleAlert(props) {
 	});
 }
 //#endregion
+//#region src/shared/ui/icons/X.tsx
+function X(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 24,
+		height: 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+	});
+}
+//#endregion
 //#region src/pdf/constants.ts
 /** The iframe's embeddable-url gate: only the http(s) scheme may stand the
 * viewer's iframe. The data / blob / javascript schemes (and the
@@ -78,4 +129,4 @@ function isEmbeddablePdfUrl(url) {
 	}
 }
 //#endregion
-export { isSafeDownloadHref as a, cn as c, clamp as i, TriangleAlert as n, preventDefault as o, assertNever as r, stopPropagation as s, isEmbeddablePdfUrl as t };
+export { ChevronLeft as a, isSafeDownloadHref as c, cn as d, ChevronRight as i, preventDefault as l, X as n, assertNever as o, TriangleAlert as r, clamp as s, isEmbeddablePdfUrl as t, stopPropagation as u };

package/dist/{index-DG0lJy_t.d.mts → index-1dJBnGYv.d.mts}

@@ -1227,15 +1227,18 @@ declare function EditorProvider(props: EditorProviderProps): import("react").JSX
 //#endregion
 //#region src/editor-provider/constants.d.ts
 /**
- * The safe embed sandbox (the default when no `embedSandbox` policy is
- * supplied): the embedded content stands an opaque origin (no
- * `allow-same-origin`), so it cannot read the parent's DOM, cookies, or state;
- * scripts, forms, and popups still run, so interactive embeds keep working.
- * Grant `allow-same-origin` — and `allow-scripts` together with it — only for
- * trusted origins via the `embedSandbox` policy: that combination lets the
- * frame lift its own sandbox.
+ * The embed sandbox (the default when no `embedSandbox` policy is supplied):
+ * the embedded content runs with its own origin's grants (`allow-same-origin`
+ * — the real-app requirement: a dashboard's own storage / cookies stand,
+ * so the app boots like in a plain tab) + scripts, forms, and popups.
+ * The frame's document stands a separate document either way: a
+ * cross-origin embed cannot reach the parent's DOM or state. The one
+ * posture consequence: a same-origin URL (the page's own origin) reaches
+ * the parent over `window.parent` — the document author's own choice to
+ * embed it. The `embedSandbox` policy stands the restriction (the
+ * opaque-origin stand — no `allow-same-origin` — for the untrusted embeds).
  */
-declare const DEFAULT_EMBED_SANDBOX = "allow-scripts allow-forms allow-popups";
+declare const DEFAULT_EMBED_SANDBOX = "allow-scripts allow-same-origin allow-forms allow-popups";
 //#endregion
 //#region src/editor-provider/context.d.ts
 /** Read the per-instance editor context; throws outside an EditorProvider. */

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { n as BlockRendererMap, r as BlockRendererProps, t as BlockRenderer } from "./index-YJcgf8Hh.mjs";
-import { $ as ProtocolLimits, A as filterIsComplete, B as DatabaseBridge, C as DatabaseTableView, Ct as BlobSubtype, D as DatabaseTableRow, E as DatabaseTablePhase, F as BridgeTableDescription, G as IsoInstant, H as FilterConditionInput, I as BridgeValueInput, J as OperationStatus, K as MutationContext, L as CellMap, M as BatchOp, N as BridgeColumn, O as UseDatabaseTable, P as BridgeColumnAnnotation, Q as ProtocolDescriptor, R as CellValueParse, S as DatabaseTableProps, St as BlobStore, T as useDatabaseTable, Tt as createMemoryBlobStore, U as FilterInput, V as DomainEvent, W as Id, X as PageSnapshot, Y as PageQuery, Z as ProtocolCapability, _ as PresencePeer, _t as isBridgeError, a as EditorContextValue, at as SortInput, b as useTableList, bt as BlobMeta, c as EmbedSandboxPolicy, ct as SubscriptionStatus, d as PdfPreview, dt as TableEvent, et as QueryOperator, f as PdfPreviewProps, ft as TableRef, g as PresenceIdentity, gt as BridgeErrorCode, h as PresenceCrypto, ht as BridgeError, i as AccessLevel, it as RowWire, j as FilterBuilder, k as emptyFilter, l as MentionEntry, lt as TableDescription, m as SyncEmbedResolver, mt as BRIDGE_ERROR_CODES, n as DEFAULT_EMBED_SANDBOX, nt as Revision, o as EditorMode, ot as SubscriptionHandle, p as PresenceConfig, pt as TableSnapshot, q as MutationReceipt, r as EditorProvider, rt as RowPage, s as EditorProviderProps, st as SubscriptionObserver, t as useEditorContext, tt as QuerySemantics, u as MentionProvider, ut as TableEnvelopeBase, v as PresenceSharing, vt as isBridgeErrorCode, w as UseTableList, wt as blobSubtypeOf, x as DatabaseTable, xt as BlobRef, y as PresenceSharingMode, yt as toBridgeError, z as Column } from "./index-DG0lJy_t.mjs";
+import { $ as ProtocolLimits, A as filterIsComplete, B as DatabaseBridge, C as DatabaseTableView, Ct as BlobSubtype, D as DatabaseTableRow, E as DatabaseTablePhase, F as BridgeTableDescription, G as IsoInstant, H as FilterConditionInput, I as BridgeValueInput, J as OperationStatus, K as MutationContext, L as CellMap, M as BatchOp, N as BridgeColumn, O as UseDatabaseTable, P as BridgeColumnAnnotation, Q as ProtocolDescriptor, R as CellValueParse, S as DatabaseTableProps, St as BlobStore, T as useDatabaseTable, Tt as createMemoryBlobStore, U as FilterInput, V as DomainEvent, W as Id, X as PageSnapshot, Y as PageQuery, Z as ProtocolCapability, _ as PresencePeer, _t as isBridgeError, a as EditorContextValue, at as SortInput, b as useTableList, bt as BlobMeta, c as EmbedSandboxPolicy, ct as SubscriptionStatus, d as PdfPreview, dt as TableEvent, et as QueryOperator, f as PdfPreviewProps, ft as TableRef, g as PresenceIdentity, gt as BridgeErrorCode, h as PresenceCrypto, ht as BridgeError, i as AccessLevel, it as RowWire, j as FilterBuilder, k as emptyFilter, l as MentionEntry, lt as TableDescription, m as SyncEmbedResolver, mt as BRIDGE_ERROR_CODES, n as DEFAULT_EMBED_SANDBOX, nt as Revision, o as EditorMode, ot as SubscriptionHandle, p as PresenceConfig, pt as TableSnapshot, q as MutationReceipt, r as EditorProvider, rt as RowPage, s as EditorProviderProps, st as SubscriptionObserver, t as useEditorContext, tt as QuerySemantics, u as MentionProvider, ut as TableEnvelopeBase, v as PresenceSharing, vt as isBridgeErrorCode, w as UseTableList, wt as blobSubtypeOf, x as DatabaseTable, xt as BlobRef, y as PresenceSharingMode, yt as toBridgeError, z as Column } from "./index-1dJBnGYv.mjs";
 import * as React from "react";
 import { ComponentType, ReactNode } from "react";
 import { Block, BlockId, BlockType, Doc, DocMeta, PresenceState, Selection, SelectionView, SyncEmbedRef, TextRun } from "docblocks-core";
@@ -294,7 +294,7 @@ declare function AlertDescription({ className, ...props }: React.ComponentProps<
 //#endregion
 //#region src/shared/ui/Badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "custom" | "secondary" | "destructive" | "outline" | null | undefined;
+  variant?: "default" | "destructive" | "outline" | "secondary" | "custom" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
   asChild?: boolean;
@@ -305,7 +305,7 @@ declare function BareSelect({ className, children, ...props }: React.ComponentPr
 //#endregion
 //#region src/shared/ui/Button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
   size?: "default" | "icon" | "sm" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, type, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { $ as PopoverHeader, A as SelectTrigger, At as isBridgeErrorCode, B as DropdownMenuRadioGroup, Bt as useMeta, C as SelectContent, Ct as BASELINE_CAPABILITIES, D as SelectScrollDownButton, Dt as BRIDGE_ERROR_CODES, E as SelectLabel, Et as validateProtocolDescriptor, F as DropdownMenuContent, Ft as columnAnnotation, G as DropdownMenuSubContent, Gt as useText, H as DropdownMenuSeparator, Ht as usePresenceSharing, I as DropdownMenuGroup, It as ScrollArea, J as Separator, Jt as blobSubtypeOf, K as DropdownMenuSubTrigger, L as DropdownMenuItem, Lt as Input, M as Label, Mt as conditionMatches, N as DropdownMenu, Nt as parseCellValue, O as SelectScrollUpButton, Ot as BridgeError, P as DropdownMenuCheckboxItem, Pt as TEXT_TYPES, Q as PopoverDescription, R as DropdownMenuLabel, Rt as useBlock, S as Select, St as AlertTitle, T as SelectItem, Tt as isDatabaseBridge, U as DropdownMenuShortcut, Ut as useSelection, V as DropdownMenuRadioItem, Vt as usePresence, W as DropdownMenuSub, Wt as useSelectionView, X as PopoverAnchor, Y as Popover, Yt as createMemoryBlobStore, Z as PopoverContent, _ as FilterBuilder, _t as BareSelect, a as SHAPE_FONT_STACKS, at as CardAction, b as Skeleton, bt as Alert, ct as CardFooter, d as useEditorContext, dt as Pen, et as PopoverTitle, f as DEFAULT_EMBED_SANDBOX, ft as Eye, g as newMutationContext, gt as buttonVariants, h as cellValueEqual, ht as Button, i as SHAPE_FONT_OPTIONS, it as Card, j as SelectValue, jt as toBridgeError, k as SelectSeparator, kt as isBridgeError, l as markToggleAction, lt as CardHeader, m as useDatabaseTable, mt as BookOpen, nt as DocblocksI18nProvider, o as FORMAT_PALETTE, ot as CardContent, p as GridBody, q as DropdownMenuTrigger, qt as renderRuns, rt as Checkbox, st as CardDescription, t as Editor, tt as PopoverTrigger, u as EditorProvider, ut as CardTitle, v as emptyFilter, vt as Badge, w as SelectGroup, wt as PROTOCOL_VERSION, x as SegmentSelector, xt as AlertDescription, y as filterIsComplete, yt as badgeVariants, z as DropdownMenuPortal, zt as useDoc } from "./Editor-BvKqUGXH.mjs";
-import { c as cn, o as preventDefault } from "./constants-D4FTL0ph.mjs";
+import { $ as PopoverHeader, A as SelectTrigger, At as isBridgeErrorCode, B as DropdownMenuRadioGroup, Bt as useMeta, C as SelectContent, Ct as BASELINE_CAPABILITIES, D as SelectScrollDownButton, Dt as BRIDGE_ERROR_CODES, E as SelectLabel, Et as validateProtocolDescriptor, F as DropdownMenuContent, Ft as columnAnnotation, G as DropdownMenuSubContent, Gt as useText, H as DropdownMenuSeparator, Ht as usePresenceSharing, I as DropdownMenuGroup, It as ScrollArea, J as Separator, Jt as blobSubtypeOf, K as DropdownMenuSubTrigger, L as DropdownMenuItem, Lt as Input, M as Label, Mt as conditionMatches, N as DropdownMenu, Nt as parseCellValue, O as SelectScrollUpButton, Ot as BridgeError, P as DropdownMenuCheckboxItem, Pt as TEXT_TYPES, Q as PopoverDescription, R as DropdownMenuLabel, Rt as useBlock, S as Select, St as AlertTitle, T as SelectItem, Tt as isDatabaseBridge, U as DropdownMenuShortcut, Ut as useSelection, V as DropdownMenuRadioItem, Vt as usePresence, W as DropdownMenuSub, Wt as useSelectionView, X as PopoverAnchor, Y as Popover, Yt as createMemoryBlobStore, Z as PopoverContent, _ as FilterBuilder, _t as BareSelect, a as SHAPE_FONT_STACKS, at as CardAction, b as Skeleton, bt as Alert, ct as CardFooter, d as useEditorContext, dt as Pen, et as PopoverTitle, f as DEFAULT_EMBED_SANDBOX, ft as Eye, g as newMutationContext, gt as buttonVariants, h as cellValueEqual, ht as Button, i as SHAPE_FONT_OPTIONS, it as Card, j as SelectValue, jt as toBridgeError, k as SelectSeparator, kt as isBridgeError, l as markToggleAction, lt as CardHeader, m as useDatabaseTable, mt as BookOpen, nt as DocblocksI18nProvider, o as FORMAT_PALETTE, ot as CardContent, p as GridBody, q as DropdownMenuTrigger, qt as renderRuns, rt as Checkbox, st as CardDescription, t as Editor, tt as PopoverTrigger, u as EditorProvider, ut as CardTitle, v as emptyFilter, vt as Badge, w as SelectGroup, wt as PROTOCOL_VERSION, x as SegmentSelector, xt as AlertDescription, y as filterIsComplete, yt as badgeVariants, z as DropdownMenuPortal, zt as useDoc } from "./Editor-BgG_An_T.mjs";
+import { d as cn, l as preventDefault } from "./constants-BaAj3jDA.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";

package/dist/mermaid/index.mjs

@@ -1,5 +1,5 @@
-import { Kt as INLINE_CODE_CLASS, St as AlertTitle, b as Skeleton, bt as Alert, c as textOf, d as useEditorContext, ft as Eye, n as childrenSlot, pt as CodeXml, r as CodeHeader, s as TextBlock, x as SegmentSelector, xt as AlertDescription } from "../Editor-BvKqUGXH.mjs";
-import { n as TriangleAlert } from "../constants-D4FTL0ph.mjs";
+import { Kt as INLINE_CODE_CLASS, St as AlertTitle, b as Skeleton, bt as Alert, c as textOf, d as useEditorContext, ft as Eye, n as childrenSlot, pt as CodeXml, r as CodeHeader, s as TextBlock, x as SegmentSelector, xt as AlertDescription } from "../Editor-BgG_An_T.mjs";
+import { r as TriangleAlert } from "../constants-BaAj3jDA.mjs";
 import { t as LoaderCircle } from "../LoaderCircle-AGVFE4IP.mjs";
 import { useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/pdf/index.d.mts

@@ -1,4 +1,4 @@
-import { f as PdfPreviewProps } from "../index-DG0lJy_t.mjs";
+import { f as PdfPreviewProps } from "../index-1dJBnGYv.mjs";
 //#region src/pdf/PdfFirstPage.d.ts
 declare function PdfFirstPage({ id, url, name }: PdfPreviewProps): import("react").JSX.Element;
 //#endregion

package/dist/pdf/index.mjs

@@ -1,9 +1,54 @@
-import { a as isSafeDownloadHref, c as cn, n as TriangleAlert, t as isEmbeddablePdfUrl } from "../constants-D4FTL0ph.mjs";
+import { a as ChevronLeft, c as isSafeDownloadHref, d as cn, i as ChevronRight, n as X, r as TriangleAlert, t as isEmbeddablePdfUrl } from "../constants-BaAj3jDA.mjs";
 import { t as LoaderCircle } from "../LoaderCircle-AGVFE4IP.mjs";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { GlobalWorkerOptions, RenderingCancelledException, getDocument } from "pdfjs-dist";
+import { createPortal } from "react-dom";
+//#region src/shared/ui/icons/Maximize.tsx
+function Maximize(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 24,
+		height: 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
+			/* @__PURE__ */ jsx("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
+			/* @__PURE__ */ jsx("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
+			/* @__PURE__ */ jsx("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
+		]
+	});
+}
+//#endregion
+//#region src/shared/ui/icons/Minimize.tsx
+function Minimize(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 24,
+		height: 24,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M8 3v3a2 2 0 0 1-2 2H3" }),
+			/* @__PURE__ */ jsx("path", { d: "M21 8h-3a2 2 0 0 1-2-2V3" }),
+			/* @__PURE__ */ jsx("path", { d: "M3 16h3a2 2 0 0 1 2 2v3" }),
+			/* @__PURE__ */ jsx("path", { d: "M16 21v-3a2 2 0 0 1 2-2h3" })
+		]
+	});
+}
+//#endregion
 //#region src/pdf/pdf-worker.ts
 /** The pdfjs-dist worker wiring (the side-effect): the worker file is
 * copied next to this entry at build time (dist/pdf/), so the relative
@@ -28,26 +73,74 @@ if (typeof window !== "undefined") fetch(WORKER_URL, { method: "HEAD" }).catch((
 });
 //#endregion
 //#region src/pdf/PdfFirstPage.tsx
-/** The first-page preview of one `pdf`-subtype image block: fetch the
-* resolved blob, render page 1 to a canvas via pdfjs-dist. The previous
-* phase stands until the (re-)render settles (no flicker while the url
-* changes). A failure stands the error note over the native iframe
-* fallback (the document stays viewable). The in-flight fetch is aborted
-* on unmount / url change and the render task + document are released,
-* so a torn-down preview leaves no network request or pdf.js worker
-* behind. */
+/** The PDF preview of one `pdf`-subtype image block: fetch the resolved
+* blob, render the pages to a canvas via pdfjs-dist. The inline view stands
+* the first page over the page row; the controls (the previous/next page
+* buttons + the page indicator + the fullscreen toggle) stand a bar under
+* the canvas. The fullscreen mode opens a portal overlay over the viewport
+* (the page scaled to fill the viewport, the same page navigation, the
+* Escape key / the close button / the outside click exit). A failure stands
+* the error note over the native iframe fallback (the document stays
+* viewable). The in-flight fetch is aborted on unmount / url change and the
+* render task + document are released, so a torn-down preview leaves no
+* network request or pdf.js worker behind. */
+/** Render one page to a canvas (the natural page size, the backing store
+* scaled by the device pixel ratio for a crisp retina display). Returns the
+* render task (the caller awaits its promise + cancels it on teardown).
+* Does NOT await the promise itself, so the caller can cancel the in-flight
+* render before it completes. */
+function renderPageToCanvas(pdf, pageNumber, canvas) {
+	return pdf.getPage(pageNumber).then((page) => {
+		const ratio = window.devicePixelRatio || 1;
+		const viewport = page.getViewport({ scale: ratio });
+		canvas.width = Math.max(1, Math.floor(viewport.width));
+		canvas.height = Math.max(1, Math.floor(viewport.height));
+		canvas.style.width = `${Math.max(1, Math.floor(viewport.width / ratio))}px`;
+		canvas.style.height = `${Math.max(1, Math.floor(viewport.height / ratio))}px`;
+		return page.render({
+			canvas,
+			viewport
+		});
+	});
+}
+/** Render one page to a canvas, scaled to fill the container (the
+* object-fit: contain behavior — the page's aspect ratio is preserved, the
+* page fills the container's width or height). Returns the render task. */
+function renderPageToCanvasScaled(pdf, pageNumber, canvas, containerWidth, containerHeight) {
+	return pdf.getPage(pageNumber).then((page) => {
+		const pageViewport = page.getViewport({ scale: 1 });
+		const scale = Math.min(containerWidth / pageViewport.width, containerHeight / pageViewport.height);
+		const ratio = window.devicePixelRatio || 1;
+		const viewport = page.getViewport({ scale: scale * ratio });
+		canvas.width = Math.max(1, Math.floor(viewport.width));
+		canvas.height = Math.max(1, Math.floor(viewport.height));
+		canvas.style.width = `${Math.max(1, Math.floor(viewport.width / ratio))}px`;
+		canvas.style.height = `${Math.max(1, Math.floor(viewport.height / ratio))}px`;
+		return page.render({
+			canvas,
+			viewport
+		});
+	});
+}
 function PdfFirstPage({ id, url, name }) {
 	const { t } = useTranslation("blocks");
 	const canvasRef = useRef(null);
+	const fullscreenCanvasRef = useRef(null);
+	const fullscreenContainerRef = useRef(null);
 	const loadingTaskRef = useRef(null);
-	const renderTaskRef = useRef(null);
+	const pdfDocRef = useRef(null);
 	const [phase, setPhase] = useState("loading");
 	const [error, setError] = useState(null);
+	const [currentPage, setCurrentPage] = useState(1);
+	const [totalPages, setTotalPages] = useState(0);
+	const [isFullscreen, setIsFullscreen] = useState(false);
 	useEffect(() => {
 		const controller = new AbortController();
 		let cancelled = false;
 		setPhase("loading");
 		setError(null);
+		setCurrentPage(1);
+		setTotalPages(0);
 		const run = async () => {
 			try {
 				const response = await fetch(url, { signal: controller.signal });
@@ -66,28 +159,9 @@ function PdfFirstPage({ id, url, name }) {
 					task.destroy().catch(() => void 0);
 					return;
 				}
-				const page = await pdf.getPage(1);
-				if (cancelled) {
-					loadingTaskRef.current = null;
-					task.destroy().catch(() => void 0);
-					return;
-				}
-				const canvas = canvasRef.current;
-				if (canvas === null) return;
-				const ratio = window.devicePixelRatio || 1;
-				const viewport = page.getViewport({ scale: ratio });
-				canvas.width = Math.max(1, Math.floor(viewport.width));
-				canvas.height = Math.max(1, Math.floor(viewport.height));
-				canvas.style.width = `${Math.max(1, Math.floor(viewport.width / ratio))}px`;
-				canvas.style.height = `${Math.max(1, Math.floor(viewport.height / ratio))}px`;
-				const renderTask = page.render({
-					canvas,
-					viewport
-				});
-				renderTaskRef.current = renderTask;
-				await renderTask.promise;
-				if (renderTaskRef.current === renderTask) renderTaskRef.current = null;
-				if (!cancelled) setPhase("ready");
+				pdfDocRef.current = pdf;
+				setTotalPages(pdf.numPages);
+				setPhase("ready");
 			} catch (cause) {
 				if (cancelled || cause instanceof RenderingCancelledException || cause instanceof DOMException && cause.name === "AbortError") return;
 				const message = cause instanceof Error ? cause.message : String(cause);
@@ -99,14 +173,85 @@ function PdfFirstPage({ id, url, name }) {
 		return () => {
 			cancelled = true;
 			controller.abort();
-			const renderTask = renderTaskRef.current;
-			renderTaskRef.current = null;
-			if (renderTask !== null) renderTask.cancel();
+			pdfDocRef.current = null;
 			const task = loadingTaskRef.current;
 			loadingTaskRef.current = null;
 			if (task !== null) task.destroy().catch(() => void 0);
 		};
 	}, [url]);
+	useEffect(() => {
+		if (phase !== "ready") return;
+		const pdf = pdfDocRef.current;
+		const canvas = canvasRef.current;
+		if (pdf === null || canvas === null) return;
+		let cancelled = false;
+		let renderTask = null;
+		const run = async () => {
+			try {
+				renderTask = await renderPageToCanvas(pdf, currentPage, canvas);
+				await renderTask.promise;
+			} catch (cause) {
+				if (cancelled || cause instanceof RenderingCancelledException || cause instanceof DOMException && cause.name === "AbortError") return;
+			}
+		};
+		run();
+		return () => {
+			cancelled = true;
+			if (renderTask !== null) renderTask.cancel();
+		};
+	}, [
+		url,
+		currentPage,
+		phase
+	]);
+	useEffect(() => {
+		if (!isFullscreen || phase !== "ready") return;
+		const pdf = pdfDocRef.current;
+		const canvas = fullscreenCanvasRef.current;
+		const container = fullscreenContainerRef.current;
+		if (pdf === null || canvas === null || container === null) return;
+		let cancelled = false;
+		let renderTask = null;
+		const render = () => {
+			const width = container.clientWidth;
+			const height = container.clientHeight;
+			if (width === 0 || height === 0) return;
+			(async () => {
+				try {
+					renderTask = await renderPageToCanvasScaled(pdf, currentPage, canvas, width, height);
+					await renderTask.promise;
+				} catch (cause) {
+					if (cancelled || cause instanceof RenderingCancelledException || cause instanceof DOMException && cause.name === "AbortError") return;
+				}
+			})();
+		};
+		render();
+		const observer = new ResizeObserver(() => render());
+		observer.observe(container);
+		return () => {
+			cancelled = true;
+			observer.disconnect();
+			if (renderTask !== null) renderTask.cancel();
+		};
+	}, [
+		isFullscreen,
+		currentPage,
+		phase
+	]);
+	useEffect(() => {
+		if (!isFullscreen) return;
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") setIsFullscreen(false);
+		};
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, [isFullscreen]);
+	const prevPage = useCallback(() => {
+		setCurrentPage((page) => Math.max(1, page - 1));
+	}, []);
+	const nextPage = useCallback(() => {
+		setCurrentPage((page) => Math.min(totalPages, page + 1));
+	}, [totalPages]);
 	if (phase === "error") return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "docblocks/image-pdf-preview",
 		"data-block-id": id,
@@ -139,26 +284,148 @@ function PdfFirstPage({ id, url, name }) {
 			children: name ?? "document"
 		})]
 	});
+	const inlineControls = /* @__PURE__ */ jsxs("div", {
+		"data-slot": "docblocks/image-pdf-controls",
+		className: "\n        flex items-center justify-center gap-1 rounded-(--docblocks-radius)\n        border-(length:--docblocks-table-border-width) border-(--docblocks-table-border-color) bg-(--muted) px-2 py-1\n      ",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "docblocks/image-pdf-prev",
+				onClick: prevPage,
+				disabled: currentPage <= 1,
+				"aria-label": t("code.pdfPrevPage"),
+				className: "\n          flex size-6 items-center justify-center rounded-sm text-(--muted-foreground) transition-colors\n          hover:bg-(--accent) hover:text-(--accent-foreground)\n          disabled:pointer-events-none disabled:opacity-40\n        ",
+				children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"data-slot": "docblocks/image-pdf-page-indicator",
+				className: "px-1 text-xs text-(--muted-foreground) tabular-nums",
+				children: [
+					currentPage,
+					" / ",
+					totalPages
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "docblocks/image-pdf-next",
+				onClick: nextPage,
+				disabled: currentPage >= totalPages,
+				"aria-label": t("code.pdfNextPage"),
+				className: "\n          flex size-6 items-center justify-center rounded-sm text-(--muted-foreground) transition-colors\n          hover:bg-(--accent) hover:text-(--accent-foreground)\n          disabled:pointer-events-none disabled:opacity-40\n        ",
+				children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "docblocks/image-pdf-fullscreen",
+				onClick: () => setIsFullscreen(true),
+				"aria-label": t("code.pdfFullscreen"),
+				className: "\n          ml-1 flex size-6 items-center justify-center rounded-sm text-(--muted-foreground) transition-colors\n          hover:bg-(--accent) hover:text-(--accent-foreground)\n        ",
+				children: /* @__PURE__ */ jsx(Maximize, { className: "size-4" })
+			})
+		]
+	});
+	const fullscreenControls = /* @__PURE__ */ jsxs("div", {
+		"data-slot": "docblocks/image-pdf-controls",
+		className: "\n        flex items-center justify-center gap-1 rounded-(--radius) border border-(--border) bg-(--muted) px-2 py-1\n      ",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "docblocks/image-pdf-prev",
+				onClick: prevPage,
+				disabled: currentPage <= 1,
+				"aria-label": t("code.pdfPrevPage"),
+				className: "\n          flex size-6 items-center justify-center rounded-sm text-(--muted-foreground) transition-colors\n          hover:bg-(--accent) hover:text-(--accent-foreground)\n          disabled:pointer-events-none disabled:opacity-40\n        ",
+				children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"data-slot": "docblocks/image-pdf-page-indicator",
+				className: "px-1 text-xs text-(--muted-foreground) tabular-nums",
+				children: [
+					currentPage,
+					" / ",
+					totalPages
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "docblocks/image-pdf-next",
+				onClick: nextPage,
+				disabled: currentPage >= totalPages,
+				"aria-label": t("code.pdfNextPage"),
+				className: "\n          flex size-6 items-center justify-center rounded-sm text-(--muted-foreground) transition-colors\n          hover:bg-(--accent) hover:text-(--accent-foreground)\n          disabled:pointer-events-none disabled:opacity-40\n        ",
+				children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "docblocks/image-pdf-minimize",
+				onClick: () => setIsFullscreen(false),
+				"aria-label": t("code.pdfCloseFullscreen"),
+				className: "\n          ml-1 flex size-6 items-center justify-center rounded-sm text-(--muted-foreground) transition-colors\n          hover:bg-(--accent) hover:text-(--accent-foreground)\n        ",
+				children: /* @__PURE__ */ jsx(Minimize, { className: "size-4" })
+			})
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "docblocks/image-pdf-preview",
 		"data-block-id": id,
 		"data-block-type": "image",
 		"data-phase": phase,
-		className: "relative mx-0 my-(--docblocks-block-spacing) flex justify-center",
-		children: [/* @__PURE__ */ jsx("canvas", {
-			ref: canvasRef,
-			"data-slot": "docblocks/image-pdf-canvas",
-			className: cn(`
-            block max-w-full rounded-(--docblocks-image-radius) border-(length:--docblocks-table-border-width)
-            border-(--docblocks-table-border-color) bg-(--background)
-          `, phase === "ready" ? "h-auto" : "hidden")
-		}), phase === "loading" && /* @__PURE__ */ jsxs("div", {
-			className: "flex h-48 w-full items-center justify-center gap-2 text-sm text-(--muted-foreground)",
-			children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin" }), /* @__PURE__ */ jsx("span", {
-				"data-slot": "docblocks/image-pdf-loading",
-				children: t("code.pdfLoading")
-			})]
-		})]
+		className: "relative mx-0 my-(--docblocks-block-spacing) flex flex-col items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative flex w-full justify-center",
+				children: [/* @__PURE__ */ jsx("canvas", {
+					ref: canvasRef,
+					"data-slot": "docblocks/image-pdf-canvas",
+					className: cn(`
+              block max-w-full rounded-(--docblocks-image-radius) border-(length:--docblocks-table-border-width)
+              border-(--docblocks-table-border-color) bg-(--background)
+            `, phase === "ready" ? "h-auto" : "hidden")
+				}), phase === "loading" && /* @__PURE__ */ jsxs("div", {
+					className: "flex h-48 w-full items-center justify-center gap-2 text-sm text-(--muted-foreground)",
+					children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin" }), /* @__PURE__ */ jsx("span", {
+						"data-slot": "docblocks/image-pdf-loading",
+						children: t("code.pdfLoading")
+					})]
+				})]
+			}),
+			phase === "ready" && inlineControls,
+			isFullscreen && createPortal(/* @__PURE__ */ jsxs("div", {
+				"data-slot": "docblocks/image-pdf-fullscreen-overlay",
+				className: "fixed inset-0 z-50 flex flex-col items-center justify-center gap-3 bg-(--background)",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": t("code.pdfFullscreen"),
+				onClick: (event) => {
+					const target = event.target;
+					if (target === null) return;
+					if (target.closest("[data-slot=\"docblocks/image-pdf-fullscreen-canvas\"]") !== null) return;
+					if (target.closest("[data-slot=\"docblocks/image-pdf-controls\"]") !== null) return;
+					setIsFullscreen(false);
+				},
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"data-slot": "docblocks/image-pdf-fullscreen-close",
+						onClick: () => setIsFullscreen(false),
+						"aria-label": t("code.pdfCloseFullscreen"),
+						className: "\n                absolute top-4 right-4 flex size-8 items-center justify-center rounded-md text-(--foreground)\n                transition-colors\n                hover:bg-(--accent)\n              ",
+						children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+					}),
+					/* @__PURE__ */ jsx("div", {
+						ref: fullscreenContainerRef,
+						className: "flex h-[calc(100vh-6rem)] w-[calc(100vw-4rem)] items-center justify-center overflow-hidden",
+						children: /* @__PURE__ */ jsx("canvas", {
+							ref: fullscreenCanvasRef,
+							"data-slot": "docblocks/image-pdf-fullscreen-canvas",
+							className: "max-h-full max-w-full border border-(--border) bg-(--background) shadow-lg"
+						})
+					}),
+					fullscreenControls
+				]
+			}), document.body)
+		]
 	});
 }
 //#endregion