pptx-previewer 0.1.0

package/README.md

@@ -0,0 +1,87 @@
+# pptx-previewer
+
+`pptx-previewer` is a React component for rendering PPTX-like slide JSON in the browser.
+
+It is designed to work with JSON produced by PPTX parsers (for example the `pptx2json` output used in this repository) and supports common slide elements:
+
+- `shape`
+- `line`
+- `text`
+- `image`
+- `table`
+
+## Installation
+
+```bash
+pnpm add pptx-previewer
+```
+
+## Usage
+
+```tsx
+import { PPTXPreviewer, type Slide } from 'pptx-previewer';
+
+const slide: Slide = {
+  background: { color: '#ffffff' },
+  elements: [
+    {
+      type: 'text',
+      left: 40,
+      top: 32,
+      width: 300,
+      height: 60,
+      content: '<p>Hello PPTX Preview</p>',
+      defaultColor: '#111827',
+      defaultFontName: 'Arial'
+    }
+  ]
+};
+
+export function App() {
+  return (
+    <div style={{ width: 960, height: 540 }}>
+      <PPTXPreviewer slide={slide} />
+    </div>
+  );
+}
+```
+
+## API
+
+### `PPTXPreviewer`
+
+Props:
+
+- `slide: Slide` (required)
+- `className?: string`
+
+The component fills the size of its parent container. Set width/height on the parent element.
+
+## Types
+
+The package exports:
+
+- `Slide`
+- `SlideElement`
+- `PPTXPreviewerProps`
+
+## Development
+
+```bash
+cd src/lib/pptx-previewer
+pnpm install
+pnpm run typecheck
+pnpm run build
+```
+
+Build output is generated in `dist/`:
+
+- `dist/index.mjs`
+- `dist/index.js`
+- `dist/index.d.ts`
+
+## Notes
+
+- This package is `react` peer-dependent (`>=18`).
+- Element coordinates, sizes, and style semantics follow the input JSON schema.
+- Text content is rendered via `dangerouslySetInnerHTML`; sanitize external/untrusted HTML before rendering.

package/dist/index.d.mts

@@ -0,0 +1,103 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type SlideElement = {
+    type: string;
+    id?: string;
+    groupId?: string;
+    left?: number;
+    top?: number;
+    width?: number;
+    height?: number;
+    rotate?: number;
+    fill?: string;
+    pattern?: string;
+    path?: string;
+    viewBox?: [number, number];
+    pathFormula?: string;
+    keypoints?: number[];
+    special?: boolean;
+    opacity?: number;
+    fixedRatio?: boolean;
+    outline?: {
+        width?: number;
+        color?: string;
+        style?: string;
+    };
+    shadow?: {
+        h?: number;
+        v?: number;
+        blur?: number;
+        color?: string;
+    };
+    content?: string;
+    defaultColor?: string;
+    defaultFontName?: string;
+    wordSpace?: number;
+    lineHeight?: number;
+    paragraphSpace?: number;
+    vertical?: boolean;
+    src?: string;
+    imageType?: string;
+    flipH?: boolean;
+    flipV?: boolean;
+    start?: [number, number];
+    end?: [number, number];
+    broken?: [number, number];
+    broken2?: [number, number];
+    curve?: [number, number];
+    cubic?: [[number, number], [number, number]];
+    color?: string;
+    points?: string[];
+    style?: string;
+    radius?: number;
+    clip?: {
+        shape?: string;
+        range?: [[number, number], [number, number]];
+    };
+    filters?: {
+        grayscale?: string;
+        opacity?: string;
+        blur?: string;
+    };
+    colWidths?: number[];
+    data?: Array<Array<{
+        id?: string;
+        colspan?: number;
+        rowspan?: number;
+        text?: string;
+        style?: {
+            fontname?: string;
+            color?: string;
+            align?: string;
+            fontsize?: string;
+            backcolor?: string;
+        };
+    }>>;
+    cellMinHeight?: number;
+    text?: {
+        content: string;
+        defaultColor?: string;
+        defaultFontName?: string;
+        align?: string;
+        lineHeight?: number;
+    };
+};
+type Slide = {
+    id?: string;
+    elements?: SlideElement[];
+    remark?: string;
+    background?: {
+        type?: string;
+        color?: string;
+        src?: string;
+    };
+    type?: string;
+};
+type PPTXPreviewerProps = {
+    slide: Slide;
+    className?: string;
+};
+
+declare function PPTXPreviewer({ slide, className }: PPTXPreviewerProps): react_jsx_runtime.JSX.Element;
+
+export { PPTXPreviewer, type PPTXPreviewerProps, type Slide, type SlideElement };

package/dist/index.d.ts

@@ -0,0 +1,103 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type SlideElement = {
+    type: string;
+    id?: string;
+    groupId?: string;
+    left?: number;
+    top?: number;
+    width?: number;
+    height?: number;
+    rotate?: number;
+    fill?: string;
+    pattern?: string;
+    path?: string;
+    viewBox?: [number, number];
+    pathFormula?: string;
+    keypoints?: number[];
+    special?: boolean;
+    opacity?: number;
+    fixedRatio?: boolean;
+    outline?: {
+        width?: number;
+        color?: string;
+        style?: string;
+    };
+    shadow?: {
+        h?: number;
+        v?: number;
+        blur?: number;
+        color?: string;
+    };
+    content?: string;
+    defaultColor?: string;
+    defaultFontName?: string;
+    wordSpace?: number;
+    lineHeight?: number;
+    paragraphSpace?: number;
+    vertical?: boolean;
+    src?: string;
+    imageType?: string;
+    flipH?: boolean;
+    flipV?: boolean;
+    start?: [number, number];
+    end?: [number, number];
+    broken?: [number, number];
+    broken2?: [number, number];
+    curve?: [number, number];
+    cubic?: [[number, number], [number, number]];
+    color?: string;
+    points?: string[];
+    style?: string;
+    radius?: number;
+    clip?: {
+        shape?: string;
+        range?: [[number, number], [number, number]];
+    };
+    filters?: {
+        grayscale?: string;
+        opacity?: string;
+        blur?: string;
+    };
+    colWidths?: number[];
+    data?: Array<Array<{
+        id?: string;
+        colspan?: number;
+        rowspan?: number;
+        text?: string;
+        style?: {
+            fontname?: string;
+            color?: string;
+            align?: string;
+            fontsize?: string;
+            backcolor?: string;
+        };
+    }>>;
+    cellMinHeight?: number;
+    text?: {
+        content: string;
+        defaultColor?: string;
+        defaultFontName?: string;
+        align?: string;
+        lineHeight?: number;
+    };
+};
+type Slide = {
+    id?: string;
+    elements?: SlideElement[];
+    remark?: string;
+    background?: {
+        type?: string;
+        color?: string;
+        src?: string;
+    };
+    type?: string;
+};
+type PPTXPreviewerProps = {
+    slide: Slide;
+    className?: string;
+};
+
+declare function PPTXPreviewer({ slide, className }: PPTXPreviewerProps): react_jsx_runtime.JSX.Element;
+
+export { PPTXPreviewer, type PPTXPreviewerProps, type Slide, type SlideElement };

package/dist/index.js

@@ -0,0 +1,449 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+  PPTXPreviewer: () => PPTXPreviewer
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/renderers/image.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function renderImage(element) {
+  const filterStr = [
+    element.filters?.grayscale ? `grayscale(${element.filters.grayscale})` : "",
+    element.filters?.opacity ? `opacity(${element.filters.opacity})` : "",
+    element.filters?.blur ? `blur(${element.filters.blur})` : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        borderRadius: element.clip?.shape === "ellipse" ? "50%" : element.radius ? `${element.radius}px` : void 0,
+        filter: filterStr || void 0
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: element.src || "", alt: "", style: { width: "100%", height: "100%", objectFit: "cover" } })
+    }
+  );
+}
+
+// src/constants.ts
+var MIN_LINE_SIZE = 24;
+
+// src/renderers/line.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var getLineDashArray = (width, style) => {
+  if (style === "dashed") return width <= 8 ? `${width * 5} ${width * 2.5}` : `${width * 5} ${width * 1.5}`;
+  if (style === "dotted") return width <= 8 ? `${width * 1.8} ${width * 1.6}` : `${width * 1.5} ${width * 1.2}`;
+  return "0 0";
+};
+var getLinePath = (element) => {
+  const start = element.start.join(",");
+  const end = element.end.join(",");
+  if (element.broken) return `M${start} L${element.broken.join(",")} L${end}`;
+  if (element.broken2) {
+    const width = Math.abs(element.end[0] - element.start[0]);
+    const height = Math.abs(element.end[1] - element.start[1]);
+    if (width >= height) {
+      return `M${start} L${element.broken2[0]},${element.start[1]} L${element.broken2[0]},${element.end[1]} L${end}`;
+    }
+    return `M${start} L${element.start[0]},${element.broken2[1]} L${element.end[0]},${element.broken2[1]} L${end}`;
+  }
+  if (element.curve) return `M${start} Q${element.curve.join(",")} ${end}`;
+  if (element.cubic) {
+    const [c1, c2] = element.cubic;
+    return `M${start} C${c1.join(",")} ${c2.join(",")} ${end}`;
+  }
+  return `M${start} L${end}`;
+};
+function renderLineMarker(props) {
+  const pathMap = {
+    dot: "m0 5a5 5 0 1 0 10 0a5 5 0 1 0 -10 0z",
+    arrow: "M0,0 L10,5 0,10 Z"
+  };
+  const rotateMap = {
+    "arrow-start": 180,
+    "arrow-end": 0
+  };
+  const size = props.baseSize < 2 ? 2 : props.baseSize;
+  const rotate = rotateMap[`${props.type}-${props.position}`] || 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "marker",
+    {
+      id: `${props.id}-${props.type}-${props.position}`,
+      markerUnits: "userSpaceOnUse",
+      orient: "auto",
+      markerWidth: size * 3,
+      markerHeight: size * 3,
+      refX: size * 1.5,
+      refY: size * 1.5,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: pathMap[props.type], fill: props.color, transform: `scale(${size * 0.3}, ${size * 0.3}) rotate(${rotate}, 5, 5)` })
+    }
+  );
+}
+function renderLine(element, markerId) {
+  if (!element.start || !element.end) return null;
+  const width = Math.max(Math.abs(element.start[0] - element.end[0]), MIN_LINE_SIZE);
+  const height = Math.max(Math.abs(element.start[1] - element.end[1]), MIN_LINE_SIZE);
+  const lineWidth = element.width ?? 1;
+  const dashArray = getLineDashArray(lineWidth, element.style);
+  const path = getLinePath(element);
+  const points = element.points;
+  const startMarker = points?.[0] ? points[0] : void 0;
+  const endMarker = points?.[1] ? points[1] : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { overflow: "visible", width, height, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("defs", { children: [
+      startMarker && renderLineMarker({ id: markerId, position: "start", type: startMarker, color: element.color, baseSize: lineWidth }),
+      endMarker && renderLineMarker({ id: markerId, position: "end", type: endMarker, color: element.color, baseSize: lineWidth })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: path,
+        stroke: element.color ?? "#000",
+        strokeWidth: lineWidth,
+        strokeDasharray: dashArray,
+        fill: "none",
+        markerStart: startMarker ? `url(#${markerId}-${startMarker}-start)` : void 0,
+        markerEnd: endMarker ? `url(#${markerId}-${endMarker}-end)` : void 0
+      }
+    )
+  ] });
+}
+
+// src/renderers/shape.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var getOutlineDashArray = (outline) => {
+  const style = outline?.style;
+  const width = outline?.width ?? 1;
+  if (style === "dashed") return width <= 8 ? `${width * 5} ${width * 2.5}` : `${width * 5} ${width * 1.5}`;
+  if (style === "dotted") return width <= 8 ? `${width * 1.8} ${width * 1.6}` : `${width * 1.5} ${width * 1.2}`;
+  return void 0;
+};
+function renderShape(element, patternId) {
+  const viewWidth = element.viewBox?.[0] ?? element.width ?? 0;
+  const viewHeight = element.viewBox?.[1] ?? element.height ?? 0;
+  const outlineDashArray = getOutlineDashArray(element.outline);
+  const fill = element.pattern ? `url(#${patternId})` : element.fill || "transparent";
+  const text = element.text;
+  const verticalAlign = text?.align ?? "middle";
+  const justifyContent = verticalAlign === "top" ? "flex-start" : verticalAlign === "bottom" ? "flex-end" : "center";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { style: { position: "absolute", inset: 0 }, overflow: "visible", width: element.width, height: element.height, children: [
+      element.pattern && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "pattern",
+        {
+          id: patternId,
+          patternUnits: "userSpaceOnUse",
+          patternContentUnits: "userSpaceOnUse",
+          width: viewWidth,
+          height: viewHeight,
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("image", { href: element.pattern, width: viewWidth, height: viewHeight, preserveAspectRatio: "xMidYMid slice" })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { transform: `scale(${(element.width ?? 0) / viewWidth || 1}, ${(element.height ?? 0) / viewHeight || 1}) translate(0,0) matrix(1,0,0,1,0,0)`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "path",
+        {
+          vectorEffect: "non-scaling-stroke",
+          strokeLinecap: "butt",
+          strokeMiterlimit: 8,
+          d: element.path || "",
+          fill,
+          stroke: element.outline?.color,
+          strokeWidth: element.outline?.width,
+          strokeDasharray: outlineDashArray
+        }
+      ) })
+    ] }),
+    text?.content && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent,
+          alignItems: "stretch",
+          color: text.defaultColor,
+          fontFamily: text.defaultFontName || void 0,
+          lineHeight: text.lineHeight,
+          pointerEvents: "none"
+        },
+        dangerouslySetInnerHTML: { __html: text.content }
+      }
+    )
+  ] });
+}
+
+// src/renderers/table.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var parseFontSize = (value) => {
+  if (!value) return void 0;
+  const size = Number.parseFloat(value);
+  return Number.isFinite(size) ? `${size}px` : void 0;
+};
+var normalizeFontName = (value) => {
+  if (!value) return void 0;
+  return value.replace(/^"+|"+$/g, "");
+};
+var tableColor = (value) => {
+  if (!value) return void 0;
+  return value.startsWith("rgb") || value.startsWith("#") ? value : void 0;
+};
+var isPlaceholderCell = (cell) => {
+  if (!cell) return false;
+  const colspan = cell.colspan ?? 1;
+  const rowspan = cell.rowspan ?? 1;
+  if (colspan !== 1 || rowspan !== 1) return false;
+  const style = cell.style;
+  const hasStyle = Boolean(style?.fontname) || Boolean(style?.fontsize) || Boolean(style?.color) || Boolean(style?.backcolor);
+  return (cell.text ?? "").trim() === "" && !hasStyle;
+};
+var buildTableRows = (element) => {
+  const rows = element.data ?? [];
+  const colCount = element.colWidths?.length ?? 0;
+  const rowCells = [];
+  const skip = new Array(colCount).fill(0);
+  rows.forEach((row, rowIndex) => {
+    const cells = [];
+    let colIndex = 0;
+    let cellIndex = 0;
+    while (colIndex < colCount) {
+      if (skip[colIndex] > 0) {
+        skip[colIndex] -= 1;
+        if (isPlaceholderCell(row[cellIndex])) cellIndex += 1;
+        colIndex += 1;
+        continue;
+      }
+      const cell = row[cellIndex];
+      if (!cell) break;
+      cellIndex += 1;
+      const colSpan = cell.colspan ?? 1;
+      const rowSpan = cell.rowspan ?? 1;
+      if (rowSpan > 1) {
+        for (let i = 0; i < colSpan; i += 1) {
+          skip[colIndex + i] = rowSpan - 1;
+        }
+      }
+      if (colSpan > 1) {
+        for (let i = 0; i < colSpan - 1; i += 1) {
+          if (isPlaceholderCell(row[cellIndex])) cellIndex += 1;
+        }
+      }
+      cells.push({
+        key: cell.id ?? `${rowIndex}-${colIndex}-${cellIndex}`,
+        colSpan,
+        rowSpan,
+        text: cell.text ?? "",
+        style: cell.style
+      });
+      colIndex += colSpan;
+    }
+    rowCells.push(cells);
+  });
+  return rowCells;
+};
+function renderTable(element) {
+  const colWidths = element.colWidths ?? [];
+  const rows = buildTableRows(element);
+  const rowCount = rows.length || 1;
+  const baseRowHeight = (element.height ?? 0) / rowCount;
+  const rowHeight = element.cellMinHeight ? Math.max(element.cellMinHeight, baseRowHeight) : baseRowHeight;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "table",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        tableLayout: "fixed",
+        borderCollapse: "collapse",
+        border: element.outline ? `${element.outline.width ?? 1}px solid ${element.outline.color ?? "#000"}` : void 0
+      },
+      children: [
+        colWidths.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("colgroup", { children: colWidths.map((width, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("col", { style: { width: `${width * 100}%` } }, `col-${index}`)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { style: { height: rowHeight }, children: row.map((cell) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "td",
+          {
+            colSpan: cell.colSpan,
+            rowSpan: cell.rowSpan,
+            style: {
+              border: element.outline ? `${element.outline.width ?? 1}px solid ${element.outline.color ?? "#000"}` : "1px solid #ddd",
+              background: tableColor(cell.style?.backcolor),
+              padding: "6px 8px",
+              textAlign: cell.style?.align ?? "left",
+              color: tableColor(cell.style?.color),
+              fontFamily: normalizeFontName(cell.style?.fontname),
+              fontSize: parseFontSize(cell.style?.fontsize),
+              verticalAlign: "middle"
+            },
+            children: cell.text
+          },
+          cell.key
+        )) }, `row-${rowIndex}`)) })
+      ]
+    }
+  ) });
+}
+
+// src/renderers/text.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function renderText(element) {
+  const paragraphStyle = element.paragraphSpace !== void 0 ? { ["--paragraphSpace"]: `${element.paragraphSpace}px` } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        padding: 10,
+        lineHeight: element.lineHeight ?? 1.5,
+        letterSpacing: `${element.wordSpace ?? 0}px`,
+        wordBreak: "break-word",
+        fontFamily: element.defaultFontName || "sans-serif",
+        color: element.defaultColor,
+        writingMode: element.vertical ? "vertical-rl" : void 0,
+        ...paragraphStyle
+      },
+      dangerouslySetInnerHTML: { __html: element.content || "" }
+    }
+  );
+}
+
+// src/renderers/index.tsx
+function renderElement(element, markerId) {
+  if (element.type === "shape") return renderShape(element, `shape-${markerId}`);
+  if (element.type === "line") return renderLine(element, markerId);
+  if (element.type === "text") return renderText(element);
+  if (element.type === "image") return renderImage(element);
+  if (element.type === "table") return renderTable(element);
+  return null;
+}
+
+// src/utils/elementSize.ts
+function getElementSize(element) {
+  if (element.type === "line" && element.start && element.end) {
+    return {
+      width: Math.max(Math.abs(element.end[0] - element.start[0]), MIN_LINE_SIZE),
+      height: Math.max(Math.abs(element.end[1] - element.start[1]), MIN_LINE_SIZE)
+    };
+  }
+  return {
+    width: element.width ?? 0,
+    height: element.height ?? 0
+  };
+}
+
+// src/utils/elementStyle.ts
+var getShadowFilter = (shadow) => {
+  if (!shadow) return void 0;
+  const h = shadow.h ?? 0;
+  const v = shadow.v ?? 0;
+  const blur = shadow.blur ?? 0;
+  const color = shadow.color ?? "#000";
+  return `drop-shadow(${h}px ${v}px ${blur}px ${color})`;
+};
+var getFlipTransform = (flipH, flipV) => {
+  const transforms = [flipH ? "scaleX(-1)" : "", flipV ? "scaleY(-1)" : ""].filter(Boolean).join(" ");
+  return transforms || void 0;
+};
+
+// src/PPTXPreviewer.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function PPTXPreviewer({ slide, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        fontSize: 16,
+        lineHeight: "normal"
+      },
+      children: [
+        slide.background?.color ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              backgroundColor: slide.background.color
+            }
+          }
+        ) : null,
+        (slide.elements ?? []).map((element, elementIndex) => {
+          const size = getElementSize(element);
+          const markerId = element.id ?? `line-${elementIndex}`;
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: element.left ?? 0,
+                top: element.top ?? 0,
+                width: size.width,
+                height: size.height
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "div",
+                {
+                  style: {
+                    width: "100%",
+                    height: "100%",
+                    transform: element.rotate ? `rotate(${element.rotate}deg)` : void 0
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                    "div",
+                    {
+                      style: {
+                        position: "relative",
+                        width: "100%",
+                        height: "100%",
+                        opacity: element.opacity ?? 1,
+                        filter: getShadowFilter(element.shadow),
+                        transform: getFlipTransform(element.flipH, element.flipV),
+                        transformOrigin: "center",
+                        color: element.defaultColor,
+                        fontFamily: element.defaultFontName
+                      },
+                      children: renderElement(element, markerId)
+                    }
+                  )
+                }
+              )
+            },
+            element.id ?? elementIndex
+          );
+        })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PPTXPreviewer
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../index.ts","../src/renderers/image.tsx","../src/constants.ts","../src/renderers/line.tsx","../src/renderers/shape.tsx","../src/renderers/table.tsx","../src/renderers/text.tsx","../src/renderers/index.tsx","../src/utils/elementSize.ts","../src/utils/elementStyle.ts","../src/PPTXPreviewer.tsx"],"sourcesContent":["export { PPTXPreviewer } from './src/PPTXPreviewer';\nexport type { PPTXPreviewerProps, Slide, SlideElement } from './src/types';\n","import type { SlideElement } from '../types';\n\nexport function renderImage(element: SlideElement) {\n  const filterStr = [\n    element.filters?.grayscale ? `grayscale(${element.filters.grayscale})` : '',\n    element.filters?.opacity ? `opacity(${element.filters.opacity})` : '',\n    element.filters?.blur ? `blur(${element.filters.blur})` : ''\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n        borderRadius: element.clip?.shape === 'ellipse' ? '50%' : element.radius ? `${element.radius}px` : undefined,\n        filter: filterStr || undefined\n      }}\n    >\n      <img src={element.src || ''} alt='' style={{ width: '100%', height: '100%', objectFit: 'cover' }} />\n    </div>\n  );\n}\n","export const MIN_LINE_SIZE = 24;\n","import { MIN_LINE_SIZE } from '../constants';\nimport type { SlideElement } from '../types';\n\ntype LineElement = SlideElement & { start: [number, number]; end: [number, number] };\ntype LinePointType = '' | 'arrow' | 'dot';\n\nconst getLineDashArray = (width: number, style?: string) => {\n  if (style === 'dashed') return width <= 8 ? `${width * 5} ${width * 2.5}` : `${width * 5} ${width * 1.5}`;\n  if (style === 'dotted') return width <= 8 ? `${width * 1.8} ${width * 1.6}` : `${width * 1.5} ${width * 1.2}`;\n  return '0 0';\n};\n\nconst getLinePath = (element: LineElement) => {\n  const start = element.start.join(',');\n  const end = element.end.join(',');\n\n  if (element.broken) return `M${start} L${element.broken.join(',')} L${end}`;\n\n  if (element.broken2) {\n    const width = Math.abs(element.end[0] - element.start[0]);\n    const height = Math.abs(element.end[1] - element.start[1]);\n    if (width >= height) {\n      return `M${start} L${element.broken2[0]},${element.start[1]} L${element.broken2[0]},${element.end[1]} L${end}`;\n    }\n    return `M${start} L${element.start[0]},${element.broken2[1]} L${element.end[0]},${element.broken2[1]} L${end}`;\n  }\n\n  if (element.curve) return `M${start} Q${element.curve.join(',')} ${end}`;\n\n  if (element.cubic) {\n    const [c1, c2] = element.cubic;\n    return `M${start} C${c1.join(',')} ${c2.join(',')} ${end}`;\n  }\n\n  return `M${start} L${end}`;\n};\n\nfunction renderLineMarker(props: {\n  id: string;\n  position: 'start' | 'end';\n  type: 'arrow' | 'dot';\n  baseSize: number;\n  color?: string;\n}) {\n  const pathMap = {\n    dot: 'm0 5a5 5 0 1 0 10 0a5 5 0 1 0 -10 0z',\n    arrow: 'M0,0 L10,5 0,10 Z'\n  };\n  const rotateMap: Record<string, number> = {\n    'arrow-start': 180,\n    'arrow-end': 0\n  };\n  const size = props.baseSize < 2 ? 2 : props.baseSize;\n  const rotate = rotateMap[`${props.type}-${props.position}`] || 0;\n\n  return (\n    <marker\n      id={`${props.id}-${props.type}-${props.position}`}\n      markerUnits='userSpaceOnUse'\n      orient='auto'\n      markerWidth={size * 3}\n      markerHeight={size * 3}\n      refX={size * 1.5}\n      refY={size * 1.5}\n    >\n      <path d={pathMap[props.type]} fill={props.color} transform={`scale(${size * 0.3}, ${size * 0.3}) rotate(${rotate}, 5, 5)`} />\n    </marker>\n  );\n}\n\nexport function renderLine(element: SlideElement, markerId: string) {\n  if (!element.start || !element.end) return null;\n\n  const width = Math.max(Math.abs(element.start[0] - element.end[0]), MIN_LINE_SIZE);\n  const height = Math.max(Math.abs(element.start[1] - element.end[1]), MIN_LINE_SIZE);\n  const lineWidth = element.width ?? 1;\n  const dashArray = getLineDashArray(lineWidth, element.style);\n  const path = getLinePath(element as LineElement);\n\n  const points = element.points as [LinePointType, LinePointType] | undefined;\n  const startMarker = points?.[0] ? points[0] : undefined;\n  const endMarker = points?.[1] ? points[1] : undefined;\n\n  return (\n    <svg overflow='visible' width={width} height={height}>\n      <defs>\n        {startMarker && renderLineMarker({ id: markerId, position: 'start', type: startMarker, color: element.color, baseSize: lineWidth })}\n        {endMarker && renderLineMarker({ id: markerId, position: 'end', type: endMarker, color: element.color, baseSize: lineWidth })}\n      </defs>\n      <path\n        d={path}\n        stroke={element.color ?? '#000'}\n        strokeWidth={lineWidth}\n        strokeDasharray={dashArray}\n        fill='none'\n        markerStart={startMarker ? `url(#${markerId}-${startMarker}-start)` : undefined}\n        markerEnd={endMarker ? `url(#${markerId}-${endMarker}-end)` : undefined}\n      />\n    </svg>\n  );\n}\n","import type { SlideElement } from '../types';\n\nconst getOutlineDashArray = (outline?: SlideElement['outline']) => {\n  const style = outline?.style;\n  const width = outline?.width ?? 1;\n  if (style === 'dashed') return width <= 8 ? `${width * 5} ${width * 2.5}` : `${width * 5} ${width * 1.5}`;\n  if (style === 'dotted') return width <= 8 ? `${width * 1.8} ${width * 1.6}` : `${width * 1.5} ${width * 1.2}`;\n  return undefined;\n};\n\nexport function renderShape(element: SlideElement, patternId: string) {\n  const viewWidth = element.viewBox?.[0] ?? element.width ?? 0;\n  const viewHeight = element.viewBox?.[1] ?? element.height ?? 0;\n  const outlineDashArray = getOutlineDashArray(element.outline);\n  const fill = element.pattern ? `url(#${patternId})` : element.fill || 'transparent';\n\n  const text = element.text;\n  const verticalAlign = text?.align ?? 'middle';\n  const justifyContent = verticalAlign === 'top' ? 'flex-start' : verticalAlign === 'bottom' ? 'flex-end' : 'center';\n\n  return (\n    <div style={{ position: 'relative', width: '100%', height: '100%' }}>\n      <svg style={{ position: 'absolute', inset: 0 }} overflow='visible' width={element.width} height={element.height}>\n        {element.pattern && (\n          <defs>\n            <pattern\n              id={patternId}\n              patternUnits='userSpaceOnUse'\n              patternContentUnits='userSpaceOnUse'\n              width={viewWidth}\n              height={viewHeight}\n            >\n              <image href={element.pattern} width={viewWidth} height={viewHeight} preserveAspectRatio='xMidYMid slice' />\n            </pattern>\n          </defs>\n        )}\n        <g transform={`scale(${(element.width ?? 0) / viewWidth || 1}, ${(element.height ?? 0) / viewHeight || 1}) translate(0,0) matrix(1,0,0,1,0,0)`}>\n          <path\n            vectorEffect='non-scaling-stroke'\n            strokeLinecap='butt'\n            strokeMiterlimit={8}\n            d={element.path || ''}\n            fill={fill}\n            stroke={element.outline?.color}\n            strokeWidth={element.outline?.width}\n            strokeDasharray={outlineDashArray}\n          />\n        </g>\n      </svg>\n\n      {text?.content && (\n        <div\n          style={{\n            position: 'absolute',\n            inset: 0,\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent,\n            alignItems: 'stretch',\n            color: text.defaultColor,\n            fontFamily: text.defaultFontName || undefined,\n            lineHeight: text.lineHeight,\n            pointerEvents: 'none'\n          }}\n          dangerouslySetInnerHTML={{ __html: text.content }}\n        />\n      )}\n    </div>\n  );\n}\n","import { type CSSProperties } from 'react';\nimport type { SlideElement } from '../types';\n\ntype TableCellData = NonNullable<NonNullable<SlideElement['data']>[number][number]>;\ntype TableCell = {\n  key: string;\n  colSpan: number;\n  rowSpan: number;\n  text: string;\n  style: TableCellData['style'];\n};\n\nconst parseFontSize = (value?: string) => {\n  if (!value) return undefined;\n  const size = Number.parseFloat(value);\n  return Number.isFinite(size) ? `${size}px` : undefined;\n};\n\nconst normalizeFontName = (value?: string) => {\n  if (!value) return undefined;\n  return value.replace(/^\"+|\"+$/g, '');\n};\n\nconst tableColor = (value?: string) => {\n  if (!value) return undefined;\n  return value.startsWith('rgb') || value.startsWith('#') ? value : undefined;\n};\n\nconst isPlaceholderCell = (cell: TableCellData | undefined) => {\n  if (!cell) return false;\n  const colspan = cell.colspan ?? 1;\n  const rowspan = cell.rowspan ?? 1;\n  if (colspan !== 1 || rowspan !== 1) return false;\n\n  const style = cell.style;\n  const hasStyle = Boolean(style?.fontname) || Boolean(style?.fontsize) || Boolean(style?.color) || Boolean(style?.backcolor);\n  return (cell.text ?? '').trim() === '' && !hasStyle;\n};\n\nconst buildTableRows = (element: SlideElement) => {\n  const rows = element.data ?? [];\n  const colCount = element.colWidths?.length ?? 0;\n  const rowCells: TableCell[][] = [];\n  const skip = new Array(colCount).fill(0);\n\n  rows.forEach((row, rowIndex) => {\n    const cells: TableCell[] = [];\n    let colIndex = 0;\n    let cellIndex = 0;\n\n    while (colIndex < colCount) {\n      if (skip[colIndex] > 0) {\n        skip[colIndex] -= 1;\n        if (isPlaceholderCell(row[cellIndex])) cellIndex += 1;\n        colIndex += 1;\n        continue;\n      }\n\n      const cell = row[cellIndex];\n      if (!cell) break;\n      cellIndex += 1;\n\n      const colSpan = cell.colspan ?? 1;\n      const rowSpan = cell.rowspan ?? 1;\n\n      if (rowSpan > 1) {\n        for (let i = 0; i < colSpan; i += 1) {\n          skip[colIndex + i] = rowSpan - 1;\n        }\n      }\n\n      if (colSpan > 1) {\n        for (let i = 0; i < colSpan - 1; i += 1) {\n          if (isPlaceholderCell(row[cellIndex])) cellIndex += 1;\n        }\n      }\n\n      cells.push({\n        key: cell.id ?? `${rowIndex}-${colIndex}-${cellIndex}`,\n        colSpan,\n        rowSpan,\n        text: cell.text ?? '',\n        style: cell.style\n      });\n\n      colIndex += colSpan;\n    }\n\n    rowCells.push(cells);\n  });\n\n  return rowCells;\n};\n\nexport function renderTable(element: SlideElement) {\n  const colWidths = element.colWidths ?? [];\n  const rows = buildTableRows(element);\n  const rowCount = rows.length || 1;\n  const baseRowHeight = (element.height ?? 0) / rowCount;\n  const rowHeight = element.cellMinHeight ? Math.max(element.cellMinHeight, baseRowHeight) : baseRowHeight;\n\n  return (\n    <div style={{ width: '100%', height: '100%' }}>\n      <table\n        style={{\n          width: '100%',\n          height: '100%',\n          tableLayout: 'fixed',\n          borderCollapse: 'collapse',\n          border: element.outline ? `${element.outline.width ?? 1}px solid ${element.outline.color ?? '#000'}` : undefined\n        }}\n      >\n        {colWidths.length > 0 && (\n          <colgroup>\n            {colWidths.map((width, index) => (\n              <col key={`col-${index}`} style={{ width: `${width * 100}%` }} />\n            ))}\n          </colgroup>\n        )}\n        <tbody>\n          {rows.map((row, rowIndex) => (\n            <tr key={`row-${rowIndex}`} style={{ height: rowHeight }}>\n              {row.map((cell) => (\n                <td\n                  key={cell.key}\n                  colSpan={cell.colSpan}\n                  rowSpan={cell.rowSpan}\n                  style={{\n                    border: element.outline ? `${element.outline.width ?? 1}px solid ${element.outline.color ?? '#000'}` : '1px solid #ddd',\n                    background: tableColor(cell.style?.backcolor),\n                    padding: '6px 8px',\n                    textAlign: (cell.style?.align as CSSProperties['textAlign']) ?? 'left',\n                    color: tableColor(cell.style?.color),\n                    fontFamily: normalizeFontName(cell.style?.fontname),\n                    fontSize: parseFontSize(cell.style?.fontsize),\n                    verticalAlign: 'middle'\n                  }}\n                >\n                  {cell.text}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n","import { type CSSProperties } from 'react';\nimport type { SlideElement } from '../types';\n\nexport function renderText(element: SlideElement) {\n  const paragraphStyle =\n    element.paragraphSpace !== undefined\n      ? ({ ['--paragraphSpace' as string]: `${element.paragraphSpace}px` } as CSSProperties)\n      : undefined;\n\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        padding: 10,\n        lineHeight: element.lineHeight ?? 1.5,\n        letterSpacing: `${element.wordSpace ?? 0}px`,\n        wordBreak: 'break-word',\n        fontFamily: element.defaultFontName || 'sans-serif',\n        color: element.defaultColor,\n        writingMode: element.vertical ? 'vertical-rl' : undefined,\n        ...paragraphStyle\n      }}\n      dangerouslySetInnerHTML={{ __html: element.content || '' }}\n    />\n  );\n}\n","import type { SlideElement } from '../types';\nimport { renderImage } from './image';\nimport { renderLine } from './line';\nimport { renderShape } from './shape';\nimport { renderTable } from './table';\nimport { renderText } from './text';\n\nexport function renderElement(element: SlideElement, markerId: string) {\n  if (element.type === 'shape') return renderShape(element, `shape-${markerId}`);\n  if (element.type === 'line') return renderLine(element, markerId);\n  if (element.type === 'text') return renderText(element);\n  if (element.type === 'image') return renderImage(element);\n  if (element.type === 'table') return renderTable(element);\n  return null;\n}\n","import { MIN_LINE_SIZE } from '../constants';\nimport type { SlideElement } from '../types';\n\nexport function getElementSize(element: SlideElement): { width: number; height: number } {\n  if (element.type === 'line' && element.start && element.end) {\n    return {\n      width: Math.max(Math.abs(element.end[0] - element.start[0]), MIN_LINE_SIZE),\n      height: Math.max(Math.abs(element.end[1] - element.start[1]), MIN_LINE_SIZE)\n    };\n  }\n\n  return {\n    width: element.width ?? 0,\n    height: element.height ?? 0\n  };\n}\n","import type { SlideElement } from '../types';\n\nexport const getShadowFilter = (shadow?: SlideElement['shadow']) => {\n  if (!shadow) return undefined;\n  const h = shadow.h ?? 0;\n  const v = shadow.v ?? 0;\n  const blur = shadow.blur ?? 0;\n  const color = shadow.color ?? '#000';\n  return `drop-shadow(${h}px ${v}px ${blur}px ${color})`;\n};\n\nexport const getFlipTransform = (flipH?: boolean, flipV?: boolean) => {\n  const transforms = [flipH ? 'scaleX(-1)' : '', flipV ? 'scaleY(-1)' : '']\n    .filter(Boolean)\n    .join(' ');\n  return transforms || undefined;\n};\n","import { renderElement } from './renderers';\nimport type { PPTXPreviewerProps } from './types';\nimport { getElementSize } from './utils/elementSize';\nimport { getFlipTransform, getShadowFilter } from './utils/elementStyle';\n\nexport function PPTXPreviewer({ slide, className }: PPTXPreviewerProps) {\n  return (\n    <div\n      className={className}\n      style={{\n        position: 'relative',\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n        fontSize: 16,\n        lineHeight: 'normal'\n      }}\n    >\n      {slide.background?.color ? (\n        <div\n          style={{\n            position: 'absolute',\n            inset: 0,\n            backgroundColor: slide.background.color\n          }}\n        />\n      ) : null}\n\n      {(slide.elements ?? []).map((element, elementIndex) => {\n        const size = getElementSize(element);\n        const markerId = element.id ?? `line-${elementIndex}`;\n\n        return (\n          <div\n            key={element.id ?? elementIndex}\n            style={{\n              position: 'absolute',\n              left: element.left ?? 0,\n              top: element.top ?? 0,\n              width: size.width,\n              height: size.height\n            }}\n          >\n            <div\n              style={{\n                width: '100%',\n                height: '100%',\n                transform: element.rotate ? `rotate(${element.rotate}deg)` : undefined\n              }}\n            >\n              <div\n                style={{\n                  position: 'relative',\n                  width: '100%',\n                  height: '100%',\n                  opacity: element.opacity ?? 1,\n                  filter: getShadowFilter(element.shadow),\n                  transform: getFlipTransform(element.flipH, element.flipV),\n                  transformOrigin: 'center',\n                  color: element.defaultColor,\n                  fontFamily: element.defaultFontName\n                }}\n              >\n                {renderElement(element, markerId)}\n              </div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,422 @@
+// src/renderers/image.tsx
+import { jsx } from "react/jsx-runtime";
+function renderImage(element) {
+  const filterStr = [
+    element.filters?.grayscale ? `grayscale(${element.filters.grayscale})` : "",
+    element.filters?.opacity ? `opacity(${element.filters.opacity})` : "",
+    element.filters?.blur ? `blur(${element.filters.blur})` : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        borderRadius: element.clip?.shape === "ellipse" ? "50%" : element.radius ? `${element.radius}px` : void 0,
+        filter: filterStr || void 0
+      },
+      children: /* @__PURE__ */ jsx("img", { src: element.src || "", alt: "", style: { width: "100%", height: "100%", objectFit: "cover" } })
+    }
+  );
+}
+
+// src/constants.ts
+var MIN_LINE_SIZE = 24;
+
+// src/renderers/line.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var getLineDashArray = (width, style) => {
+  if (style === "dashed") return width <= 8 ? `${width * 5} ${width * 2.5}` : `${width * 5} ${width * 1.5}`;
+  if (style === "dotted") return width <= 8 ? `${width * 1.8} ${width * 1.6}` : `${width * 1.5} ${width * 1.2}`;
+  return "0 0";
+};
+var getLinePath = (element) => {
+  const start = element.start.join(",");
+  const end = element.end.join(",");
+  if (element.broken) return `M${start} L${element.broken.join(",")} L${end}`;
+  if (element.broken2) {
+    const width = Math.abs(element.end[0] - element.start[0]);
+    const height = Math.abs(element.end[1] - element.start[1]);
+    if (width >= height) {
+      return `M${start} L${element.broken2[0]},${element.start[1]} L${element.broken2[0]},${element.end[1]} L${end}`;
+    }
+    return `M${start} L${element.start[0]},${element.broken2[1]} L${element.end[0]},${element.broken2[1]} L${end}`;
+  }
+  if (element.curve) return `M${start} Q${element.curve.join(",")} ${end}`;
+  if (element.cubic) {
+    const [c1, c2] = element.cubic;
+    return `M${start} C${c1.join(",")} ${c2.join(",")} ${end}`;
+  }
+  return `M${start} L${end}`;
+};
+function renderLineMarker(props) {
+  const pathMap = {
+    dot: "m0 5a5 5 0 1 0 10 0a5 5 0 1 0 -10 0z",
+    arrow: "M0,0 L10,5 0,10 Z"
+  };
+  const rotateMap = {
+    "arrow-start": 180,
+    "arrow-end": 0
+  };
+  const size = props.baseSize < 2 ? 2 : props.baseSize;
+  const rotate = rotateMap[`${props.type}-${props.position}`] || 0;
+  return /* @__PURE__ */ jsx2(
+    "marker",
+    {
+      id: `${props.id}-${props.type}-${props.position}`,
+      markerUnits: "userSpaceOnUse",
+      orient: "auto",
+      markerWidth: size * 3,
+      markerHeight: size * 3,
+      refX: size * 1.5,
+      refY: size * 1.5,
+      children: /* @__PURE__ */ jsx2("path", { d: pathMap[props.type], fill: props.color, transform: `scale(${size * 0.3}, ${size * 0.3}) rotate(${rotate}, 5, 5)` })
+    }
+  );
+}
+function renderLine(element, markerId) {
+  if (!element.start || !element.end) return null;
+  const width = Math.max(Math.abs(element.start[0] - element.end[0]), MIN_LINE_SIZE);
+  const height = Math.max(Math.abs(element.start[1] - element.end[1]), MIN_LINE_SIZE);
+  const lineWidth = element.width ?? 1;
+  const dashArray = getLineDashArray(lineWidth, element.style);
+  const path = getLinePath(element);
+  const points = element.points;
+  const startMarker = points?.[0] ? points[0] : void 0;
+  const endMarker = points?.[1] ? points[1] : void 0;
+  return /* @__PURE__ */ jsxs("svg", { overflow: "visible", width, height, children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      startMarker && renderLineMarker({ id: markerId, position: "start", type: startMarker, color: element.color, baseSize: lineWidth }),
+      endMarker && renderLineMarker({ id: markerId, position: "end", type: endMarker, color: element.color, baseSize: lineWidth })
+    ] }),
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: path,
+        stroke: element.color ?? "#000",
+        strokeWidth: lineWidth,
+        strokeDasharray: dashArray,
+        fill: "none",
+        markerStart: startMarker ? `url(#${markerId}-${startMarker}-start)` : void 0,
+        markerEnd: endMarker ? `url(#${markerId}-${endMarker}-end)` : void 0
+      }
+    )
+  ] });
+}
+
+// src/renderers/shape.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var getOutlineDashArray = (outline) => {
+  const style = outline?.style;
+  const width = outline?.width ?? 1;
+  if (style === "dashed") return width <= 8 ? `${width * 5} ${width * 2.5}` : `${width * 5} ${width * 1.5}`;
+  if (style === "dotted") return width <= 8 ? `${width * 1.8} ${width * 1.6}` : `${width * 1.5} ${width * 1.2}`;
+  return void 0;
+};
+function renderShape(element, patternId) {
+  const viewWidth = element.viewBox?.[0] ?? element.width ?? 0;
+  const viewHeight = element.viewBox?.[1] ?? element.height ?? 0;
+  const outlineDashArray = getOutlineDashArray(element.outline);
+  const fill = element.pattern ? `url(#${patternId})` : element.fill || "transparent";
+  const text = element.text;
+  const verticalAlign = text?.align ?? "middle";
+  const justifyContent = verticalAlign === "top" ? "flex-start" : verticalAlign === "bottom" ? "flex-end" : "center";
+  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs2("svg", { style: { position: "absolute", inset: 0 }, overflow: "visible", width: element.width, height: element.height, children: [
+      element.pattern && /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsx3(
+        "pattern",
+        {
+          id: patternId,
+          patternUnits: "userSpaceOnUse",
+          patternContentUnits: "userSpaceOnUse",
+          width: viewWidth,
+          height: viewHeight,
+          children: /* @__PURE__ */ jsx3("image", { href: element.pattern, width: viewWidth, height: viewHeight, preserveAspectRatio: "xMidYMid slice" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx3("g", { transform: `scale(${(element.width ?? 0) / viewWidth || 1}, ${(element.height ?? 0) / viewHeight || 1}) translate(0,0) matrix(1,0,0,1,0,0)`, children: /* @__PURE__ */ jsx3(
+        "path",
+        {
+          vectorEffect: "non-scaling-stroke",
+          strokeLinecap: "butt",
+          strokeMiterlimit: 8,
+          d: element.path || "",
+          fill,
+          stroke: element.outline?.color,
+          strokeWidth: element.outline?.width,
+          strokeDasharray: outlineDashArray
+        }
+      ) })
+    ] }),
+    text?.content && /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent,
+          alignItems: "stretch",
+          color: text.defaultColor,
+          fontFamily: text.defaultFontName || void 0,
+          lineHeight: text.lineHeight,
+          pointerEvents: "none"
+        },
+        dangerouslySetInnerHTML: { __html: text.content }
+      }
+    )
+  ] });
+}
+
+// src/renderers/table.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var parseFontSize = (value) => {
+  if (!value) return void 0;
+  const size = Number.parseFloat(value);
+  return Number.isFinite(size) ? `${size}px` : void 0;
+};
+var normalizeFontName = (value) => {
+  if (!value) return void 0;
+  return value.replace(/^"+|"+$/g, "");
+};
+var tableColor = (value) => {
+  if (!value) return void 0;
+  return value.startsWith("rgb") || value.startsWith("#") ? value : void 0;
+};
+var isPlaceholderCell = (cell) => {
+  if (!cell) return false;
+  const colspan = cell.colspan ?? 1;
+  const rowspan = cell.rowspan ?? 1;
+  if (colspan !== 1 || rowspan !== 1) return false;
+  const style = cell.style;
+  const hasStyle = Boolean(style?.fontname) || Boolean(style?.fontsize) || Boolean(style?.color) || Boolean(style?.backcolor);
+  return (cell.text ?? "").trim() === "" && !hasStyle;
+};
+var buildTableRows = (element) => {
+  const rows = element.data ?? [];
+  const colCount = element.colWidths?.length ?? 0;
+  const rowCells = [];
+  const skip = new Array(colCount).fill(0);
+  rows.forEach((row, rowIndex) => {
+    const cells = [];
+    let colIndex = 0;
+    let cellIndex = 0;
+    while (colIndex < colCount) {
+      if (skip[colIndex] > 0) {
+        skip[colIndex] -= 1;
+        if (isPlaceholderCell(row[cellIndex])) cellIndex += 1;
+        colIndex += 1;
+        continue;
+      }
+      const cell = row[cellIndex];
+      if (!cell) break;
+      cellIndex += 1;
+      const colSpan = cell.colspan ?? 1;
+      const rowSpan = cell.rowspan ?? 1;
+      if (rowSpan > 1) {
+        for (let i = 0; i < colSpan; i += 1) {
+          skip[colIndex + i] = rowSpan - 1;
+        }
+      }
+      if (colSpan > 1) {
+        for (let i = 0; i < colSpan - 1; i += 1) {
+          if (isPlaceholderCell(row[cellIndex])) cellIndex += 1;
+        }
+      }
+      cells.push({
+        key: cell.id ?? `${rowIndex}-${colIndex}-${cellIndex}`,
+        colSpan,
+        rowSpan,
+        text: cell.text ?? "",
+        style: cell.style
+      });
+      colIndex += colSpan;
+    }
+    rowCells.push(cells);
+  });
+  return rowCells;
+};
+function renderTable(element) {
+  const colWidths = element.colWidths ?? [];
+  const rows = buildTableRows(element);
+  const rowCount = rows.length || 1;
+  const baseRowHeight = (element.height ?? 0) / rowCount;
+  const rowHeight = element.cellMinHeight ? Math.max(element.cellMinHeight, baseRowHeight) : baseRowHeight;
+  return /* @__PURE__ */ jsx4("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxs3(
+    "table",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        tableLayout: "fixed",
+        borderCollapse: "collapse",
+        border: element.outline ? `${element.outline.width ?? 1}px solid ${element.outline.color ?? "#000"}` : void 0
+      },
+      children: [
+        colWidths.length > 0 && /* @__PURE__ */ jsx4("colgroup", { children: colWidths.map((width, index) => /* @__PURE__ */ jsx4("col", { style: { width: `${width * 100}%` } }, `col-${index}`)) }),
+        /* @__PURE__ */ jsx4("tbody", { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx4("tr", { style: { height: rowHeight }, children: row.map((cell) => /* @__PURE__ */ jsx4(
+          "td",
+          {
+            colSpan: cell.colSpan,
+            rowSpan: cell.rowSpan,
+            style: {
+              border: element.outline ? `${element.outline.width ?? 1}px solid ${element.outline.color ?? "#000"}` : "1px solid #ddd",
+              background: tableColor(cell.style?.backcolor),
+              padding: "6px 8px",
+              textAlign: cell.style?.align ?? "left",
+              color: tableColor(cell.style?.color),
+              fontFamily: normalizeFontName(cell.style?.fontname),
+              fontSize: parseFontSize(cell.style?.fontsize),
+              verticalAlign: "middle"
+            },
+            children: cell.text
+          },
+          cell.key
+        )) }, `row-${rowIndex}`)) })
+      ]
+    }
+  ) });
+}
+
+// src/renderers/text.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function renderText(element) {
+  const paragraphStyle = element.paragraphSpace !== void 0 ? { ["--paragraphSpace"]: `${element.paragraphSpace}px` } : void 0;
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        padding: 10,
+        lineHeight: element.lineHeight ?? 1.5,
+        letterSpacing: `${element.wordSpace ?? 0}px`,
+        wordBreak: "break-word",
+        fontFamily: element.defaultFontName || "sans-serif",
+        color: element.defaultColor,
+        writingMode: element.vertical ? "vertical-rl" : void 0,
+        ...paragraphStyle
+      },
+      dangerouslySetInnerHTML: { __html: element.content || "" }
+    }
+  );
+}
+
+// src/renderers/index.tsx
+function renderElement(element, markerId) {
+  if (element.type === "shape") return renderShape(element, `shape-${markerId}`);
+  if (element.type === "line") return renderLine(element, markerId);
+  if (element.type === "text") return renderText(element);
+  if (element.type === "image") return renderImage(element);
+  if (element.type === "table") return renderTable(element);
+  return null;
+}
+
+// src/utils/elementSize.ts
+function getElementSize(element) {
+  if (element.type === "line" && element.start && element.end) {
+    return {
+      width: Math.max(Math.abs(element.end[0] - element.start[0]), MIN_LINE_SIZE),
+      height: Math.max(Math.abs(element.end[1] - element.start[1]), MIN_LINE_SIZE)
+    };
+  }
+  return {
+    width: element.width ?? 0,
+    height: element.height ?? 0
+  };
+}
+
+// src/utils/elementStyle.ts
+var getShadowFilter = (shadow) => {
+  if (!shadow) return void 0;
+  const h = shadow.h ?? 0;
+  const v = shadow.v ?? 0;
+  const blur = shadow.blur ?? 0;
+  const color = shadow.color ?? "#000";
+  return `drop-shadow(${h}px ${v}px ${blur}px ${color})`;
+};
+var getFlipTransform = (flipH, flipV) => {
+  const transforms = [flipH ? "scaleX(-1)" : "", flipV ? "scaleY(-1)" : ""].filter(Boolean).join(" ");
+  return transforms || void 0;
+};
+
+// src/PPTXPreviewer.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function PPTXPreviewer({ slide, className }) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        fontSize: 16,
+        lineHeight: "normal"
+      },
+      children: [
+        slide.background?.color ? /* @__PURE__ */ jsx6(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              backgroundColor: slide.background.color
+            }
+          }
+        ) : null,
+        (slide.elements ?? []).map((element, elementIndex) => {
+          const size = getElementSize(element);
+          const markerId = element.id ?? `line-${elementIndex}`;
+          return /* @__PURE__ */ jsx6(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: element.left ?? 0,
+                top: element.top ?? 0,
+                width: size.width,
+                height: size.height
+              },
+              children: /* @__PURE__ */ jsx6(
+                "div",
+                {
+                  style: {
+                    width: "100%",
+                    height: "100%",
+                    transform: element.rotate ? `rotate(${element.rotate}deg)` : void 0
+                  },
+                  children: /* @__PURE__ */ jsx6(
+                    "div",
+                    {
+                      style: {
+                        position: "relative",
+                        width: "100%",
+                        height: "100%",
+                        opacity: element.opacity ?? 1,
+                        filter: getShadowFilter(element.shadow),
+                        transform: getFlipTransform(element.flipH, element.flipV),
+                        transformOrigin: "center",
+                        color: element.defaultColor,
+                        fontFamily: element.defaultFontName
+                      },
+                      children: renderElement(element, markerId)
+                    }
+                  )
+                }
+              )
+            },
+            element.id ?? elementIndex
+          );
+        })
+      ]
+    }
+  );
+}
+export {
+  PPTXPreviewer
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/renderers/image.tsx","../src/constants.ts","../src/renderers/line.tsx","../src/renderers/shape.tsx","../src/renderers/table.tsx","../src/renderers/text.tsx","../src/renderers/index.tsx","../src/utils/elementSize.ts","../src/utils/elementStyle.ts","../src/PPTXPreviewer.tsx"],"sourcesContent":["import type { SlideElement } from '../types';\n\nexport function renderImage(element: SlideElement) {\n  const filterStr = [\n    element.filters?.grayscale ? `grayscale(${element.filters.grayscale})` : '',\n    element.filters?.opacity ? `opacity(${element.filters.opacity})` : '',\n    element.filters?.blur ? `blur(${element.filters.blur})` : ''\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n        borderRadius: element.clip?.shape === 'ellipse' ? '50%' : element.radius ? `${element.radius}px` : undefined,\n        filter: filterStr || undefined\n      }}\n    >\n      <img src={element.src || ''} alt='' style={{ width: '100%', height: '100%', objectFit: 'cover' }} />\n    </div>\n  );\n}\n","export const MIN_LINE_SIZE = 24;\n","import { MIN_LINE_SIZE } from '../constants';\nimport type { SlideElement } from '../types';\n\ntype LineElement = SlideElement & { start: [number, number]; end: [number, number] };\ntype LinePointType = '' | 'arrow' | 'dot';\n\nconst getLineDashArray = (width: number, style?: string) => {\n  if (style === 'dashed') return width <= 8 ? `${width * 5} ${width * 2.5}` : `${width * 5} ${width * 1.5}`;\n  if (style === 'dotted') return width <= 8 ? `${width * 1.8} ${width * 1.6}` : `${width * 1.5} ${width * 1.2}`;\n  return '0 0';\n};\n\nconst getLinePath = (element: LineElement) => {\n  const start = element.start.join(',');\n  const end = element.end.join(',');\n\n  if (element.broken) return `M${start} L${element.broken.join(',')} L${end}`;\n\n  if (element.broken2) {\n    const width = Math.abs(element.end[0] - element.start[0]);\n    const height = Math.abs(element.end[1] - element.start[1]);\n    if (width >= height) {\n      return `M${start} L${element.broken2[0]},${element.start[1]} L${element.broken2[0]},${element.end[1]} L${end}`;\n    }\n    return `M${start} L${element.start[0]},${element.broken2[1]} L${element.end[0]},${element.broken2[1]} L${end}`;\n  }\n\n  if (element.curve) return `M${start} Q${element.curve.join(',')} ${end}`;\n\n  if (element.cubic) {\n    const [c1, c2] = element.cubic;\n    return `M${start} C${c1.join(',')} ${c2.join(',')} ${end}`;\n  }\n\n  return `M${start} L${end}`;\n};\n\nfunction renderLineMarker(props: {\n  id: string;\n  position: 'start' | 'end';\n  type: 'arrow' | 'dot';\n  baseSize: number;\n  color?: string;\n}) {\n  const pathMap = {\n    dot: 'm0 5a5 5 0 1 0 10 0a5 5 0 1 0 -10 0z',\n    arrow: 'M0,0 L10,5 0,10 Z'\n  };\n  const rotateMap: Record<string, number> = {\n    'arrow-start': 180,\n    'arrow-end': 0\n  };\n  const size = props.baseSize < 2 ? 2 : props.baseSize;\n  const rotate = rotateMap[`${props.type}-${props.position}`] || 0;\n\n  return (\n    <marker\n      id={`${props.id}-${props.type}-${props.position}`}\n      markerUnits='userSpaceOnUse'\n      orient='auto'\n      markerWidth={size * 3}\n      markerHeight={size * 3}\n      refX={size * 1.5}\n      refY={size * 1.5}\n    >\n      <path d={pathMap[props.type]} fill={props.color} transform={`scale(${size * 0.3}, ${size * 0.3}) rotate(${rotate}, 5, 5)`} />\n    </marker>\n  );\n}\n\nexport function renderLine(element: SlideElement, markerId: string) {\n  if (!element.start || !element.end) return null;\n\n  const width = Math.max(Math.abs(element.start[0] - element.end[0]), MIN_LINE_SIZE);\n  const height = Math.max(Math.abs(element.start[1] - element.end[1]), MIN_LINE_SIZE);\n  const lineWidth = element.width ?? 1;\n  const dashArray = getLineDashArray(lineWidth, element.style);\n  const path = getLinePath(element as LineElement);\n\n  const points = element.points as [LinePointType, LinePointType] | undefined;\n  const startMarker = points?.[0] ? points[0] : undefined;\n  const endMarker = points?.[1] ? points[1] : undefined;\n\n  return (\n    <svg overflow='visible' width={width} height={height}>\n      <defs>\n        {startMarker && renderLineMarker({ id: markerId, position: 'start', type: startMarker, color: element.color, baseSize: lineWidth })}\n        {endMarker && renderLineMarker({ id: markerId, position: 'end', type: endMarker, color: element.color, baseSize: lineWidth })}\n      </defs>\n      <path\n        d={path}\n        stroke={element.color ?? '#000'}\n        strokeWidth={lineWidth}\n        strokeDasharray={dashArray}\n        fill='none'\n        markerStart={startMarker ? `url(#${markerId}-${startMarker}-start)` : undefined}\n        markerEnd={endMarker ? `url(#${markerId}-${endMarker}-end)` : undefined}\n      />\n    </svg>\n  );\n}\n","import type { SlideElement } from '../types';\n\nconst getOutlineDashArray = (outline?: SlideElement['outline']) => {\n  const style = outline?.style;\n  const width = outline?.width ?? 1;\n  if (style === 'dashed') return width <= 8 ? `${width * 5} ${width * 2.5}` : `${width * 5} ${width * 1.5}`;\n  if (style === 'dotted') return width <= 8 ? `${width * 1.8} ${width * 1.6}` : `${width * 1.5} ${width * 1.2}`;\n  return undefined;\n};\n\nexport function renderShape(element: SlideElement, patternId: string) {\n  const viewWidth = element.viewBox?.[0] ?? element.width ?? 0;\n  const viewHeight = element.viewBox?.[1] ?? element.height ?? 0;\n  const outlineDashArray = getOutlineDashArray(element.outline);\n  const fill = element.pattern ? `url(#${patternId})` : element.fill || 'transparent';\n\n  const text = element.text;\n  const verticalAlign = text?.align ?? 'middle';\n  const justifyContent = verticalAlign === 'top' ? 'flex-start' : verticalAlign === 'bottom' ? 'flex-end' : 'center';\n\n  return (\n    <div style={{ position: 'relative', width: '100%', height: '100%' }}>\n      <svg style={{ position: 'absolute', inset: 0 }} overflow='visible' width={element.width} height={element.height}>\n        {element.pattern && (\n          <defs>\n            <pattern\n              id={patternId}\n              patternUnits='userSpaceOnUse'\n              patternContentUnits='userSpaceOnUse'\n              width={viewWidth}\n              height={viewHeight}\n            >\n              <image href={element.pattern} width={viewWidth} height={viewHeight} preserveAspectRatio='xMidYMid slice' />\n            </pattern>\n          </defs>\n        )}\n        <g transform={`scale(${(element.width ?? 0) / viewWidth || 1}, ${(element.height ?? 0) / viewHeight || 1}) translate(0,0) matrix(1,0,0,1,0,0)`}>\n          <path\n            vectorEffect='non-scaling-stroke'\n            strokeLinecap='butt'\n            strokeMiterlimit={8}\n            d={element.path || ''}\n            fill={fill}\n            stroke={element.outline?.color}\n            strokeWidth={element.outline?.width}\n            strokeDasharray={outlineDashArray}\n          />\n        </g>\n      </svg>\n\n      {text?.content && (\n        <div\n          style={{\n            position: 'absolute',\n            inset: 0,\n            display: 'flex',\n            flexDirection: 'column',\n            justifyContent,\n            alignItems: 'stretch',\n            color: text.defaultColor,\n            fontFamily: text.defaultFontName || undefined,\n            lineHeight: text.lineHeight,\n            pointerEvents: 'none'\n          }}\n          dangerouslySetInnerHTML={{ __html: text.content }}\n        />\n      )}\n    </div>\n  );\n}\n","import { type CSSProperties } from 'react';\nimport type { SlideElement } from '../types';\n\ntype TableCellData = NonNullable<NonNullable<SlideElement['data']>[number][number]>;\ntype TableCell = {\n  key: string;\n  colSpan: number;\n  rowSpan: number;\n  text: string;\n  style: TableCellData['style'];\n};\n\nconst parseFontSize = (value?: string) => {\n  if (!value) return undefined;\n  const size = Number.parseFloat(value);\n  return Number.isFinite(size) ? `${size}px` : undefined;\n};\n\nconst normalizeFontName = (value?: string) => {\n  if (!value) return undefined;\n  return value.replace(/^\"+|\"+$/g, '');\n};\n\nconst tableColor = (value?: string) => {\n  if (!value) return undefined;\n  return value.startsWith('rgb') || value.startsWith('#') ? value : undefined;\n};\n\nconst isPlaceholderCell = (cell: TableCellData | undefined) => {\n  if (!cell) return false;\n  const colspan = cell.colspan ?? 1;\n  const rowspan = cell.rowspan ?? 1;\n  if (colspan !== 1 || rowspan !== 1) return false;\n\n  const style = cell.style;\n  const hasStyle = Boolean(style?.fontname) || Boolean(style?.fontsize) || Boolean(style?.color) || Boolean(style?.backcolor);\n  return (cell.text ?? '').trim() === '' && !hasStyle;\n};\n\nconst buildTableRows = (element: SlideElement) => {\n  const rows = element.data ?? [];\n  const colCount = element.colWidths?.length ?? 0;\n  const rowCells: TableCell[][] = [];\n  const skip = new Array(colCount).fill(0);\n\n  rows.forEach((row, rowIndex) => {\n    const cells: TableCell[] = [];\n    let colIndex = 0;\n    let cellIndex = 0;\n\n    while (colIndex < colCount) {\n      if (skip[colIndex] > 0) {\n        skip[colIndex] -= 1;\n        if (isPlaceholderCell(row[cellIndex])) cellIndex += 1;\n        colIndex += 1;\n        continue;\n      }\n\n      const cell = row[cellIndex];\n      if (!cell) break;\n      cellIndex += 1;\n\n      const colSpan = cell.colspan ?? 1;\n      const rowSpan = cell.rowspan ?? 1;\n\n      if (rowSpan > 1) {\n        for (let i = 0; i < colSpan; i += 1) {\n          skip[colIndex + i] = rowSpan - 1;\n        }\n      }\n\n      if (colSpan > 1) {\n        for (let i = 0; i < colSpan - 1; i += 1) {\n          if (isPlaceholderCell(row[cellIndex])) cellIndex += 1;\n        }\n      }\n\n      cells.push({\n        key: cell.id ?? `${rowIndex}-${colIndex}-${cellIndex}`,\n        colSpan,\n        rowSpan,\n        text: cell.text ?? '',\n        style: cell.style\n      });\n\n      colIndex += colSpan;\n    }\n\n    rowCells.push(cells);\n  });\n\n  return rowCells;\n};\n\nexport function renderTable(element: SlideElement) {\n  const colWidths = element.colWidths ?? [];\n  const rows = buildTableRows(element);\n  const rowCount = rows.length || 1;\n  const baseRowHeight = (element.height ?? 0) / rowCount;\n  const rowHeight = element.cellMinHeight ? Math.max(element.cellMinHeight, baseRowHeight) : baseRowHeight;\n\n  return (\n    <div style={{ width: '100%', height: '100%' }}>\n      <table\n        style={{\n          width: '100%',\n          height: '100%',\n          tableLayout: 'fixed',\n          borderCollapse: 'collapse',\n          border: element.outline ? `${element.outline.width ?? 1}px solid ${element.outline.color ?? '#000'}` : undefined\n        }}\n      >\n        {colWidths.length > 0 && (\n          <colgroup>\n            {colWidths.map((width, index) => (\n              <col key={`col-${index}`} style={{ width: `${width * 100}%` }} />\n            ))}\n          </colgroup>\n        )}\n        <tbody>\n          {rows.map((row, rowIndex) => (\n            <tr key={`row-${rowIndex}`} style={{ height: rowHeight }}>\n              {row.map((cell) => (\n                <td\n                  key={cell.key}\n                  colSpan={cell.colSpan}\n                  rowSpan={cell.rowSpan}\n                  style={{\n                    border: element.outline ? `${element.outline.width ?? 1}px solid ${element.outline.color ?? '#000'}` : '1px solid #ddd',\n                    background: tableColor(cell.style?.backcolor),\n                    padding: '6px 8px',\n                    textAlign: (cell.style?.align as CSSProperties['textAlign']) ?? 'left',\n                    color: tableColor(cell.style?.color),\n                    fontFamily: normalizeFontName(cell.style?.fontname),\n                    fontSize: parseFontSize(cell.style?.fontsize),\n                    verticalAlign: 'middle'\n                  }}\n                >\n                  {cell.text}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n","import { type CSSProperties } from 'react';\nimport type { SlideElement } from '../types';\n\nexport function renderText(element: SlideElement) {\n  const paragraphStyle =\n    element.paragraphSpace !== undefined\n      ? ({ ['--paragraphSpace' as string]: `${element.paragraphSpace}px` } as CSSProperties)\n      : undefined;\n\n  return (\n    <div\n      style={{\n        width: '100%',\n        height: '100%',\n        padding: 10,\n        lineHeight: element.lineHeight ?? 1.5,\n        letterSpacing: `${element.wordSpace ?? 0}px`,\n        wordBreak: 'break-word',\n        fontFamily: element.defaultFontName || 'sans-serif',\n        color: element.defaultColor,\n        writingMode: element.vertical ? 'vertical-rl' : undefined,\n        ...paragraphStyle\n      }}\n      dangerouslySetInnerHTML={{ __html: element.content || '' }}\n    />\n  );\n}\n","import type { SlideElement } from '../types';\nimport { renderImage } from './image';\nimport { renderLine } from './line';\nimport { renderShape } from './shape';\nimport { renderTable } from './table';\nimport { renderText } from './text';\n\nexport function renderElement(element: SlideElement, markerId: string) {\n  if (element.type === 'shape') return renderShape(element, `shape-${markerId}`);\n  if (element.type === 'line') return renderLine(element, markerId);\n  if (element.type === 'text') return renderText(element);\n  if (element.type === 'image') return renderImage(element);\n  if (element.type === 'table') return renderTable(element);\n  return null;\n}\n","import { MIN_LINE_SIZE } from '../constants';\nimport type { SlideElement } from '../types';\n\nexport function getElementSize(element: SlideElement): { width: number; height: number } {\n  if (element.type === 'line' && element.start && element.end) {\n    return {\n      width: Math.max(Math.abs(element.end[0] - element.start[0]), MIN_LINE_SIZE),\n      height: Math.max(Math.abs(element.end[1] - element.start[1]), MIN_LINE_SIZE)\n    };\n  }\n\n  return {\n    width: element.width ?? 0,\n    height: element.height ?? 0\n  };\n}\n","import type { SlideElement } from '../types';\n\nexport const getShadowFilter = (shadow?: SlideElement['shadow']) => {\n  if (!shadow) return undefined;\n  const h = shadow.h ?? 0;\n  const v = shadow.v ?? 0;\n  const blur = shadow.blur ?? 0;\n  const color = shadow.color ?? '#000';\n  return `drop-shadow(${h}px ${v}px ${blur}px ${color})`;\n};\n\nexport const getFlipTransform = (flipH?: boolean, flipV?: boolean) => {\n  const transforms = [flipH ? 'scaleX(-1)' : '', flipV ? 'scaleY(-1)' : '']\n    .filter(Boolean)\n    .join(' ');\n  return transforms || undefined;\n};\n","import { renderElement } from './renderers';\nimport type { PPTXPreviewerProps } from './types';\nimport { getElementSize } from './utils/elementSize';\nimport { getFlipTransform, getShadowFilter } from './utils/elementStyle';\n\nexport function PPTXPreviewer({ slide, className }: PPTXPreviewerProps) {\n  return (\n    <div\n      className={className}\n      style={{\n        position: 'relative',\n        width: '100%',\n        height: '100%',\n        overflow: 'hidden',\n        fontSize: 16,\n        lineHeight: 'normal'\n      }}\n    >\n      {slide.background?.color ? (\n        <div\n          style={{\n            position: 'absolute',\n            inset: 0,\n            backgroundColor: slide.background.color\n          }}\n        />\n      ) : null}\n\n      {(slide.elements ?? []).map((element, elementIndex) => {\n        const size = getElementSize(element);\n        const markerId = element.id ?? `line-${elementIndex}`;\n\n        return (\n          <div\n            key={element.id ?? elementIndex}\n            style={{\n              position: 'absolute',\n              left: element.left ?? 0,\n              top: element.top ?? 0,\n              width: size.width,\n              height: size.height\n            }}\n          >\n            <div\n              style={{\n                width: '100%',\n                height: '100%',\n                transform: element.rotate ? `rotate(${element.rotate}deg)` : undefined\n              }}\n            >\n              <div\n                style={{\n                  position: 'relative',\n                  width: '100%',\n                  height: '100%',\n                  opacity: element.opacity ?? 1,\n                  filter: getShadowFilter(element.shadow),\n                  transform: getFlipTransform(element.flipH, element.flipV),\n                  transformOrigin: 'center',\n                  color: element.defaultColor,\n                  fontFamily: element.defaultFontName\n                }}\n              >\n                {renderElement(element, markerId)}\n              </div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsx","jsxs","jsx","jsxs","jsx","jsx","jsxs"]}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "pptx-previewer",
+  "version": "0.1.0",
+  "description": "A React component to preview PPTX JSON slides in the browser.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "homepage": "https://json2pptx.henryge.com/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gezhiheng/json2ppt-editor/"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "prepublishOnly": "pnpm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
+  }
+}