ppt-dsl-renderer 1.1.0

package/dist/vue/renderer.css

@@ -0,0 +1 @@
+.ppt-text-content[data-v-c728acd4],.ppt-text-static[data-v-c728acd4]{width:100%;box-sizing:border-box}.ppt-text-content[data-v-c728acd4]{display:flex;flex-direction:column;height:100%;position:relative;overflow-wrap:break-word;word-break:normal;white-space:normal}.ppt-text-editable[data-v-c728acd4]{-webkit-user-select:text;user-select:text}.ppt-text-static[data-v-c728acd4]{font-size:16px;position:relative}.ppt-text-static[data-v-c728acd4] p,.ppt-text-static[data-v-c728acd4] h1,.ppt-text-static[data-v-c728acd4] h2,.ppt-text-static[data-v-c728acd4] h3,.ppt-text-static[data-v-c728acd4] h4,.ppt-text-static[data-v-c728acd4] h5,.ppt-text-static[data-v-c728acd4] ol,.ppt-text-static[data-v-c728acd4] ul,.ppt-text-static[data-v-c728acd4] li{margin:0}.ppt-text-static[data-v-c728acd4] ol,.ppt-text-static[data-v-c728acd4] ul{padding-inline-start:1.25em}.ppt-text-static[data-v-c728acd4] li[style*="text-align: center"],.ppt-text-static[data-v-c728acd4] li[style*="text-align: right"]{list-style-position:inside}.ppt-text-static[data-v-c728acd4] li[style*="text-align: center"]>p,.ppt-text-static[data-v-c728acd4] li[style*="text-align: right"]>p{display:inline}.ppt-text-static-fixed[data-v-c728acd4]{display:flex;flex-direction:column;height:100%;justify-content:inherit}.ppt-image-content[data-v-bb8ba6cb]{position:relative;width:100%;height:100%;box-sizing:border-box}.ppt-image-content img[data-v-bb8ba6cb]{width:100%;height:100%;pointer-events:none}.ppt-image-mask[data-v-bb8ba6cb]{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ppt-shape-content[data-v-bde892d3],.ppt-shape-content svg[data-v-bde892d3],.ppt-shape-text[data-v-bde892d3]{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.ppt-shape-text[data-v-bde892d3]{display:flex;justify-content:center;box-sizing:border-box;text-align:center;pointer-events:none}.ppt-shape-text[data-v-bde892d3] p,.ppt-shape-text[data-v-bde892d3] h1,.ppt-shape-text[data-v-bde892d3] h2,.ppt-shape-text[data-v-bde892d3] h3,.ppt-shape-text[data-v-bde892d3] h4,.ppt-shape-text[data-v-bde892d3] h5{margin:0}.ppt-shape-text-static[data-v-bde892d3]{width:100%}.ppt-shape-text-static[data-v-bde892d3] ol,.ppt-shape-text-static[data-v-bde892d3] ul,.ppt-shape-text-static[data-v-bde892d3] li{margin:0}.ppt-shape-text-static[data-v-bde892d3] ol,.ppt-shape-text-static[data-v-bde892d3] ul{padding-inline-start:1.25em}.ppt-shape-text-editable[data-v-bde892d3]{pointer-events:auto;-webkit-user-select:text;user-select:text}.ppt-shape-text-static[data-v-bde892d3] li[style*="text-align: center"],.ppt-shape-text-static[data-v-bde892d3] li[style*="text-align: right"]{list-style-position:inside}.ppt-shape-text-static[data-v-bde892d3] li[style*="text-align: center"]>p,.ppt-shape-text-static[data-v-bde892d3] li[style*="text-align: right"]>p{display:inline}.ppt-line-content[data-v-029177ed]{width:100%;height:100%;overflow:visible}.ppt-chart-content[data-v-d0925046]{width:100%;height:100%}.ppt-table-content[data-v-b7c947a1]{width:100%;height:100%;border-collapse:collapse;table-layout:fixed}.ppt-table-content td[data-v-b7c947a1]{padding:6px 10px;border:inherit;box-sizing:border-box;outline:0}.ppt-table-cell-editable[data-v-b7c947a1]{-webkit-user-select:text;user-select:text}.ppt-latex-content[data-v-bc1283bd]{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#333;font:20px Georgia,serif}.ppt-latex-content svg[data-v-bc1283bd]{width:100%;height:100%}.ppt-video-content[data-v-51f57e49]{width:100%;height:100%;background:#111}.ppt-video-content img[data-v-51f57e49]{width:100%;height:100%;object-fit:contain}.ppt-audio-content[data-v-100cc51b]{display:flex;align-items:center;gap:8px;width:100%;height:100%;padding:8px;box-sizing:border-box;border:1px solid #e2e5ec;border-radius:8px;background:#fff}.ppt-audio-icon[data-v-100cc51b]{font-size:26px;font-weight:700}.ppt-audio-content audio[data-v-100cc51b]{width:calc(100% - 36px);height:32px;pointer-events:none}.ppt-element[data-v-4031d518]{position:absolute;transform-origin:center;-webkit-user-select:none;user-select:none;color:#272931;font-family:PingFang SC,Microsoft YaHei,sans-serif}.ppt-slide[data-v-a6a99631]{position:relative;overflow:hidden;isolation:isolate;color:#272931;font-family:PingFang SC,Microsoft YaHei,sans-serif}

package/dist/vue/renderer.js

@@ -0,0 +1,577 @@
+import { defineComponent as g, computed as f, openBlock as r, createElementBlock as a, normalizeClass as x, normalizeStyle as v, renderSlot as b, createElementVNode as _, createCommentVNode as T, getCurrentInstance as z, Fragment as S, renderList as E, ref as j, inject as P, watch as V, onMounted as D, onBeforeUnmount as O, createTextVNode as Y, toDisplayString as C, pushScopeId as q, popScopeId as G, createBlock as H, resolveDynamicComponent as X, createSlots as Z, withCtx as I, normalizeProps as M, guardReactiveProps as L } from "vue";
+import R from "dompurify";
+import * as J from "echarts";
+const A = (o) => ({
+  height: Math.max(Math.abs(o.end[1] - o.start[1]), 24),
+  left: o.left,
+  rotate: 0,
+  top: o.top,
+  width: Math.max(Math.abs(o.end[0] - o.start[0]), 24)
+}), K = (o) => o.type === "line" ? A(o) : {
+  height: o.height || 40,
+  left: o.left,
+  rotate: o.rotate || 0,
+  top: o.top,
+  width: o.width || 120
+}, U = (o, e, s, i = 1) => {
+  var c, m;
+  const t = o.background, l = t == null ? void 0 : t.gradient, n = l == null ? void 0 : l.colors.map((u) => `${u.color} ${u.pos}%`).join(", ");
+  let d;
+  return (t == null ? void 0 : t.type) === "gradient" && n ? d = (l == null ? void 0 : l.type) === "radial" ? `radial-gradient(${n})` : `linear-gradient(${(l == null ? void 0 : l.rotate) || 0}deg, ${n})` : (t == null ? void 0 : t.type) === "image" && ((c = t.image) != null && c.src) && (d = `url(${JSON.stringify(t.image.src)})`), {
+    backgroundColor: (t == null ? void 0 : t.color) || "#fff",
+    backgroundImage: d,
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: ((m = t == null ? void 0 : t.image) == null ? void 0 : m.size) || "cover",
+    height: `${s}px`,
+    transform: `scale(${i})`,
+    transformOrigin: "top left",
+    width: `${e}px`
+  };
+};
+function B(o) {
+  const e = "p, h1, h2, h3, h4, h5, h6, li";
+  for (const s of o.querySelectorAll(e)) {
+    if (s.style.fontSize || s.querySelector(e))
+      continue;
+    const i = o.ownerDocument.createTreeWalker(s, 4);
+    let t = 1 / 0;
+    for (let l = i.nextNode(); l; l = i.nextNode()) {
+      if (!l.textContent.trim())
+        continue;
+      let n = l.parentElement;
+      for (; n !== s && !n.style.fontSize; )
+        n = n.parentElement;
+      const d = n === s ? "" : n.style.fontSize;
+      if (!/^\d*\.?\d+px$/.test(d)) {
+        t = 1 / 0;
+        break;
+      }
+      t = Math.min(t, Number.parseFloat(d));
+    }
+    Number.isFinite(t) && (s.style.fontSize = `${t}px`);
+  }
+}
+const Q = ["innerHTML"], ee = /* @__PURE__ */ g({
+  __name: "TextElement",
+  props: {
+    element: {}
+  },
+  setup(o) {
+    const e = o, s = f(() => {
+      const t = document.createElement("div");
+      return t.innerHTML = R.sanitize(e.element.content), B(t), t.querySelectorAll('[style*="font-weight"]').forEach((l) => {
+        const n = Number.parseInt(l.style.fontWeight, 10);
+        n >= 550 && n < 700 && (l.style.fontWeight = "700");
+      }), t.innerHTML;
+    }), i = f(() => ({
+      background: e.element.fill || "transparent",
+      color: e.element.defaultColor || "#333333",
+      fontFamily: e.element.defaultFontName || "Microsoft YaHei",
+      letterSpacing: `${e.element.wordSpace || 0}px`,
+      lineHeight: e.element.lineHeight || 1.4,
+      padding: (e.element.inset || [0, 0, 0, 0]).map((t) => `${t}px`).join(" "),
+      justifyContent: e.element.vAlign === "bottom" ? "flex-end" : e.element.vAlign === "middle" ? "center" : "flex-start",
+      writingMode: e.element.vertical ? "vertical-rl" : "horizontal-tb"
+    }));
+    return (t, l) => (r(), a("div", {
+      class: x(["ppt-text-content", { "ppt-text-editable": t.$slots["text-editor"] }]),
+      style: v(i.value)
+    }, [
+      b(t.$slots, "text-editor", {
+        element: t.element,
+        content: t.element.content
+      }, () => [
+        _("div", {
+          class: x(["ppt-text-static", { "ppt-text-static-fixed": t.element.fixedHeight }]),
+          innerHTML: s.value
+        }, null, 10, Q)
+      ], !0)
+    ], 6));
+  }
+});
+const $ = (o, e) => {
+  const s = o.__vccOpts || o;
+  for (const [i, t] of e)
+    s[i] = t;
+  return s;
+}, te = /* @__PURE__ */ $(ee, [["__scopeId", "data-v-c728acd4"]]), ne = ["src"], le = /* @__PURE__ */ g({
+  __name: "ImageElement",
+  props: {
+    element: {}
+  },
+  setup(o) {
+    const e = o, s = f(() => {
+      var l;
+      return {
+        border: (l = e.element.outline) != null && l.width ? `${e.element.outline.width}px ${e.element.outline.style || "solid"} ${e.element.outline.color || "#000"}` : "none",
+        borderRadius: `${e.element.radius || 0}px`,
+        boxShadow: e.element.shadow ? `${e.element.shadow.h}px ${e.element.shadow.v}px ${e.element.shadow.blur}px ${e.element.shadow.color}` : void 0,
+        filter: Object.entries(e.element.filters || {}).map(([n, d]) => `${n}(${d})`).join(" "),
+        // 图片只在 DSL 明确配置裁剪或圆角时限制溢出，不自行补裁剪行为。
+        overflow: e.element.clip || e.element.radius ? "hidden" : void 0,
+        transform: `scale(${e.element.flipH ? -1 : 1}, ${e.element.flipV ? -1 : 1})`
+      };
+    }), i = f(() => {
+      var m;
+      const [[l, n], [d, c]] = ((m = e.element.clip) == null ? void 0 : m.range) || [[0, 0], [1, 1]];
+      return { height: c - n, left: l, top: n, width: d - l };
+    }), t = f(() => ({
+      height: e.element.clip ? `${100 / i.value.height}%` : "100%",
+      left: e.element.clip ? `${-i.value.left / i.value.width * 100}%` : "0",
+      objectFit: e.element.fit || "cover",
+      position: e.element.clip ? "absolute" : "static",
+      top: e.element.clip ? `${-i.value.top / i.value.height * 100}%` : "0",
+      width: e.element.clip ? `${100 / i.value.width}%` : "100%"
+    }));
+    return (l, n) => (r(), a("div", {
+      class: "ppt-image-content",
+      style: v(s.value)
+    }, [
+      _("img", {
+        src: l.element.src,
+        style: v(t.value),
+        alt: "",
+        draggable: "false"
+      }, null, 12, ne),
+      l.element.colorMask ? (r(), a("span", {
+        key: 0,
+        class: "ppt-image-mask",
+        style: v({ background: l.element.colorMask })
+      }, null, 4)) : T("", !0)
+    ], 4));
+  }
+});
+const oe = /* @__PURE__ */ $(le, [["__scopeId", "data-v-bb8ba6cb"]]), se = { class: "ppt-shape-content" }, re = ["viewBox"], ae = ["offset", "stop-color"], ie = ["gradient-transform"], de = ["offset", "stop-color"], pe = ["d", "fill", "stroke", "stroke-dasharray", "stroke-width"], ce = ["innerHTML"], me = /* @__PURE__ */ g({
+  __name: "ShapeElement",
+  props: {
+    element: {}
+  },
+  setup(o) {
+    const e = o, s = `ppt-gradient-${z().uid}`, i = f(() => {
+      var d;
+      const n = document.createElement("div");
+      return n.innerHTML = R.sanitize(((d = e.element.text) == null ? void 0 : d.content) || ""), B(n), n.innerHTML;
+    }), t = f(() => ({
+      filter: e.element.shadow ? `drop-shadow(${e.element.shadow.h}px ${e.element.shadow.v}px ${e.element.shadow.blur}px ${e.element.shadow.color})` : void 0,
+      transform: `scale(${e.element.flipH ? -1 : 1}, ${e.element.flipV ? -1 : 1})`,
+      transformOrigin: "center"
+    })), l = f(() => {
+      var n, d, c, m, u, p;
+      return {
+        alignItems: ((n = e.element.text) == null ? void 0 : n.align) === "top" ? "flex-start" : ((d = e.element.text) == null ? void 0 : d.align) === "bottom" ? "flex-end" : "center",
+        color: ((c = e.element.text) == null ? void 0 : c.defaultColor) || "#333",
+        fontFamily: ((m = e.element.text) == null ? void 0 : m.defaultFontName) || "Microsoft YaHei",
+        lineHeight: ((u = e.element.text) == null ? void 0 : u.lineHeight) || 1.4,
+        padding: (((p = e.element.text) == null ? void 0 : p.inset) || [8, 8, 8, 8]).map((y) => `${y}px`).join(" ")
+      };
+    });
+    return (n, d) => {
+      var c, m, u, p, y;
+      return r(), a("div", se, [
+        (r(), a("svg", {
+          style: v(t.value),
+          viewBox: `0 0 ${n.element.viewBox[0]} ${n.element.viewBox[1]}`,
+          overflow: "visible",
+          preserveAspectRatio: "none"
+        }, [
+          _("defs", null, [
+            ((c = n.element.gradient) == null ? void 0 : c.type) === "radial" ? (r(), a("radialGradient", {
+              key: 0,
+              id: s
+            }, [
+              (r(!0), a(S, null, E(n.element.gradient.colors, (h) => (r(), a("stop", {
+                key: h.pos,
+                offset: `${h.pos}%`,
+                "stop-color": h.color
+              }, null, 8, ae))), 128))
+            ])) : n.element.gradient ? (r(), a("linearGradient", {
+              key: 1,
+              id: s,
+              "gradient-transform": `rotate(${n.element.gradient.rotate || 0} .5 .5)`,
+              x1: "0",
+              y1: "0",
+              x2: "1",
+              y2: "0"
+            }, [
+              (r(!0), a(S, null, E(n.element.gradient.colors, (h) => (r(), a("stop", {
+                key: h.pos,
+                offset: `${h.pos}%`,
+                "stop-color": h.color
+              }, null, 8, de))), 128))
+            ], 8, ie)) : T("", !0)
+          ]),
+          _("path", {
+            d: n.element.path,
+            fill: n.element.gradient ? `url(#${s})` : n.element.fill || "transparent",
+            stroke: ((m = n.element.outline) == null ? void 0 : m.color) || "transparent",
+            "stroke-dasharray": ((u = n.element.outline) == null ? void 0 : u.style) === "dashed" ? "8 5" : ((p = n.element.outline) == null ? void 0 : p.style) === "dotted" ? "2 4" : void 0,
+            "stroke-width": ((y = n.element.outline) == null ? void 0 : y.width) || 0,
+            "vector-effect": "non-scaling-stroke"
+          }, null, 8, pe)
+        ], 12, re)),
+        n.element.text ? (r(), a("div", {
+          key: 0,
+          class: x(["ppt-shape-text", { "ppt-shape-text-editable": n.$slots["shape-text-editor"] }]),
+          style: v(l.value)
+        }, [
+          b(n.$slots, "shape-text-editor", {
+            element: n.element,
+            content: n.element.text.content
+          }, () => [
+            _("div", {
+              class: "ppt-shape-text-static",
+              innerHTML: i.value
+            }, null, 8, ce)
+          ], !0)
+        ], 6)) : T("", !0)
+      ]);
+    };
+  }
+});
+const ue = /* @__PURE__ */ $(me, [["__scopeId", "data-v-bde892d3"]]), he = ["height", "width"], _e = ["fill"], fe = ["fill"], ye = ["fill"], ve = ["fill"], ge = ["x1", "y1", "x2", "y2", "stroke", "stroke-dasharray", "stroke-width", "marker-start", "marker-end"], $e = /* @__PURE__ */ g({
+  __name: "LineElement",
+  props: {
+    element: {}
+  },
+  setup(o) {
+    const e = o, s = z().uid, i = `ppt-line-start-${s}`, t = `ppt-line-arrow-${s}`, l = f(() => A(e.element));
+    return (n, d) => {
+      var c, m, u, p;
+      return r(), a("svg", {
+        class: "ppt-line-content",
+        height: l.value.height,
+        width: l.value.width
+      }, [
+        _("defs", null, [
+          _("marker", {
+            id: i,
+            markerWidth: "8",
+            markerHeight: "8",
+            refX: "1",
+            refY: "4",
+            orient: "auto-start-reverse"
+          }, [
+            ((c = n.element.points) == null ? void 0 : c[0]) === "dot" ? (r(), a("circle", {
+              key: 0,
+              cx: "4",
+              cy: "4",
+              r: "3",
+              fill: n.element.color
+            }, null, 8, _e)) : (r(), a("path", {
+              key: 1,
+              d: "M 0 4 L 8 0 L 8 8 Z",
+              fill: n.element.color
+            }, null, 8, fe))
+          ]),
+          _("marker", {
+            id: t,
+            markerWidth: "8",
+            markerHeight: "8",
+            refX: "7",
+            refY: "4",
+            orient: "auto"
+          }, [
+            ((m = n.element.points) == null ? void 0 : m[1]) === "dot" ? (r(), a("circle", {
+              key: 0,
+              cx: "4",
+              cy: "4",
+              r: "3",
+              fill: n.element.color
+            }, null, 8, ye)) : (r(), a("path", {
+              key: 1,
+              d: "M 0 0 L 8 4 L 0 8 Z",
+              fill: n.element.color
+            }, null, 8, ve))
+          ])
+        ]),
+        _("line", {
+          x1: n.element.start[0],
+          y1: n.element.start[1],
+          x2: n.element.end[0],
+          y2: n.element.end[1],
+          stroke: n.element.color,
+          "stroke-dasharray": n.element.style === "dashed" ? "8 5" : n.element.style === "dotted" ? "2 4" : void 0,
+          "stroke-width": n.element.width || 2,
+          "marker-start": (u = n.element.points) != null && u[0] ? `url(#${i})` : void 0,
+          "marker-end": (p = n.element.points) != null && p[1] ? `url(#${t})` : void 0
+        }, null, 8, ge)
+      ], 8, he);
+    };
+  }
+});
+const be = /* @__PURE__ */ $($e, [["__scopeId", "data-v-029177ed"]]), ke = Symbol("ppt-render-tasks"), we = /* @__PURE__ */ g({
+  __name: "ChartElement",
+  props: {
+    element: {}
+  },
+  setup(o) {
+    const e = o, s = j(), i = P(ke, void 0);
+    let t, l, n = !1, d = !1;
+    i && i.push(new Promise((p) => {
+      l = p;
+    }));
+    const c = f(() => {
+      var p;
+      return {
+        background: e.element.fill || "transparent",
+        border: (p = e.element.outline) != null && p.width ? `${e.element.outline.width}px ${e.element.outline.style || "solid"} ${e.element.outline.color || "#d9dce6"}` : "none",
+        boxSizing: "border-box"
+      };
+    }), m = () => e.element.data.legends.map((p, y) => {
+      var k, w;
+      const h = e.element.data.series[y] || [];
+      return ["pie", "ring"].includes(e.element.chartType) ? {
+        data: e.element.data.labels.map((N, W) => ({ name: N, value: h[W] || 0 })),
+        name: p,
+        radius: e.element.chartType === "ring" ? ["50%", "72%"] : "66%",
+        type: "pie"
+      } : e.element.chartType === "radar" ? { data: [{ name: p, value: h }], name: p, type: "radar" } : {
+        areaStyle: e.element.chartType === "area" ? {} : void 0,
+        data: h,
+        name: p,
+        smooth: (k = e.element.options) == null ? void 0 : k.lineSmooth,
+        stack: (w = e.element.options) != null && w.stack ? "total" : void 0,
+        type: e.element.chartType === "column" || e.element.chartType === "bar" ? "bar" : e.element.chartType === "scatter" ? "scatter" : "line"
+      };
+    }), u = () => {
+      if (!n || d || !s.value)
+        return;
+      t ? t.resize() : (t = J.init(s.value), l && t.on("finished", l));
+      const p = e.element.chartType === "bar";
+      t.setOption({
+        animation: !1,
+        color: e.element.themeColors,
+        grid: { bottom: 30, containLabel: !0, left: 24, right: 18, top: 36 },
+        legend: { show: e.element.data.legends.length > 1, textStyle: { color: e.element.textColor } },
+        radar: e.element.chartType === "radar" ? { indicator: e.element.data.labels.map((y) => ({ name: y })) } : void 0,
+        series: m(),
+        tooltip: { trigger: "axis" },
+        xAxis: ["pie", "ring", "radar"].includes(e.element.chartType) ? void 0 : {
+          data: p ? void 0 : e.element.data.labels,
+          splitLine: { lineStyle: { color: e.element.lineColor || "#e6e8ef" } },
+          type: p ? "value" : "category"
+        },
+        yAxis: ["pie", "ring", "radar"].includes(e.element.chartType) ? void 0 : {
+          data: p ? e.element.data.labels : void 0,
+          splitLine: { lineStyle: { color: e.element.lineColor || "#e6e8ef" } },
+          type: p ? "category" : "value"
+        }
+      }, !0);
+    };
+    return V(() => e.element, u, { deep: !0, flush: "post" }), D(async () => {
+      await document.fonts.ready, n = !0, u();
+    }), O(() => {
+      d = !0, t == null || t.dispose(), l == null || l();
+    }), (p, y) => (r(), a("div", {
+      ref_key: "chartRoot",
+      ref: s,
+      class: "ppt-chart-content",
+      style: v(c.value)
+    }, null, 4));
+  }
+});
+const xe = /* @__PURE__ */ $(we, [["__scopeId", "data-v-d0925046"]]), Se = ["colspan", "rowspan"], Ee = /* @__PURE__ */ g({
+  __name: "TableElement",
+  props: {
+    element: {}
+  },
+  setup(o) {
+    const e = o, s = f(() => {
+      var t, l, n, d;
+      return {
+        background: e.element.fill || "#fff",
+        borderColor: ((t = e.element.outline) == null ? void 0 : t.color) || "#d9dce6",
+        borderStyle: ((l = e.element.outline) == null ? void 0 : l.width) === 0 ? "none" : ((n = e.element.outline) == null ? void 0 : n.style) || "solid",
+        borderWidth: `${((d = e.element.outline) == null ? void 0 : d.width) ?? 1}px`
+      };
+    }), i = (t, l) => {
+      var n, d, c, m, u, p, y, h, k, w;
+      return {
+        background: ((n = t.style) == null ? void 0 : n.backcolor) || "transparent",
+        color: ((d = t.style) == null ? void 0 : d.color) || "#333",
+        fontFamily: (c = t.style) == null ? void 0 : c.fontname,
+        fontSize: ((m = t.style) == null ? void 0 : m.fontsize) || "16px",
+        fontStyle: (u = t.style) != null && u.em ? "italic" : "normal",
+        fontWeight: (p = t.style) != null && p.bold ? 600 : 400,
+        height: `${e.element.cellMinHeight || 36}px`,
+        textAlign: ((y = t.style) == null ? void 0 : y.align) || "left",
+        verticalAlign: ((h = t.style) == null ? void 0 : h.vAlign) || "middle",
+        width: `${(((k = e.element.colWidths) == null ? void 0 : k[l]) || 1 / Math.max(1, ((w = e.element.data[0]) == null ? void 0 : w.length) || 1)) * 100}%`
+      };
+    };
+    return (t, l) => (r(), a("table", {
+      class: "ppt-table-content",
+      style: v(s.value)
+    }, [
+      _("tbody", null, [
+        (r(!0), a(S, null, E(t.element.data, (n, d) => (r(), a("tr", { key: d }, [
+          (r(!0), a(S, null, E(n, (c, m) => (r(), a("td", {
+            key: c.id,
+            colspan: c.colspan || 1,
+            rowspan: c.rowspan || 1,
+            class: x({ "ppt-table-cell-editable": t.$slots["table-cell-editor"] }),
+            style: v(i(c, m))
+          }, [
+            b(t.$slots, "table-cell-editor", {
+              element: t.element,
+              cell: c,
+              rowIndex: d,
+              colIndex: m
+            }, () => [
+              Y(C(c.text), 1)
+            ], !0)
+          ], 14, Se))), 128))
+        ]))), 128))
+      ])
+    ], 4));
+  }
+});
+const Te = /* @__PURE__ */ $(Ee, [["__scopeId", "data-v-b7c947a1"]]), Ie = { class: "ppt-latex-content" }, Me = ["viewBox"], Le = ["d", "fill", "stroke", "stroke-width"], ze = { key: 1 }, Ce = /* @__PURE__ */ g({
+  __name: "LatexElement",
+  props: {
+    element: {}
+  },
+  setup(o) {
+    return (e, s) => (r(), a("div", Ie, [
+      e.element.path && e.element.viewBox ? (r(), a("svg", {
+        key: 0,
+        viewBox: `0 0 ${e.element.viewBox[0]} ${e.element.viewBox[1]}`
+      }, [
+        _("path", {
+          d: e.element.path,
+          fill: e.element.color || "#333",
+          stroke: e.element.color || "#333",
+          "stroke-width": e.element.strokeWidth || 0
+        }, null, 8, Le)
+      ], 8, Me)) : (r(), a("span", ze, C(e.element.latex), 1))
+    ]));
+  }
+});
+const He = /* @__PURE__ */ $(Ce, [["__scopeId", "data-v-bc1283bd"]]), Re = { class: "ppt-video-content" }, Ae = ["src"], Be = /* @__PURE__ */ g({
+  __name: "VideoElement",
+  props: {
+    element: {}
+  },
+  setup(o) {
+    return (e, s) => (r(), a("div", Re, [
+      e.element.poster ? (r(), a("img", {
+        key: 0,
+        src: e.element.poster,
+        alt: ""
+      }, null, 8, Ae)) : T("", !0)
+    ]));
+  }
+});
+const Fe = /* @__PURE__ */ $(Be, [["__scopeId", "data-v-51f57e49"]]), F = (o) => (q("data-v-100cc51b"), o = o(), G(), o), Ne = /* @__PURE__ */ F(() => /* @__PURE__ */ _("span", { class: "ppt-audio-icon" }, "♪", -1)), We = /* @__PURE__ */ F(() => /* @__PURE__ */ _("audio", {
+  controls: "",
+  preload: "none",
+  tabindex: "-1",
+  "aria-disabled": "true"
+}, null, -1)), je = [
+  Ne,
+  We
+], Pe = /* @__PURE__ */ g({
+  __name: "AudioElement",
+  props: {
+    element: {}
+  },
+  setup(o) {
+    return (e, s) => (r(), a("div", {
+      class: "ppt-audio-content",
+      style: v({ color: e.element.color || "#5b5ce2" })
+    }, je, 4));
+  }
+});
+const Ve = /* @__PURE__ */ $(Pe, [["__scopeId", "data-v-100cc51b"]]), De = ["data-ppt-element-id"], Oe = /* @__PURE__ */ g({
+  __name: "ElementRenderer",
+  props: {
+    element: {},
+    elementIndex: {}
+  },
+  setup(o) {
+    const e = o, s = {
+      text: te,
+      image: oe,
+      shape: ue,
+      line: be,
+      chart: xe,
+      table: Te,
+      latex: He,
+      video: Fe,
+      audio: Ve
+    }, i = f(() => {
+      const t = K(e.element);
+      return {
+        width: `${t.width}px`,
+        height: `${t.height}px`,
+        left: `${t.left}px`,
+        top: `${t.top}px`,
+        transform: `rotate(${t.rotate}deg)`,
+        opacity: e.element.opacity ?? 1,
+        // DSL 数组顺序就是图层顺序。
+        zIndex: e.elementIndex + 1
+      };
+    });
+    return (t, l) => (r(), a("div", {
+      class: x(["ppt-element", [`ppt-${t.element.type}`, t.element.class]]),
+      "data-ppt-element-id": t.element.id,
+      style: v(i.value)
+    }, [
+      (r(), H(X(s[t.element.type]), { element: t.element }, Z({ _: 2 }, [
+        t.$slots["text-editor"] ? {
+          name: "text-editor",
+          fn: I((n) => [
+            b(t.$slots, "text-editor", M(L(n)), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots["shape-text-editor"] ? {
+          name: "shape-text-editor",
+          fn: I((n) => [
+            b(t.$slots, "shape-text-editor", M(L(n)), void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots["table-cell-editor"] ? {
+          name: "table-cell-editor",
+          fn: I((n) => [
+            b(t.$slots, "table-cell-editor", M(L(n)), void 0, !0)
+          ]),
+          key: "2"
+        } : void 0
+      ]), 1032, ["element"]))
+    ], 14, De));
+  }
+});
+const Ye = /* @__PURE__ */ $(Oe, [["__scopeId", "data-v-4031d518"]]), qe = ["data-ppt-slide-id"], Ge = /* @__PURE__ */ g({
+  __name: "SlideRenderer",
+  props: {
+    slide: {},
+    width: {},
+    height: {},
+    scale: { default: 1 }
+  },
+  setup(o) {
+    const e = o, s = f(() => U(e.slide, e.width, e.height, e.scale));
+    return (i, t) => (r(), a("div", {
+      class: "ppt-slide",
+      "data-ppt-slide-id": i.slide.id,
+      style: v(s.value)
+    }, [
+      (r(!0), a(S, null, E(i.slide.elements, (l, n) => (r(), H(Ye, {
+        key: l.id,
+        element: l,
+        "element-index": n
+      }, null, 8, ["element", "element-index"]))), 128))
+    ], 12, qe));
+  }
+});
+const Je = /* @__PURE__ */ $(Ge, [["__scopeId", "data-v-a6a99631"]]);
+export {
+  Ye as ElementRenderer,
+  Je as SlideRenderer,
+  K as getPptDslElementFrame,
+  A as getPptDslLineFrame,
+  U as getPptDslSlideStyle
+};

package/docs/AGENT.md

@@ -0,0 +1,36 @@
+# Agent 渲染与截图协议
+
+CLI 与 Node API 生成 HTML 后结束，不会等待远程素材加载。agent 应在自己的浏览器环境打开文件并检查状态。
+
+```ts
+window.__PPT_DSL_RENDER__: {
+  status: 'loading' | 'ready' | 'error'
+  errors: string[]
+}
+```
+
+`ready` 表示 Vue 挂载、字体加载等待、图片解码、背景图加载和 ECharts 绘制完成，且经过浏览器绘制帧。图片或代码错误会记录在 `errors`；超过 30 秒仍未完成也会报错。状态不包含版式评价，不保证远程图片内容稳定，也无法冻结 GIF/APNG 等素材自身的动画。需要重复对照时使用固定素材、同一浏览器版本和相同字体环境。
+
+截图根节点固定为 `#ppt-slide`，内部尺寸保持 DSL 的 CSS 像素宽高。HTML 会等比例缩小以适配窗口并居中，窗口较大时保持原尺寸。节点截图得到的是当前显示尺寸；需要原始分辨率时，在打开 HTML 前将浏览器 viewport 设置为 DSL 的 width、height。元素节点带有 `data-ppt-element-id`，页面节点带有 `data-ppt-slide-id`。这些属性可以定位元素，但包不主动计算文字溢出或布局评分。
+
+下面只是调用方已安装 Playwright 时的示例；Playwright 不属于本包依赖，也不会由本包下载或启动：
+
+```js
+import { pathToFileURL } from 'node:url'
+
+// page 是 agent 自己管理的浏览器页。
+await page.goto(pathToFileURL(htmlFile).href)
+await page.waitForFunction(
+  () => window.__PPT_DSL_RENDER__?.status === 'ready'
+    || window.__PPT_DSL_RENDER__?.status === 'error',
+  null,
+  { timeout: 35000 },
+)
+const state = await page.evaluate(() => window.__PPT_DSL_RENDER__)
+if (state.status === 'error') throw new Error(state.errors.join('\n'))
+await page.locator('#ppt-slide').screenshot({ path: screenshotFile })
+```
+
+若 agent 的浏览器工具不允许 `file:`，由调用方使用已有的文件预览或静态文件服务打开同一 HTML；包不会启动服务。浏览器必须允许执行内嵌脚本。
+
+生成失败先处理 stderr；浏览器加载失败先处理状态中的错误；视觉审查发现的问题再通过修改 DSL 解决。不要把“HTML 写入成功”当作“素材加载成功”，也不要自动将缺失素材替换为其他地址。