office-viewer-react 1.0.0

package/dist/server/assets/_tanstack-start-manifest_v-CpFqMvFH.js

@@ -0,0 +1,4 @@
+const tsrStartManifest = () => ({ routes: { __root__: { filePath: "C:/Users/balambika.t_virtuala/Desktop/Office-Viewer-app/office-viewer/frontend/src/routes/__root.tsx", children: ["/", "/login", "/register", "/sitemap.xml"], preloads: ["/assets/index-CKjGwz9R.js"], scripts: [{ attrs: { type: "module", async: true, src: "/assets/index-CKjGwz9R.js" } }] }, "/": { filePath: "C:/Users/balambika.t_virtuala/Desktop/Office-Viewer-app/office-viewer/frontend/src/routes/index.tsx", children: void 0, preloads: ["/assets/index-BDMLGHcR.js", "/assets/LogoIcon-BcnkueZW.js"] }, "/login": { filePath: "C:/Users/balambika.t_virtuala/Desktop/Office-Viewer-app/office-viewer/frontend/src/routes/login.tsx", children: void 0, preloads: ["/assets/login-DEy3R1iD.js", "/assets/form-C1byQJR4.js", "/assets/LogoIcon-BcnkueZW.js"] }, "/register": { filePath: "C:/Users/balambika.t_virtuala/Desktop/Office-Viewer-app/office-viewer/frontend/src/routes/register.tsx", children: void 0, preloads: ["/assets/register-CUUVGLJE.js", "/assets/form-C1byQJR4.js", "/assets/LogoIcon-BcnkueZW.js"] } } });
+export {
+  tsrStartManifest
+};

package/dist/server/assets/empty-plugin-adapters-BFgPZ6_d.js

@@ -0,0 +1,6 @@
+var pluginSerializationAdapters = [];
+var hasPluginAdapters = false;
+export {
+  hasPluginAdapters,
+  pluginSerializationAdapters
+};

package/dist/server/assets/form-CD9otjw-.js

@@ -0,0 +1,236 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { L as LogoIcon } from "./LogoIcon-Dx0LU3or.js";
+import { ShieldCheck, HardDrive, Layers, EyeOff, Eye } from "lucide-react";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { FormProvider, Controller, useFormContext } from "react-hook-form";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import * as LabelPrimitive from "@radix-ui/react-label";
+function BrandMark() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex h-16 w-16 items-center justify-center rounded-2xl",
+        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 20px 0 rgba(37,99,235,0.30)"
+        },
+        children: /* @__PURE__ */ jsx(LogoIcon, { size: 30 })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex select-none flex-col items-center", style: { gap: 2 }, children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.22em] text-blue-600", children: "Office" }),
+      /* @__PURE__ */ jsx("span", { className: "text-[24px] font-bold leading-none tracking-[-0.02em] text-slate-900", children: "Viewer" })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-0.5 max-w-xs text-center text-[13.5px] leading-relaxed text-slate-500", children: "Securely view Word, Excel and PowerPoint files directly in your browser." })
+  ] });
+}
+function TrustIndicators() {
+  return /* @__PURE__ */ jsx("div", { className: "border-t border-slate-100 px-8 py-5 sm:px-12 sm:py-6", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-x-7 gap-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(ShieldCheck, { className: "h-3.5 w-3.5 shrink-0 text-slate-400" }),
+      /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-[11.5px] text-slate-400", children: "Secure Access" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(HardDrive, { className: "h-3.5 w-3.5 shrink-0 text-slate-400" }),
+      /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-[11.5px] text-slate-400", children: "Runs Locally" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(Layers, { className: "h-3.5 w-3.5 shrink-0 text-slate-400" }),
+      /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-[11.5px] text-slate-400", children: "Word, Excel & PowerPoint" })
+    ] })
+  ] }) });
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+  }
+);
+Button.displayName = "Button";
+const Input = React.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+const PasswordInput = React.forwardRef(({ className, ...props }, ref) => {
+  const [visible, setVisible] = React.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: visible ? "text" : "password",
+        className: cn("pr-10", className),
+        ref,
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": visible ? "Hide password" : "Show password",
+        onClick: () => setVisible((v) => !v),
+        className: "absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 transition-colors hover:text-slate-600",
+        children: visible ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4", "aria-hidden": "true" })
+      }
+    )
+  ] });
+});
+PasswordInput.displayName = "PasswordInput";
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
+Label.displayName = LabelPrimitive.Root.displayName;
+const Form = FormProvider;
+const FormFieldContext = React.createContext(null);
+const FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  if (!itemContext) {
+    throw new Error("useFormField should be used within <FormItem>");
+  }
+  const fieldState = getFieldState(fieldContext.name, formState);
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+const FormItemContext = React.createContext(null);
+const FormItem = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+    return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props }) });
+  }
+);
+FormItem.displayName = "FormItem";
+const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      ref,
+      className: cn(error && "text-destructive", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+const FormControl = React.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("text-[0.8rem] text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formMessageId,
+      className: cn("text-[0.8rem] font-medium text-destructive", className),
+      ...props,
+      children: body
+    }
+  );
+});
+FormMessage.displayName = "FormMessage";
+export {
+  BrandMark as B,
+  Form as F,
+  Input as I,
+  PasswordInput as P,
+  TrustIndicators as T,
+  FormField as a,
+  FormItem as b,
+  FormLabel as c,
+  FormControl as d,
+  FormMessage as e,
+  Button as f
+};

package/dist/server/assets/index-gQHSGxNv.js

@@ -0,0 +1,365 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect, Suspense, lazy } from "react";
+import { AlertCircle, UploadCloud, Presentation, Sheet, FileText, FileWarning, ChevronDown, X, Loader2 } from "lucide-react";
+import { L as LogoIcon } from "./LogoIcon-Dx0LU3or.js";
+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() ?? "");
+      const accepted = config.accept.split(",").map((s) => s.trim());
+      if (!accepted.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)
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+const DocxViewer = lazy(() => import("./DocxViewer-Bm8UJY-7.js").then((m) => ({
+  default: m.DocxViewer
+})));
+const XlsxViewer = lazy(() => import("./XlsxViewer-jzIgKmN2.js").then((m) => ({
+  default: m.XlsxViewer
+})));
+const PptxViewer = lazy(() => import("./PptxViewer-DS7Atucw.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";
+}
+const 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"
+  }
+};
+const 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"
+}];
+const kindToView = {
+  docx: "docs",
+  xlsx: "excel",
+  pptx: "ppt"
+};
+const 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"
+  }
+};
+const SIDEBAR_COLLAPSED = 72;
+const SIDEBAR_EXPANDED = 264;
+const ICON_INSET = 24;
+const EASE = "cubic-bezier(0.4, 0, 0.2, 1)";
+const SIDEBAR_TR = `width 300ms ${EASE}, box-shadow 300ms ${EASE}`;
+const 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: {
+              // Collapsed: centre the 40 px chip in the 72 px rail (16 px each side).
+              // Expanded:  restore the original left inset so the icon aligns with the header logo.
+              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" })
+        ] }) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  Index as component
+};