@virtualansoftware/vs-office-viewer 1.0.1 → 1.0.2

package/dist/server/assets/routes-DT9ZAw-E.js

@@ -0,0 +1,481 @@
+import { t as LogoIcon } from "./LogoIcon-D2qIWtkU.js";
+import { Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, ChevronDown, FileText, FileWarning, Loader2, Presentation, Sheet, UploadCloud, X } from "lucide-react";
+//#region src/components/FileDropzone.tsx
+function FileDropzone({ onFile, config }) {
+	const inputRef = useRef(null);
+	const [dragging, setDragging] = useState(false);
+	const [wrongType, setWrongType] = useState(false);
+	const handleFiles = useCallback((files) => {
+		const file = files?.[0];
+		if (!file) return;
+		const ext = "." + (file.name.split(".").pop()?.toLowerCase() ?? "");
+		if (!config.accept.split(",").map((s) => s.trim()).includes(ext)) {
+			setWrongType(true);
+			setTimeout(() => setWrongType(false), 3e3);
+			return;
+		}
+		onFile(file);
+	}, [onFile, config.accept]);
+	const { icon: Icon, iconStyle, heading, description, dropHint, subtitle } = config;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto flex w-full max-w-2xl flex-col items-center px-6",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "mb-8",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex h-18 w-18 items-center justify-center rounded-2xl",
+					style: iconStyle,
+					children: /* @__PURE__ */ jsx(Icon, {
+						className: "h-9 w-9 text-white",
+						strokeWidth: 1.5
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("h1", {
+				className: "text-center text-3xl font-bold tracking-tight text-foreground sm:text-4xl",
+				children: heading
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-3 max-w-md text-center text-muted-foreground",
+				children: description
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => inputRef.current?.click(),
+				onDragOver: (e) => {
+					e.preventDefault();
+					setDragging(true);
+				},
+				onDragLeave: () => setDragging(false),
+				onDrop: (e) => {
+					e.preventDefault();
+					setDragging(false);
+					handleFiles(e.dataTransfer.files);
+				},
+				className: `mt-10 flex w-full flex-col items-center justify-center gap-4 rounded-2xl border-2 border-dashed px-8 py-16 text-center transition-colors ${wrongType ? "border-red-300 bg-red-50/70" : dragging ? "border-primary bg-accent" : "border-page-border bg-page hover:border-primary/50"}`,
+				children: [wrongType ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AlertCircle, { className: "h-10 w-10 text-red-400" }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "font-medium text-red-600",
+					children: "Wrong file type"
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "mt-1 text-sm text-red-400",
+					children: [
+						"This section only accepts ",
+						config.accept,
+						" files"
+					]
+				})] })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(UploadCloud, { className: "h-10 w-10 text-muted-foreground" }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+					className: "font-medium text-foreground",
+					children: dropHint
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-1 text-sm text-muted-foreground",
+					children: subtitle
+				})] })] }), /* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					type: "file",
+					accept: config.accept,
+					className: "hidden",
+					onChange: (e) => handleFiles(e.target.files)
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/routes/index.tsx?tsr-split=component
+var DocxViewer = lazy(() => import("./DocxViewer-Bvu47Jxr.js").then((m) => ({ default: m.DocxViewer })));
+var XlsxViewer = lazy(() => import("./XlsxViewer-CtBSfYb7.js").then((m) => ({ default: m.XlsxViewer })));
+var PptxViewer = lazy(() => import("./PptxViewer-CjRu82CL.js").then((m) => ({ default: m.PptxViewer })));
+function detectKind(name) {
+	const ext = name.split(".").pop()?.toLowerCase();
+	if (ext === "docx") return "docx";
+	if (ext === "xlsx") return "xlsx";
+	if (ext === "pptx") return "pptx";
+	return "unsupported";
+}
+var KIND_META = {
+	docx: {
+		label: "Word Document",
+		icon: FileText,
+		cls: "bg-word text-word-foreground"
+	},
+	xlsx: {
+		label: "Excel Spreadsheet",
+		icon: Sheet,
+		cls: "bg-excel text-excel-foreground"
+	},
+	pptx: {
+		label: "PowerPoint Presentation",
+		icon: Presentation,
+		cls: "bg-powerpoint text-powerpoint-foreground"
+	}
+};
+var navItems = [
+	{
+		id: "docs",
+		label: "Docs Viewer",
+		icon: FileText,
+		color: "text-slate-400",
+		activeColor: "text-blue-600",
+		accentColor: "bg-blue-600",
+		activeBg: "bg-blue-50"
+	},
+	{
+		id: "excel",
+		label: "Excel Viewer",
+		icon: Sheet,
+		color: "text-slate-400",
+		activeColor: "text-emerald-600",
+		accentColor: "bg-emerald-500",
+		activeBg: "bg-emerald-50"
+	},
+	{
+		id: "ppt",
+		label: "PPT Viewer",
+		icon: Presentation,
+		color: "text-slate-400",
+		activeColor: "text-orange-500",
+		accentColor: "bg-orange-400",
+		activeBg: "bg-orange-50"
+	}
+];
+var kindToView = {
+	docx: "docs",
+	xlsx: "excel",
+	pptx: "ppt"
+};
+var VIEW_CONFIG = {
+	docs: {
+		accept: ".docx",
+		icon: FileText,
+		iconStyle: {
+			background: "linear-gradient(145deg, #1e40af 0%, #2563eb 55%, #93c5fd 100%)",
+			boxShadow: "0 0 0 1px rgba(37,99,235,0.18), inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 20px rgba(37,99,235,0.38)"
+		},
+		heading: "Word Document Viewer",
+		description: "Open Word documents directly in your browser — text, tables, images and charts rendered locally. Nothing leaves your device.",
+		dropHint: "Drop your .docx file here, or click to browse",
+		subtitle: "Accepts .docx files only"
+	},
+	excel: {
+		accept: ".xlsx",
+		icon: Sheet,
+		iconStyle: {
+			background: "linear-gradient(145deg, #166534 0%, #16a34a 55%, #86efac 100%)",
+			boxShadow: "0 0 0 1px rgba(22,163,74,0.18), inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 20px rgba(22,163,74,0.38)"
+		},
+		heading: "Excel Spreadsheet Viewer",
+		description: "Open Excel spreadsheets directly in your browser — cell styles, merged cells and formulas rendered locally. Nothing leaves your device.",
+		dropHint: "Drop your .xlsx file here, or click to browse",
+		subtitle: "Accepts .xlsx files only"
+	},
+	ppt: {
+		accept: ".pptx",
+		icon: Presentation,
+		iconStyle: {
+			background: "linear-gradient(145deg, #9a3412 0%, #ea580c 55%, #fdba74 100%)",
+			boxShadow: "0 0 0 1px rgba(234,88,12,0.18), inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 20px rgba(234,88,12,0.38)"
+		},
+		heading: "PowerPoint Viewer",
+		description: "Open PowerPoint presentations directly in your browser — all slides, layouts and charts rendered locally. Nothing leaves your device.",
+		dropHint: "Drop your .pptx file here, or click to browse",
+		subtitle: "Accepts .pptx files only"
+	}
+};
+var SIDEBAR_COLLAPSED = 72;
+var SIDEBAR_EXPANDED = 264;
+var ICON_INSET = 24;
+var EASE = "cubic-bezier(0.4, 0, 0.2, 1)";
+var SIDEBAR_TR = `width 300ms ${EASE}, box-shadow 300ms ${EASE}`;
+var LABEL_TR = "opacity 180ms ease, max-width 300ms ease, margin-left 280ms ease";
+function Index() {
+	const [doc, setDoc] = useState(null);
+	const [mounted, setMounted] = useState(false);
+	const [activeView, setActiveView] = useState("docs");
+	const [expanded, setExpanded] = useState(false);
+	const [pptMode, setPptMode] = useState("scroll");
+	const [docMode, setDocMode] = useState("scroll");
+	useEffect(() => setMounted(true), []);
+	const openFile = async (file) => {
+		const data = await file.arrayBuffer();
+		const kind = detectKind(file.name);
+		setDoc({
+			name: file.name,
+			kind,
+			data
+		});
+		if (kind !== "unsupported") setActiveView(kindToView[kind]);
+	};
+	const closeDoc = () => setDoc(null);
+	const meta = doc && doc.kind !== "unsupported" ? KIND_META[doc.kind] : null;
+	const DocIcon = meta?.icon ?? FileWarning;
+	const sidebarW = expanded ? SIDEBAR_EXPANDED : SIDEBAR_COLLAPSED;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-screen flex-col bg-slate-50",
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "fixed inset-x-0 top-0 z-30 flex h-[72px] items-center justify-between border-b border-slate-200/70 bg-white px-8",
+			style: { boxShadow: "0 1px 4px 0 rgba(15,23,42,0.07)" },
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3.5",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex h-[48px] w-[48px] shrink-0 items-center justify-center rounded-[14px]",
+					style: {
+						backgroundColor: "#2563eb",
+						boxShadow: "0 0 0 1px rgba(37,99,235,0.22), inset 0 1px 0 rgba(255,255,255,0.15), 0 6px 22px 0 rgba(37,99,235,0.30)"
+					},
+					children: /* @__PURE__ */ jsx(LogoIcon, { size: 24 })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex select-none flex-col justify-center",
+					style: { gap: 1 },
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-[11px] font-semibold uppercase tracking-[0.22em] text-blue-600",
+						children: "Office"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-[24px] font-bold leading-none tracking-[-0.03em] text-slate-900",
+						children: "Viewer"
+					})]
+				})]
+			}), (activeView === "ppt" || activeView === "docs" || doc) && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3",
+				children: [
+					activeView === "docs" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "select-none text-[12.5px] font-medium text-slate-400",
+						children: "View Mode"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ jsxs("select", {
+							value: docMode,
+							onChange: (e) => setDocMode(e.target.value),
+							className: "appearance-none cursor-pointer rounded-lg border border-slate-200 bg-white py-2 pl-3.5 pr-8 text-[13px] font-medium text-slate-700 shadow-sm transition-colors hover:border-slate-300 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/20",
+							children: [/* @__PURE__ */ jsx("option", {
+								value: "scroll",
+								children: "Continuous Scroll"
+							}), /* @__PURE__ */ jsx("option", {
+								value: "navigation",
+								children: "Page Navigation"
+							})]
+						}), /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400" })]
+					})] }),
+					activeView === "ppt" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "select-none text-[12.5px] font-medium text-slate-400",
+						children: "View Mode"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ jsxs("select", {
+							value: pptMode,
+							onChange: (e) => setPptMode(e.target.value),
+							className: "appearance-none cursor-pointer rounded-lg border border-slate-200 bg-white py-2 pl-3.5 pr-8 text-[13px] font-medium text-slate-700 shadow-sm transition-colors hover:border-slate-300 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400/20",
+							children: [/* @__PURE__ */ jsx("option", {
+								value: "scroll",
+								children: "Vertical Scroll"
+							}), /* @__PURE__ */ jsx("option", {
+								value: "navigation",
+								children: "Slide Navigation"
+							})]
+						}), /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400" })]
+					})] }),
+					(activeView === "ppt" || activeView === "docs") && doc && /* @__PURE__ */ jsx("div", { className: "h-5 w-px shrink-0 bg-slate-200" }),
+					doc && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx("span", {
+							className: `flex h-8.5 w-8.5 shrink-0 items-center justify-center rounded-xl ${meta?.cls ?? "bg-slate-100 text-slate-500"}`,
+							children: /* @__PURE__ */ jsx(DocIcon, { className: "h-4.25 w-4.25" })
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "max-w-90 truncate text-[14px] font-medium text-slate-600",
+							children: doc.name
+						}),
+						/* @__PURE__ */ jsx("div", { className: "mx-1 h-5 w-px shrink-0 bg-slate-200" }),
+						/* @__PURE__ */ jsxs("button", {
+							onClick: closeDoc,
+							className: "inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-4 py-1.75 text-[13.5px] font-medium text-slate-600 transition-all duration-150 hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900",
+							children: [/* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" }), "Close file"]
+						})
+					] })
+				]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 overflow-hidden pt-[72px]",
+			children: [/* @__PURE__ */ jsxs("aside", {
+				onMouseEnter: () => setExpanded(true),
+				onMouseLeave: () => setExpanded(false),
+				style: {
+					width: sidebarW,
+					transition: SIDEBAR_TR,
+					boxShadow: expanded ? "3px 0 28px 0 rgba(15,23,42,0.11)" : "3px 0 0   0 rgba(15,23,42,0)"
+				},
+				className: "fixed bottom-0 left-0 top-[72px] z-[25] flex flex-col overflow-hidden border-r border-slate-200/70 bg-white",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "shrink-0 px-3 pb-2 pt-8",
+						style: { minHeight: 52 },
+						children: /* @__PURE__ */ jsx("p", {
+							className: "select-none whitespace-nowrap pl-0.75 text-[10.5px] font-semibold uppercase tracking-[0.11em] text-slate-400",
+							style: {
+								opacity: expanded ? 1 : 0,
+								transition: "opacity 200ms ease"
+							},
+							children: "Viewers"
+						})
+					}),
+					/* @__PURE__ */ jsx("nav", {
+						className: "flex flex-col gap-1",
+						children: navItems.map(({ id, label, icon: Icon, color, activeColor, accentColor, activeBg }) => {
+							const isActive = activeView === id;
+							const chipBg = isActive ? activeBg : !expanded ? "group-hover:bg-slate-100" : "";
+							return /* @__PURE__ */ jsxs("div", {
+								className: "group relative",
+								children: [
+									isActive && /* @__PURE__ */ jsx("div", { className: `absolute bottom-1.5 left-0 top-1.5 w-0.5 rounded-r-full ${accentColor}` }),
+									/* @__PURE__ */ jsxs("button", {
+										onClick: () => {
+											setActiveView(id);
+											if (doc && doc.kind !== "unsupported" && kindToView[doc.kind] !== id) closeDoc();
+										},
+										style: {
+											paddingLeft: expanded ? ICON_INSET : (SIDEBAR_COLLAPSED - 40) / 2,
+											paddingRight: expanded ? 8 : (SIDEBAR_COLLAPSED - 40) / 2
+										},
+										className: `relative flex w-full items-center rounded-md transition-colors duration-150 ${expanded ? "py-3.5" : "py-3"} ${isActive ? activeColor : `${color} hover:text-slate-600 ${expanded ? "hover:bg-slate-50" : ""}`}`,
+										children: [/* @__PURE__ */ jsx("div", {
+											className: `flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-colors duration-200 ${chipBg}`,
+											children: /* @__PURE__ */ jsx(Icon, {
+												className: "h-5 w-5 shrink-0",
+												strokeWidth: isActive ? 2.25 : 1.75
+											})
+										}), /* @__PURE__ */ jsx("span", {
+											style: {
+												maxWidth: expanded ? 160 : 0,
+												opacity: expanded ? 1 : 0,
+												marginLeft: expanded ? 12 : 0,
+												overflow: "hidden",
+												whiteSpace: "nowrap",
+												transition: LABEL_TR
+											},
+											className: "text-[14.5px] font-medium tracking-[-0.01em]",
+											children: label
+										})]
+									}),
+									!expanded && /* @__PURE__ */ jsxs("div", {
+										className: "pointer-events-none absolute left-full top-1/2 z-50 ml-3 -translate-y-1/2 whitespace-nowrap rounded-lg bg-slate-900 px-3 py-1.75 text-[13px] font-medium text-white opacity-0 shadow-xl transition-opacity duration-150 group-hover:opacity-100",
+										children: [label, /* @__PURE__ */ jsx("span", { className: "absolute right-full top-1/2 -translate-y-1/2 border-4 border-transparent border-r-slate-900" })]
+									})
+								]
+							}, id);
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "mt-auto border-t border-slate-100 px-[22px] py-5",
+						style: {
+							opacity: expanded ? 1 : 0,
+							transition: "opacity 200ms ease"
+						},
+						children: /* @__PURE__ */ jsx("p", {
+							className: "whitespace-nowrap text-[12px] leading-relaxed text-slate-400",
+							children: ".docx · .xlsx · .pptx"
+						})
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				style: { marginLeft: SIDEBAR_COLLAPSED },
+				className: "flex flex-1 flex-col overflow-hidden",
+				children: [/* @__PURE__ */ jsxs("main", {
+					className: `flex-1 ${doc?.kind === "pptx" && pptMode === "navigation" ? "overflow-hidden" : "overflow-auto"}`,
+					children: [
+						!doc && /* @__PURE__ */ jsx("div", {
+							className: "flex min-h-full items-center justify-center px-8 py-16",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "w-full max-w-150",
+								children: /* @__PURE__ */ jsx(FileDropzone, {
+									onFile: openFile,
+									config: VIEW_CONFIG[activeView]
+								}, activeView)
+							})
+						}),
+						doc && !mounted && /* @__PURE__ */ jsx("div", {
+							className: "flex h-full items-center justify-center",
+							children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-slate-300" })
+						}),
+						doc && mounted && doc.kind === "unsupported" && /* @__PURE__ */ jsx("div", {
+							className: "flex h-full items-center justify-center p-12",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "mx-auto w-full max-w-md rounded-2xl border border-slate-200 bg-white px-12 py-12 text-center",
+								style: { boxShadow: "0 1px 4px 0 rgba(15,23,42,0.06)" },
+								children: [
+									/* @__PURE__ */ jsx(FileWarning, { className: "mx-auto h-12 w-12 text-slate-300" }),
+									/* @__PURE__ */ jsx("h2", {
+										className: "mt-6 text-[20px] font-semibold tracking-tight text-slate-800",
+										children: "Unsupported file type"
+									}),
+									/* @__PURE__ */ jsxs("p", {
+										className: "mt-3 text-[14.5px] leading-relaxed text-slate-500",
+										children: [
+											"Please use a supported format:",
+											" ",
+											/* @__PURE__ */ jsx("strong", {
+												className: "font-semibold text-slate-700",
+												children: ".docx"
+											}),
+											",",
+											" ",
+											/* @__PURE__ */ jsx("strong", {
+												className: "font-semibold text-slate-700",
+												children: ".xlsx"
+											}),
+											" or",
+											" ",
+											/* @__PURE__ */ jsx("strong", {
+												className: "font-semibold text-slate-700",
+												children: ".pptx"
+											}),
+											".",
+											/* @__PURE__ */ jsx("br", {}),
+											"Legacy formats (.doc, .xls, .ppt) are not supported."
+										]
+									}),
+									/* @__PURE__ */ jsx("button", {
+										onClick: closeDoc,
+										className: "mt-8 rounded-xl bg-blue-600 px-7 py-[10px] text-[14px] font-semibold text-white transition-colors duration-150 hover:bg-blue-700",
+										children: "Try another file"
+									})
+								]
+							})
+						}),
+						doc && mounted && doc.kind !== "unsupported" && /* @__PURE__ */ jsxs(Suspense, {
+							fallback: /* @__PURE__ */ jsx("div", {
+								className: "flex h-full items-center justify-center",
+								children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-slate-300" })
+							}),
+							children: [
+								doc.kind === "docx" && /* @__PURE__ */ jsx(DocxViewer, {
+									data: doc.data,
+									mode: docMode
+								}),
+								doc.kind === "xlsx" && /* @__PURE__ */ jsx(XlsxViewer, { data: doc.data }),
+								doc.kind === "pptx" && /* @__PURE__ */ jsx(PptxViewer, {
+									data: doc.data,
+									mode: pptMode
+								})
+							]
+						})
+					]
+				}), /* @__PURE__ */ jsx("footer", {
+					className: "shrink-0 border-t border-slate-200/70 bg-white px-8 py-3",
+					children: /* @__PURE__ */ jsxs("p", {
+						className: "text-center text-[12px] text-slate-400",
+						children: [
+							"Powered by",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "font-semibold text-slate-500",
+								children: "Virtualan Software"
+							})
+						]
+					})
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { Index as component };