@l1yp/file-viewer 0.1.0 → 0.1.1

package/dist/components/ZipBrowser.js

@@ -2,6 +2,6 @@ import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./ZipBrowser.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                           */
 //#region src/components/ZipBrowser.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-04e7e09d"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-3b2fe067"]]);
 //#endregion
 export { n as default };

package/dist/components/ZipBrowser.vue.d.ts

@@ -3,7 +3,9 @@
  * and browse the contents. A master→detail within the narrow pane — a collapsible file tree, and selecting an
  * entry extracts just that one, wraps it in a blob URL, and hands it to {@link FileViewerBody} (so a file
  * inside the zip previews with every viewer a top-level file gets — code/image/pdf/cert/audio/nested-zip/…).
- * No entry bytes are kept around: selecting decodes on demand, and the download button re-extracts.
+ * HTML is the one multi-entry case: its relative JS/CSS/image/font dependencies are resolved from the same ZIP
+ * and rewritten before entering the existing sandboxed iframe. Other entry bytes are not retained; selecting
+ * decodes on demand, and the download button re-extracts.
  */
 type __VLS_Props = {
     url: string;

package/dist/components/ZipBrowser.vue_vue_type_script_setup_true_lang.js

@@ -2,8 +2,10 @@ import { fileExt as e, isDicomFile as t, isTextFile as n } from "../lib/fileType
 import { canToggleView as r, classifyViewerFile as i, mediaMimeForName as ee } from "../lib/viewerKind.js";
 import { formatBytes as a } from "../lib/format.js";
 import o from "./icons/Icon.js";
-import { ZipEncryptedError as te, ZipPasswordError as s, extractZipEntry as c, readZip as ne, zipSupported as re } from "../lib/zip.js";
-import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineAsyncComponent as g, defineComponent as _, normalizeClass as v, normalizeStyle as ie, onBeforeUnmount as ae, onMounted as oe, openBlock as y, reactive as se, ref as b, renderList as ce, toDisplayString as x, unref as S, vModelText as le, watch as ue, withDirectives as de, withKeys as fe } from "vue";
+import { decodeTextSniff as te } from "../lib/encoding.js";
+import { ZipEncryptedError as s, ZipPasswordError as c, extractZipEntry as l, readZip as u, zipSupported as ne } from "../lib/zip.js";
+import { buildArchiveHtmlPreview as re } from "../lib/archiveHtml.js";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as _, defineAsyncComponent as v, defineComponent as y, normalizeClass as b, normalizeStyle as ie, onBeforeUnmount as ae, onMounted as oe, openBlock as x, reactive as se, ref as S, renderList as ce, toDisplayString as C, unref as w, vModelText as le, watch as ue, withDirectives as de, withKeys as fe } from "vue";
 //#region src/components/ZipBrowser.vue?vue&type=script&setup=true&lang.ts
 var pe = { class: "zip" }, me = {
 	key: 0,
@@ -31,20 +33,20 @@ var pe = { class: "zip" }, me = {
 }, Oe = ["onClick"], ke = { class: "zip__twisty" }, Ae = { class: "zip__rowicon" }, je = { class: "zip__rowname" }, Me = {
 	key: 1,
 	class: "zip__rowsize"
-}, C = /*@__PURE__*/ _({
+}, T = /*@__PURE__*/ y({
 	__name: "ZipBrowser",
 	props: {
 		url: {},
 		name: {}
 	},
-	setup(_) {
-		let C = g(() => import("./DicomViewer.js")), Ne = g(() => import("./FileViewerBody.js")), w = _, T = b("loading"), E = b(""), D = null, O = b([]), k = b(""), A = b(""), j = b(!1), Pe = u(() => O.value.some((e) => e.encrypted)), M = b({
+	setup(y) {
+		let T = v(() => import("./DicomViewer.js")), Ne = v(() => import("./FileViewerBody.js")), E = y, D = S("loading"), O = S(""), k = null, A = S([]), j = S(""), M = S(""), N = S(!1), Pe = f(() => A.value.some((e) => e.encrypted)), P = S({
 			name: "",
 			path: "",
 			isDir: !0,
 			size: 0,
 			children: []
-		}), N = se(/* @__PURE__ */ new Set()), Fe = u(() => O.value.reduce((e, t) => e + +!t.isDir, 0)), Ie = u(() => O.value.reduce((e, t) => e + (t.isDir ? 0 : t.size), 0));
+		}), F = se(/* @__PURE__ */ new Set()), Fe = f(() => A.value.reduce((e, t) => e + +!t.isDir, 0)), Ie = f(() => A.value.reduce((e, t) => e + (t.isDir ? 0 : t.size), 0));
 		function Le(e) {
 			let t = {
 				name: "",
@@ -83,244 +85,272 @@ var pe = { class: "zip" }, me = {
 					children: []
 				});
 			}
-			return P(t), t;
+			return I(t), t;
 		}
-		function P(e) {
+		function I(e) {
 			e.children.sort((e, t) => e.isDir === t.isDir ? e.name.localeCompare(t.name) : e.isDir ? -1 : 1);
-			for (let t of e.children) t.isDir && P(t);
+			for (let t of e.children) t.isDir && I(t);
 		}
-		let F = u(() => {
+		let L = f(() => {
 			let e = [], t = (n, r) => {
 				for (let i of n) e.push({
 					node: i,
 					depth: r
-				}), i.isDir && N.has(i.path) && t(i.children, r + 1);
+				}), i.isDir && F.has(i.path) && t(i.children, r + 1);
 			};
-			return t(M.value.children, 0), e;
+			return t(P.value.children, 0), e;
 		});
-		async function I() {
-			if (T.value = "loading", E.value = "", L.value = null, k.value = "", A.value = "", j.value = !1, J(), G.value = [], !re()) {
-				E.value = "当前浏览器不支持在前端解压 ZIP（缺少 DecompressionStream）", T.value = "error";
+		async function R() {
+			if (J++, D.value = "loading", O.value = "", z.value = null, U.value = null, W.value = "", j.value = "", M.value = "", N.value = !1, X(), Y.value = [], !ne()) {
+				O.value = "当前浏览器不支持在前端解压 ZIP（缺少 DecompressionStream）", D.value = "error";
 				return;
 			}
 			try {
-				let e = await fetch(w.url);
+				let e = await fetch(E.url);
 				if (!e.ok) throw Error(`HTTP ${e.status}`);
-				D = await e.arrayBuffer();
-				let t = ne(D);
-				O.value = t, M.value = Le(t), N.clear(), T.value = "ready";
+				k = await e.arrayBuffer();
+				let t = u(k);
+				A.value = t, P.value = Le(t), F.clear(), D.value = "ready";
 			} catch (e) {
-				E.value = e instanceof Error ? e.message : String(e), T.value = "error";
+				O.value = e instanceof Error ? e.message : String(e), D.value = "error";
 			}
 		}
-		let L = b(null), R = b("ready"), z = b(""), B = b(""), V = b(null), H = b(!1), U = b("render"), W = b(""), G = b([]), K = b(0), q = b(""), Re = u(() => G.value.reduce((e, t) => e + (t.size ?? 0), 0)), ze = u(() => r(V.value, B.value));
-		function J() {
-			W.value &&= (URL.revokeObjectURL(W.value), "");
+		let z = S(null), B = S("ready"), V = S(""), H = S(""), U = S(null), W = S(""), G = S(!1), K = S("render"), q = S(""), J = 0, Y = S([]), Re = S(0), ze = S(""), Be = f(() => Y.value.reduce((e, t) => e + (t.size ?? 0), 0)), Ve = f(() => r(U.value, H.value));
+		function X() {
+			q.value &&= (URL.revokeObjectURL(q.value), "");
 		}
-		function Y(e) {
+		function Z(e) {
 			let t = e.lastIndexOf("/");
 			return t < 0 ? "" : e.slice(0, t);
 		}
-		function Be(e) {
-			let n = Y(e.path);
-			return O.value.filter((e) => !e.isDir && t(e.name) && Y(e.path) === n).sort((e, t) => e.path.localeCompare(t.path, void 0, {
+		function He(e) {
+			let n = Z(e.path);
+			return A.value.filter((e) => !e.isDir && t(e.name) && Z(e.path) === n).sort((e, t) => e.path.localeCompare(t.path, void 0, {
 				numeric: !0,
 				sensitivity: "base"
 			}));
 		}
-		function Ve(t, r) {
+		function Ue(t, r) {
 			if (n(r)) return !0;
 			if (e(r)) return !1;
 			let i = Math.min(t.length, 4096);
 			for (let e = 0; e < i; e++) if (t[e] === 0) return !1;
 			return !0;
 		}
-		async function X(e) {
-			if (L.value = e, R.value = "loading", z.value = "", B.value = "", V.value = null, H.value = !1, U.value = "render", J(), G.value = [], D) try {
+		async function We(e) {
+			let n = ++J, r = "";
+			if (z.value = e, B.value = "loading", V.value = "", H.value = "", U.value = null, W.value = "", G.value = !1, K.value = "render", X(), Y.value = [], k) try {
 				if (t(e.name)) {
-					let t = Be(e);
+					let t = He(e);
 					if (t.length > 1) {
-						G.value = t.map((e) => ({
+						Y.value = t.map((e) => ({
 							name: e.name,
 							size: e.size,
 							load: async () => {
-								let t = await c(D, e, k.value), n = new ArrayBuffer(t.byteLength);
+								let t = await l(k, e, j.value), n = new ArrayBuffer(t.byteLength);
 								return new Uint8Array(n).set(t), n;
 							}
-						})), K.value = Math.max(0, t.findIndex((t) => t.path === e.path)), q.value = Y(e.path).split("/").pop() || e.name, H.value = !0, R.value = "ready";
+						})), Re.value = Math.max(0, t.findIndex((t) => t.path === e.path)), ze.value = Z(e.path).split("/").pop() || e.name, G.value = !0, B.value = "ready";
 						return;
 					}
 				}
-				let n = await c(D, e, k.value);
-				if (L.value !== e) return;
-				W.value = URL.createObjectURL(new Blob([n], { type: ee(e.name) })), V.value = i({
+				let a = k, o = await l(a, e, j.value);
+				if (J !== n || z.value !== e) return;
+				let s = URL.createObjectURL(new Blob([o], { type: ee(e.name) }));
+				r = s;
+				let c = i({
 					name: e.name,
-					url: W.value,
+					url: s,
 					size: e.size,
-					textHint: Ve(n, e.name)
-				}), R.value = "ready";
+					textHint: Ue(o, e.name)
+				}), u = "";
+				if (c.html) {
+					let t = te(o);
+					c.content = t;
+					let i = await re({
+						html: t,
+						documentPath: e.path,
+						entries: A.value,
+						loadEntry: (e) => l(a, e, j.value)
+					});
+					if (J !== n || z.value !== e) {
+						URL.revokeObjectURL(s), r = "";
+						return;
+					}
+					u = i.html;
+				}
+				if (J !== n || z.value !== e) {
+					URL.revokeObjectURL(s), r = "";
+					return;
+				}
+				q.value = s, r = "", W.value = u, U.value = c, B.value = "ready";
 			} catch (e) {
-				e instanceof te ? z.value = "该文件已加密：请返回列表并在顶部输入密码" : e instanceof s ? (z.value = "密码错误", j.value = !1) : z.value = e instanceof Error ? e.message : String(e), R.value = "error";
+				r && URL.revokeObjectURL(r), e instanceof s ? V.value = "该文件已加密：请返回列表并在顶部输入密码" : e instanceof c ? (V.value = "密码错误", N.value = !1) : V.value = e instanceof Error ? e.message : String(e), B.value = "error";
 			}
 		}
-		async function Z() {
-			A.value = "";
-			let e = O.value.find((e) => !e.isDir && e.encrypted && e.size > 0);
-			if (!e || !D) {
-				j.value = !0;
+		async function Ge() {
+			M.value = "";
+			let e = A.value.find((e) => !e.isDir && e.encrypted && e.size > 0);
+			if (!e || !k) {
+				N.value = !0;
 				return;
 			}
 			try {
-				await c(D, e, k.value), j.value = !0, L.value && X(L.value);
+				await l(k, e, j.value), N.value = !0, z.value && We(z.value);
 			} catch (e) {
-				j.value = !1, A.value = e instanceof s ? "密码错误" : e instanceof Error ? e.message : String(e);
+				N.value = !1, M.value = e instanceof c ? "密码错误" : e instanceof Error ? e.message : String(e);
 			}
 		}
-		function He(e) {
-			e.isDir ? N.has(e.path) ? N.delete(e.path) : N.add(e.path) : e.entry && X(e.entry);
+		function Ke(e) {
+			e.isDir ? F.has(e.path) ? F.delete(e.path) : F.add(e.path) : e.entry && We(e.entry);
 		}
-		function Ue() {
-			L.value = null, B.value = "", V.value = null, H.value = !1, J(), G.value = [];
+		function qe() {
+			J++, z.value = null, H.value = "", U.value = null, W.value = "", G.value = !1, X(), Y.value = [];
 		}
-		async function We(e) {
-			if (D) try {
-				let t = URL.createObjectURL(new Blob([await c(D, e, k.value)])), n = document.createElement("a");
+		async function Je(e) {
+			if (k) try {
+				let t = URL.createObjectURL(new Blob([await l(k, e, j.value)])), n = document.createElement("a");
 				n.href = t, n.download = e.name, document.body.appendChild(n), n.click(), n.remove(), setTimeout(() => URL.revokeObjectURL(t), 1e3);
 			} catch {}
 		}
-		let Q = b(!1), $;
-		async function Ge() {
+		let Q = S(!1), $;
+		async function Ye() {
 			try {
-				await navigator.clipboard?.writeText(B.value);
+				await navigator.clipboard?.writeText(H.value);
 			} catch {}
 			Q.value = !0, clearTimeout($), $ = setTimeout(() => Q.value = !1, 1400);
 		}
-		return oe(I), ue(() => w.url, I), ae(() => {
-			J(), clearTimeout($);
-		}), (e, t) => (y(), p("div", pe, [T.value === "loading" ? (y(), p("p", me, "正在解压…")) : T.value === "error" ? (y(), p("div", he, [m("p", null, x(E.value), 1), m("button", {
+		return oe(R), ue(() => E.url, R), ae(() => {
+			J++, X(), clearTimeout($);
+		}), (e, t) => (x(), h("div", pe, [D.value === "loading" ? (x(), h("p", me, "正在解压…")) : D.value === "error" ? (x(), h("div", he, [g("p", null, C(O.value), 1), g("button", {
 			type: "button",
 			class: "zip__retry",
-			onClick: I
-		}, "重试")])) : L.value ? (y(), p(l, { key: 2 }, [m("div", ge, [
-			m("button", {
+			onClick: R
+		}, "重试")])) : z.value ? (x(), h(d, { key: 2 }, [g("div", ge, [
+			g("button", {
 				type: "button",
 				class: "zip__back",
 				title: "返回列表",
-				onClick: Ue
-			}, [h(o, {
+				onClick: qe
+			}, [_(o, {
 				name: "arrowLeft",
 				size: 16
 			})]),
-			m("span", {
+			g("span", {
 				class: "zip__path",
-				title: L.value.path
-			}, x(L.value.path), 9, _e),
-			m("span", ve, x(S(a)(L.value.size)), 1),
-			ze.value ? (y(), p("div", ye, [m("button", {
+				title: z.value.path
+			}, C(z.value.path), 9, _e),
+			g("span", ve, C(w(a)(z.value.size)), 1),
+			Ve.value ? (x(), h("div", ye, [g("button", {
 				type: "button",
-				class: v(["zip__vbtn", { "zip__vbtn--on": U.value === "render" }]),
+				class: b(["zip__vbtn", { "zip__vbtn--on": K.value === "render" }]),
 				title: "渲染",
-				onClick: t[0] ||= (e) => U.value = "render"
-			}, [h(o, {
+				onClick: t[0] ||= (e) => K.value = "render"
+			}, [_(o, {
 				name: "eye",
 				size: 14
-			})], 2), m("button", {
+			})], 2), g("button", {
 				type: "button",
-				class: v(["zip__vbtn", { "zip__vbtn--on": U.value === "source" }]),
+				class: b(["zip__vbtn", { "zip__vbtn--on": K.value === "source" }]),
 				title: "源码",
-				onClick: t[1] ||= (e) => U.value = "source"
-			}, [h(o, {
+				onClick: t[1] ||= (e) => K.value = "source"
+			}, [_(o, {
 				name: "code",
 				size: 14
-			})], 2)])) : f("", !0),
-			B.value && R.value === "ready" ? (y(), p("button", {
+			})], 2)])) : m("", !0),
+			H.value && B.value === "ready" ? (x(), h("button", {
 				key: 1,
 				type: "button",
 				class: "zip__act",
 				title: Q.value ? "已复制" : "复制",
-				onClick: Ge
-			}, [h(o, {
+				onClick: Ye
+			}, [_(o, {
 				name: "copy",
 				size: 14
-			})], 8, be)) : f("", !0),
-			m("button", {
+			})], 8, be)) : m("", !0),
+			g("button", {
 				type: "button",
 				class: "zip__act",
 				title: "下载",
-				onClick: t[2] ||= (e) => We(L.value)
-			}, [h(o, {
+				onClick: t[2] ||= (e) => Je(z.value)
+			}, [_(o, {
 				name: "download",
 				size: 15
 			})])
-		]), R.value === "loading" ? (y(), p("p", xe, "读取中…")) : R.value === "error" ? (y(), p("div", Se, [m("p", null, x(z.value), 1)])) : H.value ? (y(), d(S(C), {
+		]), B.value === "loading" ? (x(), h("p", xe, "读取中…")) : B.value === "error" ? (x(), h("div", Se, [g("p", null, C(V.value), 1)])) : G.value ? (x(), p(w(T), {
 			key: 2,
-			slices: G.value,
-			start: K.value,
-			name: q.value,
-			size: Re.value
+			slices: Y.value,
+			start: Re.value,
+			name: ze.value,
+			size: Be.value
 		}, null, 8, [
 			"slices",
 			"start",
 			"name",
 			"size"
-		])) : V.value ? (y(), d(S(Ne), {
+		])) : U.value ? (x(), p(w(Ne), {
 			key: 3,
-			file: V.value,
-			mode: U.value,
-			onLoaded: t[3] ||= (e) => B.value = e
-		}, null, 8, ["file", "mode"])) : f("", !0)], 64)) : (y(), p(l, { key: 3 }, [
-			m("div", Ce, x(Fe.value) + " 个文件 · " + x(S(a)(Ie.value)), 1),
-			Pe.value ? (y(), p("div", {
+			file: U.value,
+			mode: K.value,
+			"html-preview": W.value || void 0,
+			onLoaded: t[3] ||= (e) => H.value = e
+		}, null, 8, [
+			"file",
+			"mode",
+			"html-preview"
+		])) : m("", !0)], 64)) : (x(), h(d, { key: 3 }, [
+			g("div", Ce, C(Fe.value) + " 个文件 · " + C(w(a)(Ie.value)), 1),
+			Pe.value ? (x(), h("div", {
 				key: 0,
-				class: v(["zip__pw", { "zip__pw--ok": j.value }])
+				class: b(["zip__pw", { "zip__pw--ok": N.value }])
 			}, [
-				h(o, {
+				_(o, {
 					name: "key",
 					size: 14
 				}),
-				de(m("input", {
-					"onUpdate:modelValue": t[4] ||= (e) => k.value = e,
+				de(g("input", {
+					"onUpdate:modelValue": t[4] ||= (e) => j.value = e,
 					type: "password",
 					class: "zip__pwinput",
-					placeholder: j.value ? "已解锁（如需可重新输入）" : "此压缩包已加密，输入密码解锁",
-					onKeyup: fe(Z, ["enter"])
-				}, null, 40, we), [[le, k.value]]),
-				m("button", {
+					placeholder: N.value ? "已解锁（如需可重新输入）" : "此压缩包已加密，输入密码解锁",
+					onKeyup: fe(Ge, ["enter"])
+				}, null, 40, we), [[le, j.value]]),
+				g("button", {
 					type: "button",
 					class: "zip__pwbtn",
-					onClick: Z
-				}, x(j.value ? "已解锁" : "解锁"), 1),
-				A.value ? (y(), p("span", Te, x(A.value), 1)) : f("", !0)
-			], 2)) : f("", !0),
-			m("div", Ee, [F.value.length === 0 ? (y(), p("p", De, "空压缩包")) : f("", !0), (y(!0), p(l, null, ce(F.value, (e) => (y(), p("button", {
+					onClick: Ge
+				}, C(N.value ? "已解锁" : "解锁"), 1),
+				M.value ? (x(), h("span", Te, C(M.value), 1)) : m("", !0)
+			], 2)) : m("", !0),
+			g("div", Ee, [L.value.length === 0 ? (x(), h("p", De, "空压缩包")) : m("", !0), (x(!0), h(d, null, ce(L.value, (e) => (x(), h("button", {
 				key: e.node.path,
 				type: "button",
-				class: v(["zip__row", { "zip__row--dir": e.node.isDir }]),
+				class: b(["zip__row", { "zip__row--dir": e.node.isDir }]),
 				style: ie({ paddingLeft: `${12 + e.depth * 14}px` }),
-				onClick: (t) => He(e.node)
+				onClick: (t) => Ke(e.node)
 			}, [
-				m("span", ke, [e.node.isDir ? (y(), d(o, {
+				g("span", ke, [e.node.isDir ? (x(), p(o, {
 					key: 0,
 					name: "chevronRight",
 					size: 13,
-					class: v({ "zip__twisty--open": N.has(e.node.path) })
-				}, null, 8, ["class"])) : f("", !0)]),
-				m("span", Ae, [h(o, {
+					class: b({ "zip__twisty--open": F.has(e.node.path) })
+				}, null, 8, ["class"])) : m("", !0)]),
+				g("span", Ae, [_(o, {
 					name: e.node.isDir ? "folder" : "fileOutline",
 					size: 15
 				}, null, 8, ["name"])]),
-				m("span", je, x(e.node.name), 1),
-				e.node.entry?.encrypted ? (y(), d(o, {
+				g("span", je, C(e.node.name), 1),
+				e.node.entry?.encrypted ? (x(), p(o, {
 					key: 0,
 					name: "key",
 					size: 12,
 					class: "zip__rowlock",
 					title: "已加密"
-				})) : f("", !0),
-				e.node.isDir ? f("", !0) : (y(), p("span", Me, x(S(a)(e.node.size)), 1))
+				})) : m("", !0),
+				e.node.isDir ? m("", !0) : (x(), h("span", Me, C(w(a)(e.node.size)), 1))
 			], 14, Oe))), 128))])
 		], 64))]));
 	}
 });
 //#endregion
-export { C as default };
+export { T as default };

package/dist/composables/useElementNavigation.d.ts

@@ -0,0 +1,21 @@
+import { type ShallowRef } from 'vue';
+export interface ElementNavigationItem {
+    id: string;
+    title: string;
+    level: number;
+    target: HTMLElement;
+}
+/**
+ * Scroll-spy + in-container navigation for DOM-backed document viewers.
+ *
+ * The rendered document remains the only source of scroll state. Navigation entries retain their target
+ * elements, while this composable exposes readonly-by-convention refs and explicit mutation actions.
+ */
+export declare function useElementNavigation(scrollRoot: Readonly<ShallowRef<HTMLElement | null>>): {
+    outlineItems: ShallowRef<ElementNavigationItem[], ElementNavigationItem[]>;
+    pageItems: ShallowRef<ElementNavigationItem[], ElementNavigationItem[]>;
+    activeOutlineId: ShallowRef<string, string>;
+    activePageId: ShallowRef<string, string>;
+    setItems: (outline: readonly ElementNavigationItem[], pages: readonly ElementNavigationItem[]) => void;
+    navigate: (item: ElementNavigationItem) => void;
+};

package/dist/composables/useElementNavigation.js

@@ -0,0 +1,61 @@
+import { onBeforeUnmount as e, shallowRef as t, watch as n } from "vue";
+//#region src/composables/useElementNavigation.ts
+function r(r) {
+	let i = t([]), a = t([]), o = t(""), s = t(""), c = 0, l = null;
+	function u(e, t) {
+		if (!e.length) return;
+		let n = e[0];
+		for (let r of e) {
+			if (r.target.getBoundingClientRect().top > t) break;
+			n = r;
+		}
+		return n;
+	}
+	function d() {
+		c = 0;
+		let e = r.value;
+		if (!e) return;
+		let t = e.getBoundingClientRect().top + 32;
+		o.value = u(i.value, t)?.id ?? "", s.value = u(a.value, t)?.id ?? "";
+	}
+	function f() {
+		if (!c) {
+			if (typeof requestAnimationFrame > "u") {
+				d();
+				return;
+			}
+			c = requestAnimationFrame(d);
+		}
+	}
+	function p(e) {
+		l?.removeEventListener("scroll", f), l = e, l?.addEventListener("scroll", f, { passive: !0 }), f();
+	}
+	let m = n(r, p, {
+		immediate: !0,
+		flush: "post"
+	});
+	function h(e, t) {
+		i.value = [...e], a.value = [...t], o.value = e[0]?.id ?? "", s.value = t[0]?.id ?? "", f();
+	}
+	function g(e) {
+		let t = r.value;
+		if (!t) return;
+		let n = t.getBoundingClientRect().top, i = e.target.getBoundingClientRect().top;
+		t.scrollTo({
+			top: t.scrollTop + i - n - 18,
+			behavior: "smooth"
+		});
+	}
+	return e(() => {
+		m(), l?.removeEventListener("scroll", f), c && typeof cancelAnimationFrame < "u" && cancelAnimationFrame(c);
+	}), {
+		outlineItems: i,
+		pageItems: a,
+		activeOutlineId: o,
+		activePageId: s,
+		setItems: h,
+		navigate: g
+	};
+}
+//#endregion
+export { r as useElementNavigation };

package/dist/lib/archiveHtml.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Build a renderable HTML document from one entry inside an archive.
+ *
+ * A selected ZIP entry normally gets a single `blob:` URL. That is enough for the HTML bytes themselves, but
+ * relative references such as `./assets/app.js` and `./styles/site.css` have nowhere to resolve: blob URLs have
+ * no archive directory behind them. This module treats the archive's flat entry list as a tiny read-only web
+ * root, extracts only resources referenced by the selected document, and rewrites those references to `data:`
+ * URLs before the document reaches FileViewerBody's sandboxed iframe.
+ *
+ * `data:` is deliberate rather than `blob:`. FileViewerBody's opt-in interactive iframe uses `allow-scripts`
+ * WITHOUT `allow-same-origin`, giving it an opaque origin. Chromium correctly refuses subresource blob URLs
+ * minted by the parent from that opaque frame, while data URLs remain loadable. Scripts therefore still run
+ * only after the existing explicit opt-in, but both inert CSS/image preview and interactive JS work reliably.
+ */
+export interface ArchiveHtmlEntry {
+    path: string;
+    name: string;
+    size: number;
+    isDir: boolean;
+}
+export interface ArchiveHtmlPreviewOptions<T extends ArchiveHtmlEntry> {
+    html: string;
+    documentPath: string;
+    entries: readonly T[];
+    loadEntry: (entry: T) => Uint8Array | Promise<Uint8Array>;
+    /** Maximum number of distinct dependency entries automatically extracted. */
+    maxResources?: number;
+    /** Maximum declared/decoded bytes across automatically extracted dependencies. */
+    maxTotalBytes?: number;
+    /** Maximum declared/decoded bytes for one dependency. */
+    maxEntryBytes?: number;
+}
+export interface ArchiveHtmlPreview {
+    html: string;
+    loadedResources: number;
+    skippedResources: number;
+}
+export declare function createArchiveEntryResolver<T extends ArchiveHtmlEntry>(entries: readonly T[]): (ref: string, basePath: string) => T | undefined;
+/** Rewrite CSS `@import` and `url(...)` references through an async archive resource resolver. */
+export declare function rewriteArchiveCssReferences(css: string, resolve: (ref: string, kind: 'css' | 'raw') => string | null | Promise<string | null>): Promise<string>;
+/** Best-effort rewrite for static/dynamic ESM imports and `new URL(x, import.meta.url)` assets. */
+export declare function rewriteArchiveModuleReferences(source: string, resolve: (ref: string, kind: 'module' | 'raw') => string | null | Promise<string | null>): Promise<string>;
+/** Resolve bare ESM specifiers against inline import maps while paths still refer to archive entries. */
+export declare function createArchiveImportMapResolver(sources: readonly string[], documentPath: string): (specifier: string, referrerPath: string) => string | null | undefined;
+/**
+ * Resolve one archive HTML entry plus its reachable dependencies into a complete iframe document.
+ * Browser-only: DOMParser parses inertly; it neither executes scripts nor fetches the original references.
+ */
+export declare function buildArchiveHtmlPreview<T extends ArchiveHtmlEntry>(options: ArchiveHtmlPreviewOptions<T>): Promise<ArchiveHtmlPreview>;