@l1yp/file-viewer 0.1.0

package/dist/components/CodeView.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,180 @@
+import { fileExt as e } from "../lib/fileType.js";
+import { escapeHtml as t, highlightCode as n, highlightLines as ee } from "../lib/highlight.js";
+import { computeFoldRegions as te } from "../lib/codefold.js";
+import { canFormat as ne, formatCode as r } from "../lib/codeformat.js";
+import { langLabel as re, searchLangs as ie } from "../lib/highlightLangs.js";
+import i from "./icons/Icon.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, onBeforeUnmount as m, openBlock as h, reactive as ae, ref as g, renderList as _, toDisplayString as v, unref as oe, vModelText as se, watch as y, withDirectives as ce } from "vue";
+//#region src/components/CodeView.vue?vue&type=script&setup=true&lang.ts
+var le = { class: "cv" }, ue = { class: "cv__tools" }, de = ["aria-expanded"], fe = {
+	key: 0,
+	class: "cv__langpop",
+	role: "menu"
+}, pe = { class: "cv__langlist" }, me = ["aria-checked"], he = ["aria-checked", "onClick"], ge = { class: "cv__langitem-label" }, _e = {
+	key: 1,
+	class: "cv__langempty"
+}, ve = ["disabled", "title"], ye = {
+	key: 0,
+	class: "cv__scroll cv__scroll--blob"
+}, b = { class: "cv__codewrap" }, x = {
+	class: "cv__gutter",
+	"aria-hidden": "true"
+}, S = { class: "cv__codecol" }, C = { class: "cv__pre" }, w = ["innerHTML"], T = {
+	key: 1,
+	class: "cv__scroll"
+}, E = { class: "cv__rows" }, D = { class: "cv__gut" }, O = ["title", "onClick"], k = {
+	key: 1,
+	class: "cv__fold cv__fold--empty"
+}, A = { class: "cv__ln" }, j = ["innerHTML"], M = ["title", "onClick"], N = 4e3, P = /*@__PURE__*/ f({
+	__name: "CodeView",
+	props: {
+		code: {},
+		lang: {},
+		name: {}
+	},
+	setup(f) {
+		let P = f, F = g(null), I = o(() => F.value ?? P.lang), L = g(null), R = g(!1), z = g(!1), B = o(() => L.value ?? P.code), V = o(() => e(P.name ?? "")), be = o(() => ne(V.value, I.value)), xe = o(() => B.value.split("\n")), H = o(() => xe.value.length), Se = o(() => H.value <= N), Ce = o(() => ee(B.value, I.value)), U = o(() => te(B.value)), W = ae(/* @__PURE__ */ new Set());
+		y(() => [P.code, P.lang], () => {
+			L.value = null, z.value = !1, F.value = null;
+		}), y(B, () => W.clear());
+		let G = g(!1), K = g(null), q = g(""), J = o(() => ie(q.value));
+		function Y(e) {
+			F.value = e, G.value = !1, q.value = "";
+		}
+		function X(e) {
+			K.value && !K.value.contains(e.target) && (G.value = !1);
+		}
+		function Z(e) {
+			e.key === "Escape" && (G.value = !1);
+		}
+		y(G, (e) => {
+			typeof document > "u" || (e ? (document.addEventListener("click", X), document.addEventListener("keydown", Z)) : (document.removeEventListener("click", X), document.removeEventListener("keydown", Z)));
+		}), m(() => {
+			typeof document > "u" || (document.removeEventListener("click", X), document.removeEventListener("keydown", Z));
+		});
+		let Q;
+		async function we() {
+			if (L.value != null) {
+				L.value = null;
+				return;
+			}
+			if (!R.value) {
+				R.value = !0, z.value = !1;
+				try {
+					L.value = await r(P.code, {
+						ext: V.value,
+						lang: I.value
+					});
+				} catch {
+					z.value = !0, clearTimeout(Q), Q = setTimeout(() => z.value = !1, 2200);
+				} finally {
+					R.value = !1;
+				}
+			}
+		}
+		let Te = o(() => {
+			let e = [], t = H.value, n = 0;
+			for (; n < t;) {
+				e.push(n);
+				let t = W.has(n) ? U.value.get(n) : void 0;
+				n = t == null ? n + 1 : t + 1;
+			}
+			return e;
+		});
+		function $(e) {
+			W.has(e) ? W.delete(e) : W.add(e);
+		}
+		let Ee = o(() => I.value ? n(B.value, I.value) : t(B.value)), De = o(() => Array.from({ length: H.value }, (e, t) => t + 1).join("\n"));
+		return (e, t) => (h(), l("div", le, [u("div", ue, [u("div", {
+			ref_key: "langMenuRef",
+			ref: K,
+			class: "cv__lang"
+		}, [u("button", {
+			type: "button",
+			class: p(["cv__toolbtn", { "cv__toolbtn--on": G.value }]),
+			title: "高亮语言 —— 选择用哪种语言着色（自动识别不准时手动指定）",
+			"aria-haspopup": !0,
+			"aria-expanded": G.value,
+			onClick: t[0] ||= (e) => G.value = !G.value
+		}, [d(i, {
+			name: "code",
+			size: 12
+		}), u("span", null, v(oe(re)(I.value)), 1)], 10, de), G.value ? (h(), l("div", fe, [ce(u("input", {
+			"onUpdate:modelValue": t[1] ||= (e) => q.value = e,
+			class: "cv__langsearch",
+			type: "text",
+			placeholder: "搜索语言…",
+			spellcheck: "false",
+			autocomplete: "off"
+		}, null, 512), [[se, q.value]]), u("div", pe, [
+			q.value ? c("", !0) : (h(), l("button", {
+				key: 0,
+				type: "button",
+				class: p(["cv__langitem", { "cv__langitem--on": I.value === "" }]),
+				role: "menuitemradio",
+				"aria-checked": I.value === "",
+				onClick: t[2] ||= (e) => Y("")
+			}, [t[3] ||= u("span", { class: "cv__langitem-label" }, "纯文本（无高亮）", -1), I.value === "" ? (h(), s(i, {
+				key: 0,
+				name: "check",
+				size: 14,
+				class: "cv__langitem-check"
+			})) : c("", !0)], 10, me)),
+			(h(!0), l(a, null, _(J.value, (e) => (h(), l("button", {
+				key: e.id,
+				type: "button",
+				class: p(["cv__langitem", { "cv__langitem--on": I.value === e.id }]),
+				role: "menuitemradio",
+				"aria-checked": I.value === e.id,
+				onClick: (t) => Y(e.id)
+			}, [u("span", ge, v(e.label), 1), I.value === e.id ? (h(), s(i, {
+				key: 0,
+				name: "check",
+				size: 14,
+				class: "cv__langitem-check"
+			})) : c("", !0)], 10, he))), 128)),
+			q.value && !J.value.length ? (h(), l("p", _e, "无匹配语言")) : c("", !0)
+		])])) : c("", !0)], 512), be.value ? (h(), l("button", {
+			key: 0,
+			type: "button",
+			class: p(["cv__toolbtn cv__fmt", {
+				"cv__toolbtn--on": L.value != null,
+				"cv__fmt--err": z.value
+			}]),
+			disabled: R.value,
+			title: z.value ? "格式化失败：源码可能无法解析" : L.value == null ? "用 Prettier 格式化" : "还原为原始格式",
+			onClick: we
+		}, v(z.value ? "格式化失败" : R.value ? "格式化中…" : L.value == null ? "格式化" : "还原"), 11, ve)) : c("", !0)]), Se.value ? (h(), l("div", T, [u("div", E, [(h(!0), l(a, null, _(Te.value, (e) => (h(), l("div", {
+			key: e,
+			class: "cv__row"
+		}, [
+			u("span", D, [U.value.has(e) ? (h(), l("button", {
+				key: 0,
+				type: "button",
+				class: "cv__fold",
+				title: W.has(e) ? "展开" : "折叠",
+				onClick: (t) => $(e)
+			}, [d(i, {
+				name: "chevronRight",
+				size: 12,
+				class: p({ "cv__fold--open": !W.has(e) })
+			}, null, 8, ["class"])], 8, O)) : (h(), l("span", k)), u("span", A, v(e + 1), 1)]),
+			u("code", {
+				class: "cv__code hljs",
+				innerHTML: Ce.value[e]
+			}, null, 8, j),
+			W.has(e) ? (h(), l("button", {
+				key: 0,
+				type: "button",
+				class: "cv__ellipsis",
+				title: `展开折叠的 ${(U.value.get(e) ?? e) - e} 行`,
+				onClick: (t) => $(e)
+			}, " ⋯ ", 8, M)) : c("", !0)
+		]))), 128))])])) : (h(), l("div", ye, [u("div", b, [u("pre", x, v(De.value), 1), u("div", S, [u("pre", C, [u("code", {
+			class: "hljs",
+			innerHTML: Ee.value
+		}, null, 8, w)])])])]))]));
+	}
+});
+//#endregion
+export { P as default };

package/dist/components/CsvViewer.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./CsvViewer.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                          */
+//#region src/components/CsvViewer.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-19d40e74"]]);
+//#endregion
+export { n as default };

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

@@ -0,0 +1,26 @@
+/**
+ * Side-viewer CSV / TSV table. Consumes the text the panel already fetched (CSV is plain text — no second
+ * download, same as the subtitle / geo viewers) and parses it with the hand-rolled RFC 4180 parser
+ * (see lib/csv.ts: quoted fields, doubled-quote escaping, embedded delimiters/newlines, delimiter sniffing).
+ *
+ * The first row can be treated as a header (toggle). Cell text is rendered via mustache, so Vue escapes it —
+ * a cell containing `<script>` or other markup is shown literally, never executed. Only small CSVs reach here
+ * (larger ones stream through the log viewer, see isCsvFile / isLogFile); even so the body is capped at the
+ * first {@link RENDER_CAP} rows until you ask for all, so a dense file doesn't paint tens of thousands of
+ * cells up front.
+ *
+ * Three affordances on top of the plain table:
+ *  - hover a cell (delegated `mouseover` on the scroll box) and, after a short intent delay, a floating popover
+ *    shows the cell's full text — the table cells clip with ellipsis, the popover doesn't;
+ *  - the popover is reachable: it overlaps the cell's bottom edge and cancels its own hide timer on enter, so you
+ *    can move the mouse in to select text or hit 「复制」 (writes the exact cell string to the clipboard);
+ *  - drag the thin handle on a column header's right edge to resize that column. Widths default to a cheap
+ *    content-based estimate ({@link autoWidths}); a fixed table layout makes the drag pixel-exact.
+ */
+type __VLS_Props = {
+    text: string;
+    name: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/CsvViewer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,187 @@
+import { fileExt as e } from "../lib/fileType.js";
+import { parseCsv as t } from "../lib/csv.js";
+import { Fragment as n, Teleport as r, computed as i, createBlock as ee, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as te, openBlock as f, ref as p, renderList as m, toDisplayString as h, vModelCheckbox as g, watch as _, withDirectives as v, withModifiers as y } from "vue";
+//#region src/components/CsvViewer.vue?vue&type=script&setup=true&lang.ts
+var b = { class: "csv" }, x = { class: "csv__bar" }, ne = { class: "csv__count" }, re = { class: "csv__delim" }, ie = { class: "csv__toggle" }, ae = { class: "csv__th-text" }, oe = ["onMousedown"], se = { class: "csv__rownum" }, ce = {
+	key: 1,
+	class: "csv__empty"
+}, le = {
+	key: 2,
+	class: "csv__capnote"
+}, ue = { class: "csv-pop__text" }, de = { class: "csv-pop__foot" }, S = 1e3, fe = 48, C = 56, pe = 360, me = 120, he = 7, ge = 130, _e = 160, w = /*@__PURE__*/ l({
+	__name: "CsvViewer",
+	props: {
+		text: {},
+		name: {}
+	},
+	setup(l) {
+		let w = l, T = i(() => t(w.text, e(w.name))), E = p(!0), D = p(!1), O = i(() => {
+			switch (T.value.delimiter) {
+				case "	": return "Tab";
+				case ";": return "分号";
+				case "|": return "竖线";
+				default: return "逗号";
+			}
+		}), k = i(() => Array.from({ length: T.value.cols }, (e, t) => t)), A = i(() => k.value.map((e) => E.value ? T.value.rows[0]?.[e] ?? "" : P(e))), j = i(() => E.value ? T.value.rows.slice(1) : T.value.rows), M = i(() => D.value ? j.value : j.value.slice(0, S)), N = i(() => !D.value && j.value.length > S);
+		function P(e) {
+			let t = "", n = e;
+			do
+				t = String.fromCharCode(65 + n % 26) + t, n = Math.floor(n / 26) - 1;
+			while (n >= 0);
+			return t;
+		}
+		function F(e) {
+			return E.value ? e + 2 : e + 1;
+		}
+		function I(e) {
+			let t = 0;
+			for (let n = 0; n < e.length; n++) {
+				let r = e.charCodeAt(n);
+				t += r >= 4352 && r <= 4447 || r >= 11904 && r <= 42191 || r >= 44032 && r <= 55203 || r >= 63744 && r <= 64255 || r >= 65280 && r <= 65376 || r >= 65504 && r <= 65510 ? 2 : 1;
+			}
+			return t;
+		}
+		let ve = i(() => {
+			let e = T.value.cols, t = T.value.rows, n = Array.from({ length: e }).fill(C), r = Math.min(t.length, me);
+			for (let i = 0; i < r; i++) {
+				let r = t[i];
+				if (r) for (let t = 0; t < e; t++) {
+					let e = r[t];
+					if (!e) continue;
+					let i = Math.min(pe, Math.max(C, I(e) * he + 22));
+					i > n[t] && (n[t] = i);
+				}
+			}
+			return n;
+		}), L = p([]);
+		_(() => w.text, () => {
+			L.value = Array.from({ length: T.value.cols }).fill(null);
+		}, { immediate: !0 });
+		let R = i(() => k.value.map((e) => L.value[e] ?? ve.value[e] ?? C)), z = i(() => {
+			let e = String(Math.max(1, T.value.rows.length)).length;
+			return Math.max(46, 20 + e * 8);
+		}), ye = i(() => z.value + R.value.reduce((e, t) => e + t, 0)), B = p(!1), V = -1, H = 0, U = 0;
+		function be(e, t) {
+			V = e, H = t.clientX, U = R.value[e], B.value = !0, $(), window.addEventListener("mousemove", W), window.addEventListener("mouseup", G), document.body.style.userSelect = "none", document.body.style.cursor = "col-resize";
+		}
+		function W(e) {
+			V < 0 || (L.value[V] = Math.max(fe, Math.round(U + (e.clientX - H))));
+		}
+		function G() {
+			V = -1, B.value = !1, window.removeEventListener("mousemove", W), window.removeEventListener("mouseup", G), document.body.style.userSelect = "", document.body.style.cursor = "";
+		}
+		let K = p(null), q = p(!1), J, Y, X = null;
+		function Z(e, t) {
+			let n = e.getBoundingClientRect(), r = n.left;
+			r + 440 > window.innerWidth - 8 && (r = Math.max(8, window.innerWidth - 8 - 440)), K.value = {
+				text: t,
+				left: r,
+				top: n.bottom - 1
+			}, q.value = !1;
+		}
+		function xe(e) {
+			let t = e.querySelector(".csv__th-text") ?? e;
+			return t.scrollWidth - t.clientWidth > 1 || t.scrollHeight - t.clientHeight > 1;
+		}
+		function Se(e) {
+			if (B.value) return;
+			let t = e.target.closest(".csv__cell");
+			if (!t || t === X) return;
+			X = t, J &&= (clearTimeout(J), void 0);
+			let n = t.textContent ?? "";
+			if (!n || !xe(t)) {
+				Q();
+				return;
+			}
+			Y &&= (clearTimeout(Y), void 0), K.value ? Z(t, n) : J = setTimeout(() => Z(t, n), ge);
+		}
+		function Q() {
+			J &&= (clearTimeout(J), void 0), Y && clearTimeout(Y), Y = setTimeout(() => {
+				K.value = null, X = null, Y = void 0;
+			}, _e);
+		}
+		function Ce() {
+			Y &&= (clearTimeout(Y), void 0);
+		}
+		function $() {
+			J &&= (clearTimeout(J), void 0), Y &&= (clearTimeout(Y), void 0), K.value = null, X = null;
+		}
+		async function we() {
+			if (K.value) try {
+				await navigator.clipboard.writeText(K.value.text), q.value = !0;
+			} catch {
+				q.value = !1;
+			}
+		}
+		return te(() => {
+			$(), G();
+		}), (e, t) => (f(), o("div", b, [
+			s("div", x, [
+				s("span", ne, h(T.value.rows.length) + " 行 · " + h(T.value.cols) + " 列", 1),
+				s("span", re, "分隔符：" + h(O.value), 1),
+				s("label", ie, [v(s("input", {
+					"onUpdate:modelValue": t[0] ||= (e) => E.value = e,
+					type: "checkbox"
+				}, null, 512), [[g, E.value]]), t[2] ||= c(" 首行为表头 ", -1)]),
+				t[3] ||= s("span", { class: "csv__spacer" }, null, -1),
+				N.value ? (f(), o("button", {
+					key: 0,
+					type: "button",
+					class: "csv__more",
+					onClick: t[1] ||= (e) => D.value = !0
+				}, " 显示全部 " + h(j.value.length) + " 行 ", 1)) : a("", !0)
+			]),
+			s("div", {
+				class: "csv__scroll",
+				onMouseover: Se,
+				onMouseleave: Q
+			}, [T.value.rows.length ? (f(), o("table", {
+				key: 0,
+				class: "csv__table",
+				style: d({ width: ye.value + "px" })
+			}, [
+				s("colgroup", null, [s("col", { style: d({ width: z.value + "px" }) }, null, 4), (f(!0), o(n, null, m(k.value, (e) => (f(), o("col", {
+					key: e,
+					style: d({ width: R.value[e] + "px" })
+				}, null, 4))), 128))]),
+				s("thead", null, [s("tr", null, [t[4] ||= s("th", {
+					class: "csv__rownum csv__corner",
+					"aria-hidden": "true"
+				}, null, -1), (f(!0), o(n, null, m(k.value, (e) => (f(), o("th", {
+					key: e,
+					class: u(["csv__th", {
+						csv__cell: E.value,
+						"csv__th--auto": !E.value
+					}])
+				}, [s("span", ae, h(A.value[e]), 1), s("span", {
+					class: "csv__resize",
+					title: "拖动调整列宽",
+					onMousedown: y((t) => be(e, t), ["prevent", "stop"])
+				}, null, 40, oe)], 2))), 128))])]),
+				s("tbody", null, [(f(!0), o(n, null, m(M.value, (e, t) => (f(), o("tr", {
+					key: t,
+					class: "csv__tr"
+				}, [s("td", se, h(F(t)), 1), (f(!0), o(n, null, m(k.value, (t) => (f(), o("td", {
+					key: t,
+					class: "csv__td csv__cell"
+				}, h(e[t] ?? ""), 1))), 128))]))), 128))])
+			], 4)) : (f(), o("p", ce, "空文件")), N.value ? (f(), o("p", le, " 已显示前 " + h(S) + " 行，共 " + h(j.value.length) + " 行 —— 点上方「显示全部」加载其余。 ", 1)) : a("", !0)], 32),
+			(f(), ee(r, { to: "body" }, [K.value ? (f(), o("div", {
+				key: 0,
+				class: "csv-pop",
+				style: d({
+					left: K.value.left + "px",
+					top: K.value.top + "px"
+				}),
+				onMouseenter: Ce,
+				onMouseleave: Q
+			}, [s("div", ue, h(K.value.text), 1), s("div", de, [s("button", {
+				type: "button",
+				class: "csv-pop__copy",
+				onClick: we
+			}, h(q.value ? "已复制" : "复制"), 1)])], 36)) : a("", !0)]))
+		]));
+	}
+});
+//#endregion
+export { w as default };

package/dist/components/DicomViewer.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./DicomViewer.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                            */
+//#region src/components/DicomViewer.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-36f5a4c5"]]);
+//#endregion
+export { n as default };

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

@@ -0,0 +1,30 @@
+import { type DicomSlice } from '@/lib/dicom';
+/**
+ * The side viewer's DICOM (.dcm) mode: fetch a medical image's bytes, parse + decode it entirely in-browser
+ * (see lib/dicom.ts → lib/dicomCodecs.ts → lib/dicomRender.ts), and draw it to a canvas with the controls a
+ * basic medical viewer needs:
+ *   - window/level (brightness/contrast): left-drag on the image — horizontal = width, vertical = center.
+ *   - frames: a slider for multi-frame series (each frame decoded on demand).
+ *   - invert / zoom (wheel or buttons) / fit / reset.
+ * Grayscale (CT/MR/X-ray — MONOCHROME1/2) is the primary path; RGB and palette-colour images render too.
+ * The bytes come from the same download endpoint as any other file and never leave the browser.
+ *
+ * Two frame sources, unified behind {@link framePixelsAt}:
+ *   • single file (`url`) — frames come from that one file (multi-frame DICOM, e.g. enhanced CT / US cine);
+ *   • series stack (`slices`) — a list of independent single-frame DICOM files browsed as one scrollable
+ *     series (the classic "one folder = one series, one file per slice" hospital export). The wheel/cine
+ *     then steps through *files*. Decoded frames are cached + background-prefetched either way.
+ */
+type __VLS_Props = {
+    url?: string;
+    name: string;
+    /** Single-file: that file's size. Stack: the whole series' total bytes (just for the info strip). */
+    size?: number;
+    /** Series-stack mode: independent DICOM files browsed as one series. Takes precedence over `url`. */
+    slices?: DicomSlice[];
+    /** Initial slice index in stack mode (the file the user actually clicked). */
+    start?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;