react-pptx-preview-kit 0.1.1

package/README.md

@@ -0,0 +1,147 @@
+# pptx-preview
+
+A pure-frontend `.pptx` renderer for the browser — no server, no dependencies on chart libraries.
+
+**🎯 Goal: 100% visual fidelity compared to Microsoft PowerPoint.**
+
+## Installation (NPM Package)
+
+```bash
+npm install react-pptx-preview-kit
+```
+
+## Usage (React)
+
+The core component `<PptxPreview />` is designed to be plug-and-play. It takes a single `file` prop of type `ArrayBuffer` and automatically handles slide layout parsing, bounding boxes, text fit, UI zoom controls, and navigation.
+
+```tsx
+import React, { useState } from 'react';
+import { PptxPreview } from 'react-pptx-preview-kit';
+
+export default function MyPresentationApp() {
+  const [fileBuffer, setFileBuffer] = useState<ArrayBuffer | null>(null);
+
+  /* Read the file when a user uploads it */
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        if (event.target?.result) {
+          setFileBuffer(event.target.result as ArrayBuffer);
+        }
+      };
+      reader.readAsArrayBuffer(file);
+    }
+  };
+
+  return (
+    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      {/* Header with Upload button */}
+      <header style={{ padding: '16px', backgroundColor: '#1e1e2e', color: 'white' }}>
+        <h2 style={{ margin: '0 0 10px 0' }}>My PPTX Viewer</h2>
+        <input type="file" accept=".pptx" onChange={handleFileUpload} />
+      </header>
+
+      {/* Main Viewer Area */}
+      <main style={{ flex: 1, overflow: 'hidden', backgroundColor: '#f5f5f5' }}>
+        {fileBuffer ? (
+          <PptxPreview file={fileBuffer} />
+        ) : (
+          <p style={{ textAlign: 'center', marginTop: '50px', color: '#888' }}>
+            Please upload a .pptx file to view...
+          </p>
+        )}
+      </main>
+    </div>
+  );
+}
+```
+
+### Example 2: Load from Remote URL (with Authentication)
+
+Since `<PptxPreview />` only relies on a raw `ArrayBuffer`, it is completely unopinionated about **how** you get the file. You can fetch it from an S3 bucket, a secure internal API, or any remote URL—making it trivial to support Authentication!
+
+```tsx
+import React, { useState, useEffect } from 'react';
+import { PptxPreview } from 'react-pptx-preview-kit';
+
+export default function RemoteViewer({ documentId }: { documentId: string }) {
+  const [fileBuffer, setFileBuffer] = useState<ArrayBuffer | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchSecureDocument() {
+      try {
+        const response = await fetch(`https://api.yourcompany.com/files/${documentId}`, {
+          headers: {
+            // Include your Authentication token here!
+            'Authorization': `Bearer YOUR_ACCESS_TOKEN`
+          }
+        });
+
+        if (!response.ok) throw new Error("Failed to fetch document");
+        
+        // Convert the response to ArrayBuffer
+        const buffer = await response.arrayBuffer();
+        setFileBuffer(buffer);
+      } catch (err) {
+        console.error("Download error:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchSecureDocument();
+  }, [documentId]);
+
+  if (loading) return <p style={{ padding: 20 }}>Downloading presentation securely...</p>;
+  if (!fileBuffer) return <p style={{ padding: 20 }}>Error loading document.</p>;
+
+  return (
+    <div style={{ height: '800px', border: '1px solid #ccc' }}>
+      <PptxPreview file={fileBuffer} />
+    </div>
+  );
+}
+```
+
+## Local Development (Contributing)
+
+If you are developing inside this repository to improve the library:
+
+```bash
+npm install
+npm run dev      # Spin up local demo UI at http://localhost:5173
+npm run build    # Build library distributions to dist/
+```
+
+## Features
+
+- ✅ 150+ preset shape geometries + custom freeform shapes (custGeom)
+- ✅ Solid, gradient (SVG defs), and image fills
+- ✅ Shadow effects, borders, image cropping
+- ✅ Tables with merged cells and per-cell styling
+- ✅ Text: fonts, bullets, numbered lists, hyperlinks, super/subscript
+- ✅ Charts: bar, line, area, pie — pure SVG
+- ✅ Theme / layout / master inheritance chain
+- ✅ Zoom controls, slide counter, fullscreen, keyboard navigation
+
+## Docs
+
+| Document | Contents |
+|---|---|
+| [AGENTS.md](./AGENTS.md) | Guidelines for AI agents contributing to this project |
+| [docs/ARCHITECTURE.md](./docs/ARCHITECTURE.md) | Codebase structure, data flow, coordinate system |
+| [docs/ROADMAP.md](./docs/ROADMAP.md) | Current completion status and remaining work |
+
+## Tech Stack
+
+- **React 18 + Vite + TypeScript**
+- **fast-xml-parser** — PPTX XML parsing
+- **JSZip** — ZIP extraction
+- No chart libs. No rendering dependencies.
+
+## License
+
+MIT

package/dist/chart-parser-OM57xOST.js

@@ -0,0 +1,99 @@
+import { r as k, b as S, g as t, a as x, c as A } from "./index-BiEAfEne.js";
+async function T(c, n, u, o) {
+  var h;
+  const b = u[n];
+  if (!b) return null;
+  const s = k(o, b), a = await c.getXml(s);
+  if (!a) return null;
+  const p = s.substring(0, s.lastIndexOf("/")), r = s.substring(s.lastIndexOf("/") + 1), m = `${p}/_rels/${r}.rels`, g = await c.getXml(m);
+  S(g);
+  const C = (h = a == null ? void 0 : a["c:chartSpace"]) == null ? void 0 : h["c:chart"];
+  if (!C) return null;
+  const P = L(C), R = t(C, "c:plotArea"), d = t(C, "c:legend"), y = !!d;
+  let l = "bottom";
+  if (y) {
+    const f = x(t(d, "c:legendPos"), "val");
+    f === "r" ? l = "right" : f === "l" ? l = "left" : f === "t" || f === "tr" ? l = "top" : f === "b" && (l = "bottom");
+  } else
+    l = "none";
+  const i = E(R), e = ["c:barChart", "c:lineChart", "c:pieChart", "c:scatterChart", "c:areaChart", "c:doughnutChart"];
+  for (const f of e) {
+    const F = t(R, f);
+    if (F) {
+      const v = V(f, F, P);
+      return v.hasLegend = y, v.legendPos = l, v.axes = i, v;
+    }
+  }
+  return { type: "unknown", title: P, categories: [], series: [], hasLegend: y };
+}
+function L(c) {
+  const n = t(c, "c:title");
+  if (!n) return;
+  const u = t(n, "c:tx"), o = t(u, "c:rich");
+  return o && A(o, "a:p").map((s) => A(s, "a:r").map((p) => p["a:t"] ?? "").join("")).join(" ").trim() || void 0;
+}
+function V(c, n, u) {
+  const b = {
+    "c:barChart": "bar",
+    "c:lineChart": "line",
+    "c:pieChart": "pie",
+    "c:scatterChart": "scatter",
+    "c:areaChart": "area",
+    "c:doughnutChart": "pie"
+  }[c] || "unknown", s = [], a = [], p = A(n, "c:ser");
+  for (const r of p) {
+    const m = t(r, "c:tx");
+    let g = "";
+    if (m) {
+      const i = t(m, "c:strRef");
+      if (i) {
+        const e = t(i, "c:strCache"), h = e ? t(e, "c:pt") : null;
+        g = h && h["c:v"] ? String(h["c:v"]) : "";
+      }
+      if (!g) {
+        const e = t(m, "c:v");
+        g = e ? String(e) : x(m, "val") || "";
+      }
+    }
+    let C;
+    const P = t(r, "c:spPr"), R = P ? t(P, "a:solidFill") : null, d = R ? R["a:srgbClr"] : null;
+    if (d && (C = "#" + (typeof d == "object" ? d["@_val"] : d)), s.length === 0) {
+      const i = t(r, "c:cat") || t(r, "c:xVal");
+      if (i) {
+        const e = t(i, "c:strRef"), h = t(i, "c:numRef"), f = t(e, "c:strCache"), F = t(h, "c:numCache"), v = f || F;
+        if (v)
+          for (const j of A(v, "c:pt"))
+            s.push(j["c:v"] ?? String(x(j, "idx")));
+      }
+    }
+    const y = t(r, "c:val") || t(r, "c:yVal"), l = [];
+    if (y) {
+      const i = t(y, "c:numRef"), e = t(i, "c:numCache");
+      if (e)
+        for (const h of A(e, "c:pt"))
+          l.push(parseFloat(h["c:v"] ?? "0") || 0);
+    }
+    l.length > 0 && a.push({ name: g, values: l, color: C });
+  }
+  return { type: b, title: u, categories: s, series: a };
+}
+function E(c) {
+  const n = {}, u = t(c, "c:catAx");
+  u && (n.x = w(u));
+  const o = t(c, "c:valAx");
+  return o && (n.y = w(o)), n;
+}
+function w(c) {
+  const n = L(c), o = x(t(c, "c:tickLblPos"), "val") !== "none", s = !!t(c, "c:majorGridlines"), a = t(c, "c:scaling"), p = x(t(a, "c:min"), "val"), r = x(t(a, "c:max"), "val"), m = t(c, "c:numFmt"), g = x(m, "formatCode");
+  return {
+    title: n,
+    showLabels: o,
+    showGrid: s,
+    min: p !== void 0 ? parseFloat(p) : void 0,
+    max: r !== void 0 ? parseFloat(r) : void 0,
+    formatCode: g || void 0
+  };
+}
+export {
+  T as parseChart
+};