@web-ppt/viewer-core 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,45 @@
+# 更新日志
+
+本文件记录对使用者可见的变化。版本号遵循 [语义化版本](https://semver.org/lang/zh-CN/)。
+
+## 0.3.0
+
+本版把 ECMA-376 的几处主要缺口补齐，并首次拿 **Apache POI 的 242 个公开测试文件**跑批验证：
+排除 22 个故意损坏的模糊测试样本后，真实文件成功率 **210/220 = 95.5%**。
+
+### 新增
+
+- **预设几何补齐到规范全集**：163 → **187 个**。此前缺的 24 个走的是
+  `PRESETS[name] ?? PRESETS.rect`，会**静默画成矩形**，不报错也不进 `unsupported`——
+  `accentCallout*` 这类常见形状出现即无声画错
+- **运动路径动画**：`p:animMotion@path` 此前从未被读取，`presetClass="path"` 一律退化成淡入。
+  现按弧长等距重采样成位移点，播放层走 linear 缓动（PowerPoint 的路径动画是匀速）
+- **切换效果 21 → 41 种**：补上 PowerPoint 2010+ 的全部 19 种 p14 扩展，以及 p159 的
+  **morph**——按形状 id 在前后两页之间配对做几何补间，不是淡入淡出
+- **数学公式 OMML 真排版**：此前只把 `m:t` 拼成一行文字（分式变成 `a+b/2c`）。
+  现做完整箱模型排版，覆盖分式 / 根式 / 上下标 / 大算符 / 定界符 / 矩阵 / 重音 / 极限等 12 类结构
+- **加密文档**：
+  - `.pptx` 标准加密（AES-ECB）与敏捷加密（AES-CBC 分段）
+  - `.ppt` 老式 RC4 CryptoAPI（40 / 56 / 128 位）
+  - 用法 `parse(input, { password })`；密码错误抛 `WrongPasswordError`，与「文件损坏」区分开
+- **PICT（Apple QuickDraw）解码器**：Mac 版 PowerPoint 存的 OLE 预览与图片此前只能是裂图
+- **SmartArt 无缓存 drawing part 时自行排布**：python-pptx / Google Slides 导出的文件
+  常常只写数据与版式定义，此前只能得到灰色占位框。现支持线性 / 循环 / 金字塔 / 层级 /
+  蛇形 / 辐射六种布局族
+
+### 修复
+
+- `borderCallout2` 的引线是三点**开放**子路径，会被 `fill` 补成实心楔形——引线画成了黑三角
+- 后台标签页的 `document.timeline` 是暂停的，`Animation.finished` 永不 resolve，
+  切换的收尾逻辑（移除旧图层）就永远不执行，配合自动换片会让图层持续堆积
+- OLE 预览优先读 `p:oleObj` 内嵌的 `p:pic`（Office 2010+ 的主要写法），旧式 VML 快照作为后备
+
+### 其它
+
+- `@web-ppt/core` gzip 68KB → 84KB（新增的解码器与公式排版；加密与 PICT 走 hook 注入，可 tree-shake）
+- 测试：1298 → **1689 项断言**，快照 142 → 158 个
+- `@web-ppt/viewer-core` 的 peer 依赖同步升到 `^0.3.0`
+
+## 0.2.0 及更早
+
+见 [提交历史](https://github.com/unStone/web-ppt/commits/master)。

package/dist/foreign-object.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 探测当前引擎是否会给 <foreignObject> 里的 HTML 应用外层 SVG 的缩放。
+ *
+ * WebKit 从 2008 年起就不应用（bug 23113），直到新的 LBSE 引擎才修好。
+ * 本引擎的幻灯片是 `viewBox` + `width:100%`，也就是永远处在被缩放的状态，
+ * 所以在受影响的 Safari / iOS 上，foreignObject 里的文本会按 1× 排版并错位。
+ *
+ * Marp 的 marpit-svg-polyfill 用 getScreenCTM() 反算缩放再补回去，但那套做法
+ * 要求 foreignObject 就位于幻灯片原点；本引擎的 foreignObject 嵌在每个形状各自的
+ * translate/rotate 里，补偿量没法用一个标量表达。既然渲染层本来就有一条原生
+ * <text> 路径，受影响时直接切过去更稳——代价只是这些浏览器上文本不可选中。
+ */
+/** 仅供测试：清掉探测缓存 */
+export declare function resetForeignObjectProbe(): void;
+/**
+ * `doc` 只在首次探测时用到——结论按引擎缓存，同一个页面里不会出现两种 SVG 实现，
+ * 没必要为每个 iframe / 游离文档各测一遍。
+ */
+export declare function foreignObjectScalesCorrectly(doc: Document): boolean;

package/dist/index.d.ts

@@ -8,6 +8,8 @@
 export { PresentationState } from './state';
 export type { PresentationStateOptions, StateChange } from './state';
 export { Viewer } from './viewer';
+export { foreignObjectScalesCorrectly, resetForeignObjectProbe } from './foreign-object';
 export type { ViewerOptions } from './viewer';
-export { autoAdvanceMs, framesFor, groupSteps, hiddenBefore, playGroup, playTransition, } from './playback';
+export { autoAdvanceMs, framesFor, morphPairs, playGroup, playTransition, transitionFrames } from './playback';
+export { groupSteps, hiddenBefore } from '@web-ppt/core';
 export type { PlayHandle } from './playback';

package/dist/playback.d.ts

@@ -4,16 +4,26 @@ interface Keyframes {
     to: Keyframe;
 }
 export declare function framesFor(step: AnimStep): Keyframes;
-/** 把动画按点击批次分组 */
-export declare function groupSteps(steps: AnimStep[] | undefined): AnimStep[][];
-/** 一批动画开始前，哪些元素应处于隐藏状态 */
-export declare function hiddenBefore(groups: AnimStep[][], upTo: number): Set<number>;
 export interface PlayHandle {
     cancel(): void;
     finished: Promise<void>;
 }
 /** 播放一批动画；返回可取消的句柄 */
 export declare function playGroup(container: Element, group: AnimStep[]): PlayHandle;
+export declare function transitionFrames(t: Transition, incoming: boolean): Keyframe[];
+/**
+ * morph：按 data-el（形状 id）在前后两页之间配对，配上的元素做几何补间，
+ * 其余淡入淡出。PowerPoint 的 morph 也是按形状 id 匹配的——morph 版面
+ * 基本都由「复制上一页再改」得来，id 天然一致。
+ *
+ * 配对成功的旧元素立刻置 0，新元素全程不透明，看起来才是"同一个东西在动"，
+ * 而不是两层叠化。option="byWord"/"byChar" 的细粒度拆分不做，一律按对象处理。
+ */
+export declare function morphPairs(outgoing: Element, incoming: Element): {
+    node: HTMLElement;
+    from: DOMRect;
+    to: DOMRect;
+}[];
 /**
  * 播放切换：把旧内容截图式地留在下层，新内容在上层按效果进场。
  * outgoing 为旧内容节点（可为 null），incoming 为新内容节点。

package/dist/viewer-core.js

@@ -1,28 +1,29 @@
-import { slideText as m, renderSlideToSvg as d, slideToPng as y } from "@web-ppt/core";
-const l = 1.15;
-function v(s) {
+import { hiddenBefore as P, groupSteps as S, slideText as M, renderSlideToSvg as v, slideToPng as C } from "@web-ppt/core";
+import { groupSteps as Z, hiddenBefore as R } from "@web-ppt/core";
+const h = 1.15;
+function T(s) {
   switch (s) {
     case "l":
-      return [-100 * l, 0];
+      return [-100 * h, 0];
     case "r":
-      return [100 * l, 0];
+      return [100 * h, 0];
     case "u":
-      return [0, -100 * l];
+      return [0, -100 * h];
     case "d":
-      return [0, 100 * l];
+      return [0, 100 * h];
     case "lu":
-      return [-100 * l, -100 * l];
+      return [-100 * h, -100 * h];
     case "ru":
-      return [100 * l, -100 * l];
+      return [100 * h, -100 * h];
     case "ld":
-      return [-100 * l, 100 * l];
+      return [-100 * h, 100 * h];
     case "rd":
-      return [100 * l, 100 * l];
+      return [100 * h, 100 * h];
     default:
-      return [0, 100 * l];
+      return [0, 100 * h];
   }
 }
-function u(s, t) {
+function d(s, t) {
   const e = t ? 100 : 0;
   switch (s) {
     case "l":
@@ -39,12 +40,12 @@ function u(s, t) {
       return `inset(${e}% 0 0 0)`;
   }
 }
-function f(s) {
+function w(s) {
   switch (s.effect) {
     case "appear":
       return { from: { opacity: 0 }, to: { opacity: 1 } };
     case "fly": {
-      const [t, e] = v(s.dir);
+      const [t, e] = T(s.dir);
       return {
         from: { opacity: 0, transform: `translate(${t}%, ${e}%)` },
         to: { opacity: 1, transform: "translate(0, 0)" }
@@ -72,8 +73,8 @@ function f(s) {
     case "split":
     case "wheel":
       return {
-        from: { opacity: 1, clipPath: u(s.dir, !0) },
-        to: { opacity: 1, clipPath: u(s.dir, !1) }
+        from: { opacity: 1, clipPath: d(s.dir, !0) },
+        to: { opacity: 1, clipPath: d(s.dir, !1) }
       };
     case "dissolve":
     case "fade":
@@ -82,11 +83,11 @@ function f(s) {
       return { from: { opacity: 0 }, to: { opacity: 1 } };
   }
 }
-function g(s) {
-  const t = f({ ...s });
+function $(s) {
+  const t = w({ ...s });
   return { from: t.to, to: t.from };
 }
-function x(s) {
+function k(s) {
   switch (s.effect) {
     case "spin":
       return { from: { transform: "rotate(0)" }, to: { transform: "rotate(360deg)" } };
@@ -96,51 +97,35 @@ function x(s) {
       return { from: { opacity: 1 }, to: { opacity: 0.35 } };
   }
 }
-function A(s) {
-  return s.kind === "exit" ? g(s) : s.kind === "emphasis" ? x(s) : f(s);
-}
-function w(s) {
-  if (!(s != null && s.length)) return [];
-  const t = [];
-  for (const e of s) {
-    const n = e.clickGroup ?? 0;
-    (t[n] ?? (t[n] = [])).push(e);
-  }
-  return t.filter(Boolean);
-}
-function b(s, t) {
-  const e = /* @__PURE__ */ new Set();
-  for (let n = t; n < s.length; n++)
-    for (const i of s[n]) i.kind === "entrance" && e.add(i.target);
-  for (let n = 0; n < t; n++)
-    for (const i of s[n]) i.kind === "exit" && e.add(i.target);
-  for (let n = t; n < s.length; n++)
-    for (const i of s[n]) i.kind === "entrance" && e.add(i.target);
-  return e;
+function E(s) {
+  return s.kind === "exit" ? $(s) : s.kind === "emphasis" ? k(s) : s.kind === "motion" ? { from: { opacity: 1 }, to: { opacity: 1 } } : w(s);
 }
-function T(s, t) {
+function z(s, t) {
+  var n, r;
   const e = [];
-  let n = 0;
+  let a = 0;
   for (const i of t) {
-    const r = s.querySelector(`[data-el="${i.target}"]`);
-    if (!r) continue;
-    const a = i.trigger === "afterPrev" ? n + i.delayMs : i.delayMs;
-    i.trigger === "afterPrev" ? n = a + i.durationMs : n = Math.max(n, a + i.durationMs);
-    const { from: c, to: o } = A(i);
-    r.style.visibility = "visible", i.kind === "entrance" && (r.style.opacity = "");
+    const c = s.querySelector(`[data-el="${i.target}"]`);
+    if (!c) continue;
+    const o = i.trigger === "afterPrev" ? a + i.delayMs : i.delayMs;
+    i.trigger === "afterPrev" ? a = o + i.durationMs : a = Math.max(a, o + i.durationMs);
+    const { from: l, to: p } = E(i);
+    c.style.visibility = "visible", i.kind === "entrance" && (c.style.opacity = "");
+    const f = (n = i.motionPath) != null && n.length ? i.motionPath.map(([u, y]) => ({ transform: `translate(${u}px, ${y}px)` })) : [l, p];
     try {
-      const h = r.animate([c, o], {
+      const u = c.animate(f, {
         duration: i.durationMs,
-        delay: a,
-        easing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+        delay: o,
+        // 路径动画在 PowerPoint 里是匀速，不能套入场用的缓动
+        easing: (r = i.motionPath) != null && r.length ? "linear" : "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
         fill: "both"
       });
-      i.kind === "exit" && h.finished.then(() => {
-        r.style.visibility = "hidden";
+      i.kind === "exit" && u.finished.then(() => {
+        c.style.visibility = "hidden";
       }).catch(() => {
-      }), e.push(h);
+      }), e.push(u);
     } catch {
-      Object.assign(r.style, o);
+      Object.assign(c.style, f[f.length - 1] ?? p);
     }
   }
   return {
@@ -155,27 +140,27 @@ function T(s, t) {
     })
   };
 }
-function p(s, t) {
-  const e = s.dir ?? "", n = (r, a) => `translate(${r}, ${a})`, i = () => e.includes("l") ? ["-100%", "0"] : e.includes("r") ? ["100%", "0"] : e.includes("u") ? ["0", "-100%"] : ["0", "100%"];
+function x(s, t) {
+  const e = s.dir ?? "", a = (r, i) => `translate(${r}, ${i})`, n = () => e.includes("l") ? ["-100%", "0"] : e.includes("r") ? ["100%", "0"] : e.includes("u") ? ["0", "-100%"] : ["0", "100%"];
   switch (s.type) {
     case "cut":
       return t ? [{ opacity: 1 }, { opacity: 1 }] : [{ opacity: 0 }, { opacity: 0 }];
     case "push":
     case "pull": {
-      const [r, a] = i(), c = s.type === "pull" ? -1 : 1, o = (h) => h === "0" ? "0" : `${-parseFloat(h) * c}%`;
-      return t ? [{ transform: n(c > 0 ? r : o(r), c > 0 ? a : o(a)) }, { transform: "translate(0,0)" }] : [{ transform: "translate(0,0)" }, { transform: n(o(r), o(a)) }];
+      const [r, i] = n(), c = s.type === "pull" ? -1 : 1, o = (l) => l === "0" ? "0" : `${-parseFloat(l) * c}%`;
+      return t ? [{ transform: a(c > 0 ? r : o(r), c > 0 ? i : o(i)) }, { transform: "translate(0,0)" }] : [{ transform: "translate(0,0)" }, { transform: a(o(r), o(i)) }];
     }
     case "cover": {
-      const [r, a] = i();
-      return t ? [{ transform: n(r, a) }, { transform: "translate(0,0)" }] : [{ opacity: 1 }, { opacity: 1 }];
+      const [r, i] = n();
+      return t ? [{ transform: a(r, i) }, { transform: "translate(0,0)" }] : [{ opacity: 1 }, { opacity: 1 }];
     }
     case "wipe": {
-      const r = u(e || "d", !0), a = u(e || "d", !1);
-      return t ? [{ clipPath: r }, { clipPath: a }] : [{ opacity: 1 }, { opacity: 1 }];
+      const r = d(e || "d", !0), i = d(e || "d", !1);
+      return t ? [{ clipPath: r }, { clipPath: i }] : [{ opacity: 1 }, { opacity: 1 }];
     }
     case "split": {
-      const r = e.startsWith("vert"), a = e.endsWith("out"), c = r ? "inset(0 50% 0 50%)" : "inset(50% 0 50% 0)", o = "inset(0 0 0 0)";
-      return t ? a ? [{ clipPath: c }, { clipPath: o }] : [{ clipPath: o }, { clipPath: o }] : [{ clipPath: o }, { clipPath: c }];
+      const r = e.startsWith("vert"), i = e.endsWith("out"), c = r ? "inset(0 50% 0 50%)" : "inset(50% 0 50% 0)", o = "inset(0 0 0 0)";
+      return t ? i ? [{ clipPath: c }, { clipPath: o }] : [{ clipPath: o }, { clipPath: o }] : [{ clipPath: o }, { clipPath: c }];
     }
     case "zoom":
       return t ? [{ opacity: 0, transform: e === "out" ? "scale(1.4)" : "scale(0.6)" }, { opacity: 1, transform: "scale(1)" }] : [{ opacity: 1 }, { opacity: 0 }];
@@ -185,6 +170,67 @@ function p(s, t) {
     case "plus":
     case "wedge":
       return t ? [{ opacity: 0, transform: "scale(0.7)" }, { opacity: 1, transform: "scale(1)" }] : [{ opacity: 1 }, { opacity: 0 }];
+    case "ripple":
+      return t ? [{ clipPath: "circle(0% at 50% 50%)" }, { clipPath: "circle(75% at 50% 50%)" }] : [{ opacity: 1 }, { opacity: 1 }];
+    case "vortex":
+      return t ? [{ opacity: 0, transform: "scale(0.2) rotate(-180deg)" }, { opacity: 1, transform: "none" }] : [{ opacity: 1 }, { opacity: 0 }];
+    case "honeycomb":
+      return t ? [{ opacity: 0, transform: "scale(0.85) rotate(-6deg)" }, { opacity: 1, transform: "none" }] : [{ opacity: 1, transform: "none" }, { opacity: 0, transform: "scale(1.1)" }];
+    case "glitter":
+      return t ? [{ opacity: 0, clipPath: d(e || "l", !0) }, { opacity: 1, clipPath: d(e || "l", !1) }] : [{ opacity: 1 }, { opacity: 0 }];
+    case "shred":
+      return t ? [{ opacity: 0, transform: "scale(1.06)" }, { opacity: 1, transform: "none" }] : [{ opacity: 1, transform: "none" }, { opacity: 0, transform: "scaleY(0.9)" }];
+    case "flash":
+      return t ? [{ opacity: 0, filter: "brightness(3)" }, { opacity: 1, filter: "brightness(1)" }] : [{ opacity: 1, filter: "brightness(1)" }, { opacity: 0, filter: "brightness(3)" }];
+    case "reveal": {
+      const [r, i] = n();
+      return t ? [{ opacity: 0, transform: a(r, i) }, { opacity: 1, transform: "translate(0,0)" }] : [{ opacity: 1 }, { opacity: 0 }];
+    }
+    case "wheelReverse":
+      return t ? [{ opacity: 0, transform: "scale(1.3) rotate(20deg)" }, { opacity: 1, transform: "none" }] : [{ opacity: 1 }, { opacity: 0 }];
+    case "doors":
+      return t ? [{ clipPath: "inset(0 50% 0 50%)" }, { clipPath: "inset(0 0 0 0)" }] : [{ opacity: 1 }, { opacity: 1 }];
+    case "window":
+      return t ? [{ clipPath: "inset(50% 0 50% 0)" }, { clipPath: "inset(0 0 0 0)" }] : [{ opacity: 1 }, { opacity: 1 }];
+    case "switch":
+    case "flip":
+    case "prism": {
+      const r = s.type === "flip" ? -1 : 1;
+      return t ? [
+        { opacity: 0, transform: `perspective(1400px) rotateY(${r * -80}deg)` },
+        { opacity: 1, transform: "perspective(1400px) rotateY(0)" }
+      ] : [
+        { opacity: 1, transform: "perspective(1400px) rotateY(0)" },
+        { opacity: 0, transform: `perspective(1400px) rotateY(${r * 80}deg)` }
+      ];
+    }
+    case "ferris":
+      return t ? [
+        { opacity: 0, transform: "perspective(1400px) rotateX(70deg)" },
+        { opacity: 1, transform: "perspective(1400px) rotateX(0)" }
+      ] : [
+        { opacity: 1, transform: "perspective(1400px) rotateX(0)" },
+        { opacity: 0, transform: "perspective(1400px) rotateX(-70deg)" }
+      ];
+    case "gallery":
+    case "conveyor": {
+      const r = s.type === "conveyor" ? 25 : 12, i = e.includes("l") ? "-100%" : "100%", c = e.includes("l") ? "100%" : "-100%";
+      return t ? [
+        { transform: `perspective(1600px) translateX(${i}) rotateY(${r}deg)` },
+        { transform: "perspective(1600px) translateX(0) rotateY(0)" }
+      ] : [
+        { transform: "perspective(1600px) translateX(0) rotateY(0)" },
+        { transform: `perspective(1600px) translateX(${c}) rotateY(${-r}deg)` }
+      ];
+    }
+    case "pan": {
+      const [r, i] = n(), c = (o) => o === "0" ? "0" : `${-parseFloat(o)}%`;
+      return t ? [{ transform: a(r, i) }, { transform: "translate(0,0)" }] : [{ transform: "translate(0,0)" }, { transform: a(c(r), c(i)) }];
+    }
+    case "flythrough":
+      return t ? [{ opacity: 0, transform: "perspective(1000px) scale(0.15)" }, { opacity: 1, transform: "none" }] : [{ opacity: 1, transform: "none" }, { opacity: 0, transform: "perspective(1000px) scale(2.2)" }];
+    case "warp":
+      return t ? [{ opacity: 0, transform: "skewX(-18deg) scale(1.15)" }, { opacity: 1, transform: "none" }] : [{ opacity: 1, transform: "none" }, { opacity: 0, transform: "skewX(18deg) scale(0.9)" }];
     case "blinds":
     case "checker":
     case "comb":
@@ -193,30 +239,75 @@ function p(s, t) {
     case "newsflash":
     case "dissolve":
     case "fade":
+    case "morph":
     default:
       return t ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }];
   }
 }
-function k(s, t, e) {
+function A(s, t) {
+  const e = Promise.all(s.map((a) => a.catch(() => {
+  }))).then(() => {
+  });
+  return typeof setTimeout != "function" ? e : Promise.race([e, new Promise((a) => setTimeout(a, t + 250))]);
+}
+function Y(s, t) {
+  const e = /* @__PURE__ */ new Map();
+  s.querySelectorAll("[data-el]").forEach((n) => {
+    const r = n.getBoundingClientRect();
+    (r.width > 0 || r.height > 0) && e.set(n.getAttribute("data-el") ?? "", r);
+  });
+  const a = [];
+  return t.querySelectorAll("[data-el]").forEach((n) => {
+    const r = e.get(n.getAttribute("data-el") ?? "");
+    if (!r) return;
+    const i = n.getBoundingClientRect();
+    i.width <= 0 && i.height <= 0 || a.push({ node: n, from: r, to: i });
+  }), a;
+}
+function L(s, t, e) {
+  if (!s) return Promise.resolve();
+  const a = { duration: e.durationMs, easing: "ease-in-out", fill: "both" }, n = Y(s, t), r = new Set(n.map((o) => o.node.getAttribute("data-el"))), i = [], c = (o, l) => {
+    try {
+      i.push(o.animate(l, a).finished);
+    } catch {
+    }
+  };
+  for (const { node: o, from: l, to: p } of n) {
+    const f = l.left - p.left, u = l.top - p.top, y = p.width > 0 ? l.width / p.width : 1, b = p.height > 0 ? l.height / p.height : 1;
+    c(o, [
+      { transformOrigin: "left top", transform: `translate(${f}px, ${u}px) scale(${y}, ${b})` },
+      { transformOrigin: "left top", transform: "none" }
+    ]);
+  }
+  return s.querySelectorAll("[data-el]").forEach((o) => {
+    const l = r.has(o.getAttribute("data-el"));
+    c(o, l ? [{ opacity: 0 }, { opacity: 0 }] : [{ opacity: 1 }, { opacity: 0 }]);
+  }), t.querySelectorAll("[data-el]").forEach((o) => {
+    r.has(o.getAttribute("data-el")) || c(o, [{ opacity: 0 }, { opacity: 1 }]);
+  }), A(i, e.durationMs).then(() => {
+    s.remove();
+  });
+}
+function X(s, t, e) {
   if (!e || e.type === "none")
     return s == null || s.remove(), Promise.resolve();
-  const n = { duration: e.durationMs, easing: "ease-in-out", fill: "both" }, i = [];
+  if (e.type === "morph" && s) return L(s, t, e);
+  const a = { duration: e.durationMs, easing: "ease-in-out", fill: "both" }, n = [];
   try {
-    i.push(t.animate(p(e, !0), n).finished), s && i.push(s.animate(p(e, !1), n).finished);
+    n.push(t.animate(x(e, !0), a).finished), s && n.push(s.animate(x(e, !1), a).finished);
   } catch {
     return s == null || s.remove(), Promise.resolve();
   }
-  return Promise.all(i.map((r) => r.catch(() => {
-  }))).then(() => {
+  return A(n, e.durationMs).then(() => {
     s == null || s.remove();
   });
 }
-function C(s) {
+function N(s) {
   var e;
   const t = (e = s.transition) == null ? void 0 : e.advanceAfterMs;
   return t !== void 0 && t > 0 ? t : null;
 }
-class P {
+class V {
   constructor(t, e = {}) {
     this.presentation = t, this.options = e, this.idx = 0, this.zoomValue = 1, this.groups = [], this.cursor = 0, this.listeners = /* @__PURE__ */ new Set(), this.autoTimer = null, this.textCache = /* @__PURE__ */ new Map(), this.idx = this.clamp(e.index ?? 0), this.loadAnimations();
   }
@@ -247,11 +338,11 @@ class P {
   }
   /** 当前批次下应当隐藏的元素 id —— UI 据此设置可见性 */
   get hiddenElementIds() {
-    return this.animate ? b(this.groups, this.cursor) : /* @__PURE__ */ new Set();
+    return this.animate ? P(this.groups, this.cursor) : /* @__PURE__ */ new Set();
   }
   /** 本页的自动换片延迟（毫秒），未配置则为 null */
   get autoAdvanceDelay() {
-    return this.options.autoAdvance ? C(this.slide) : null;
+    return this.options.autoAdvance ? N(this.slide) : null;
   }
   // ---------------- 订阅 ----------------
   subscribe(t) {
@@ -273,13 +364,13 @@ class P {
    * 前进时带上目标页的切换效果；回退不播切换，避免观感错乱。
    */
   goTo(t, e = "forward") {
-    const n = this.clamp(t);
-    if (n === this.idx) return !1;
-    const i = this.idx;
-    return this.idx = n, this.loadAnimations(), this.emit({
+    const a = this.clamp(t);
+    if (a === this.idx) return !1;
+    const n = this.idx;
+    return this.idx = a, this.loadAnimations(), this.emit({
       type: "slide",
-      index: n,
-      previous: i,
+      index: a,
+      previous: n,
       transition: e === "forward" && this.animate ? this.slide.transition : void 0
     }), !0;
   }
@@ -304,7 +395,7 @@ class P {
   }
   // ---------------- 动画 ----------------
   loadAnimations() {
-    this.groups = this.animate ? w(this.slide.animations) : [], this.cursor = 0;
+    this.groups = this.animate ? S(this.slide.animations) : [], this.cursor = 0;
   }
   /**
    * 推进一批动画。返回应播放的这一批；没有待播批次时返回 null。
@@ -335,42 +426,62 @@ class P {
   // ---------------- 文本 / 搜索 ----------------
   text(t) {
     let e = this.textCache.get(t);
-    return e === void 0 && (e = m(this.presentation.slides[t]), this.textCache.set(t, e)), e;
+    return e === void 0 && (e = M(this.presentation.slides[t]), this.textCache.set(t, e)), e;
   }
   /** 全文搜索，返回命中的页索引 */
   search(t) {
     const e = t.trim().toLowerCase();
     if (!e) return [];
-    const n = [];
-    for (let i = 0; i < this.count; i++)
-      this.text(i).toLowerCase().includes(e) && n.push(i);
-    return n;
+    const a = [];
+    for (let n = 0; n < this.count; n++)
+      this.text(n).toLowerCase().includes(e) && a.push(n);
+    return a;
   }
   /** 解析内部跳转目标（`slide:3` / `slide:last`）为页索引；外部链接返回 null */
   resolveLink(t) {
     if (!t.startsWith("slide:")) return null;
-    const e = t.slice(6), n = e === "last" ? this.count : Number(e);
-    return Number.isFinite(n) ? this.clamp(n - 1) : null;
+    const e = t.slice(6), a = e === "last" ? this.count : Number(e);
+    return Number.isFinite(a) ? this.clamp(a - 1) : null;
   }
   destroy() {
     this.cancelAutoAdvance(), this.listeners.clear(), this.textCache.clear();
   }
 }
-class M {
-  constructor(t, e, n = {}) {
-    this.container = t, this.presentation = e, this.svgCache = /* @__PURE__ */ new Map(), this.playing = null, this.cancelAuto = null, this.onChange = null, this.onAnimStep = null, this.onLinkClick = null, this.handleClick = (i) => {
-      const r = i.target, a = r == null ? void 0 : r.closest("[data-slide]");
-      if (a) {
-        i.preventDefault();
-        const h = this.state.resolveLink(`slide:${a.getAttribute("data-slide") ?? ""}`);
-        h !== null && this.goTo(h);
+const g = "http://www.w3.org/2000/svg", F = "http://www.w3.org/1999/xhtml";
+let m = null;
+function j() {
+  m = null;
+}
+function D(s) {
+  if (m !== null) return m;
+  const t = s.body ?? s.documentElement;
+  if (!t) return !0;
+  const e = s.createElementNS(g, "svg");
+  e.setAttribute("viewBox", "0 0 100 100"), e.setAttribute("width", "200"), e.setAttribute("height", "200"), e.setAttribute("style", "position:absolute;left:-9999px;top:-9999px;pointer-events:none");
+  const a = s.createElementNS(g, "foreignObject");
+  a.setAttribute("width", "100"), a.setAttribute("height", "100");
+  const n = s.createElementNS(F, "div");
+  n.setAttribute("style", "width:100px;height:100px"), a.appendChild(n), e.appendChild(a), t.appendChild(e);
+  const r = n.getBoundingClientRect().width;
+  return e.remove(), m = r === 0 || r > 150, m;
+}
+class O {
+  constructor(t, e, a = {}) {
+    this.container = t, this.presentation = e, this.svgCache = /* @__PURE__ */ new Map(), this.playing = null, this.cancelAuto = null, this.onChange = null, this.onAnimStep = null, this.onLinkClick = null, this.handleClick = (r) => {
+      const i = r.target, c = i == null ? void 0 : i.closest("[data-slide]");
+      if (c) {
+        r.preventDefault();
+        const p = this.state.resolveLink(`slide:${c.getAttribute("data-slide") ?? ""}`);
+        p !== null && this.goTo(p);
         return;
       }
-      const c = r == null ? void 0 : r.closest("a[href]"), o = c == null ? void 0 : c.getAttribute("href");
-      o && this.onLinkClick && this.onLinkClick(o) === !0 && i.preventDefault();
-    }, this.state = new P(e, n), this.unsubscribe = this.state.subscribe((i) => {
-      var r, a;
-      i.type === "slide" ? (this.paint(i.transition), (r = this.onChange) == null || r.call(this, i.index)) : i.type === "animation" ? (i.group ? this.play(i.group) : this.applyVisibility(), (a = this.onAnimStep) == null || a.call(this, i.done, i.total)) : i.type === "zoom" && this.applyZoom();
+      const o = i == null ? void 0 : i.closest("a[href]"), l = o == null ? void 0 : o.getAttribute("href");
+      l && this.onLinkClick && this.onLinkClick(l) === !0 && r.preventDefault();
+    }, this.media = a.media ?? "badge";
+    const n = a.textMode ?? "auto";
+    this.textMode = n !== "auto" ? n : D(t.ownerDocument) ? "html" : "svg", this.state = new V(e, a), this.unsubscribe = this.state.subscribe((r) => {
+      var i, c;
+      r.type === "slide" ? (this.paint(r.transition), (i = this.onChange) == null || i.call(this, r.index)) : r.type === "animation" ? (r.group ? this.play(r.group) : this.applyVisibility(), (c = this.onAnimStep) == null || c.call(this, r.done, r.total)) : r.type === "zoom" && this.applyZoom();
     }), this.container.addEventListener("click", this.handleClick), this.paint();
   }
   // ---------------- 转发给状态机 ----------------
@@ -426,36 +537,39 @@ class M {
   /** 带缓存的单页 SVG（主视图用） */
   slideSvg(t) {
     let e = this.svgCache.get(t);
-    return e === void 0 && (e = d(this.presentation, this.presentation.slides[t]), this.svgCache.set(t, e)), e;
+    return e === void 0 && (e = v(this.presentation, this.presentation.slides[t], {
+      media: this.media,
+      textMode: this.textMode
+    }), this.svgCache.set(t, e)), e;
   }
   /** 不走缓存，用于缩略图等需要独立 defs id 的场景 */
   renderSlide(t) {
-    return d(this.presentation, this.presentation.slides[t]);
+    return v(this.presentation, this.presentation.slides[t], { textMode: this.textMode });
   }
   exportPng(t = 2, e = this.index) {
-    return y(this.presentation, this.presentation.slides[e], t);
+    return C(this.presentation, this.presentation.slides[e], t);
   }
   paint(t) {
-    var a, c, o;
-    (a = this.playing) == null || a.cancel(), this.playing = null, (c = this.cancelAuto) == null || c.call(this);
+    var i, c, o;
+    (i = this.playing) == null || i.cancel(), this.playing = null, (c = this.cancelAuto) == null || c.call(this);
     const e = document.createElement("div");
     e.style.cssText = "position:absolute;inset:0;display:flex;align-items:center;justify-content:center", e.innerHTML = this.slideSvg(this.index);
-    const n = this.container.firstElementChild, i = this.container.ownerDocument.defaultView;
-    (!i || i.getComputedStyle(this.container).position === "static") && (this.container.style.position = "relative"), t && n ? (this.container.appendChild(e), k(n, e, t).then(() => this.startAutoAdvance())) : (this.container.innerHTML = "", this.container.appendChild(e), this.startAutoAdvance());
+    const a = this.container.firstElementChild, n = this.container.ownerDocument.defaultView;
+    (!n || n.getComputedStyle(this.container).position === "static") && (this.container.style.position = "relative"), t && a ? (this.container.appendChild(e), X(a, e, t).then(() => this.startAutoAdvance())) : (this.container.innerHTML = "", this.container.appendChild(e), this.startAutoAdvance());
     const r = e.querySelector("svg");
     r && (r.style.display = "block", r.style.maxWidth = "none"), this.applyZoom(), this.applyVisibility(), (o = this.onAnimStep) == null || o.call(this, this.state.animationDone, this.state.animationTotal);
   }
   play(t) {
     var e;
-    (e = this.playing) == null || e.cancel(), this.playing = T(this.container, t), this.applyVisibility();
+    (e = this.playing) == null || e.cancel(), this.playing = z(this.container, t), this.applyVisibility();
   }
   /** 按状态机给出的隐藏集合设置元素可见性 */
   applyVisibility() {
     if (!this.state.animate) return;
     const t = this.state.hiddenElementIds;
     this.container.querySelectorAll("[data-el]").forEach((e) => {
-      const n = Number(e.getAttribute("data-el"));
-      e.style.visibility = t.has(n) ? "hidden" : "visible";
+      const a = Number(e.getAttribute("data-el"));
+      e.style.visibility = t.has(a) ? "hidden" : "visible";
     });
   }
   applyZoom() {
@@ -473,12 +587,16 @@ class M {
   }
 }
 export {
-  P as PresentationState,
-  M as Viewer,
-  C as autoAdvanceMs,
-  A as framesFor,
-  w as groupSteps,
-  b as hiddenBefore,
-  T as playGroup,
-  k as playTransition
+  V as PresentationState,
+  O as Viewer,
+  N as autoAdvanceMs,
+  D as foreignObjectScalesCorrectly,
+  E as framesFor,
+  Z as groupSteps,
+  R as hiddenBefore,
+  Y as morphPairs,
+  z as playGroup,
+  X as playTransition,
+  j as resetForeignObjectProbe,
+  x as transitionFrames
 };

package/dist/viewer.d.ts

@@ -8,12 +8,25 @@ import { PresentationState, type PresentationStateOptions } from './state';
  * 因此换成 React / Vue 只需重写这三件事。
  */
 export interface ViewerOptions extends PresentationStateOptions {
+    /**
+     * 媒体呈现：'badge' 只画封面帧与播放标识，'player' 嵌入可播放的
+     * <video>/<audio>。导出（exportPng）不受影响，始终走 badge。
+     */
+    media?: 'badge' | 'player';
+    /**
+     * 文本渲染方式。默认 'auto'：探测到引擎不给 foreignObject 应用 SVG 缩放
+     * （WebKit bug 23113）时自动切到原生 <text>，否则用 foreignObject。
+     * 传死值可绕过探测。
+     */
+    textMode?: 'auto' | 'html' | 'svg';
 }
 export declare class Viewer {
     private container;
     readonly presentation: Presentation;
     readonly state: PresentationState;
     private svgCache;
+    private media;
+    private textMode;
     private playing;
     private cancelAuto;
     private unsubscribe;

package/package.json

@@ -1,12 +1,22 @@
 {
   "name": "@web-ppt/viewer-core",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Web-PPT 查看器的 headless 状态机与播放层：导航 / 缩放 / 搜索 / 动画批次，可被任意 UI 框架驱动",
   "keywords": [
     "pptx",
+    "ppt",
+    "powerpoint",
     "viewer",
     "headless",
-    "state-machine"
+    "state-machine",
+    "presentation",
+    "slideshow",
+    "svg",
+    "browser",
+    "react",
+    "vue",
+    "svelte",
+    "typescript"
   ],
   "license": "MIT",
   "author": "unStone",
@@ -31,14 +41,16 @@
   "files": [
     "dist",
     "README.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
   "scripts": {
     "build": "vite build && tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build",
     "prepack": "node ../../tooling/sync-package-docs.mjs"
   },
   "peerDependencies": {
-    "@web-ppt/core": "^0.1.0"
+    "@web-ppt/core": "^0.3.0"
   },
   "publishConfig": {
     "access": "public"