@web-ppt/viewer-core 0.1.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,53 @@
+# @web-ppt/viewer-core
+
+[Web-PPT](https://github.com/unStone/web-ppt) 查看器的 headless 层。
+
+`PresentationState` 是零 DOM 的纯状态机——导航 / 缩放 / 搜索 / 动画批次 / 自动换片，
+可被原生 DOM、React、Vue、Svelte 任意 UI 驱动，也能在 Node 里直接跑测试。
+`Viewer` 是它之上最薄的一层 DOM 绑定（塞 SVG、设可见性、调播放，约 24 行）。
+
+```bash
+npm i @web-ppt/core @web-ppt/viewer-core
+```
+
+## 开箱即用
+
+```ts
+import { parse } from '@web-ppt/core';
+import { Viewer } from '@web-ppt/viewer-core';
+
+const pres = await parse(file);
+const v = new Viewer(container, pres, { animate: true, autoAdvance: true });
+
+v.next();              // 有待播动画时先播动画，否则翻页
+v.finishAnimations();  // 跳到本页动画终态
+v.setZoom(1.5);
+v.search('关键词');     // → 命中的页索引数组
+await v.exportPng(2);  // → Blob
+```
+
+## 接自己的 UI
+
+```ts
+import { PresentationState, playGroup, playTransition } from '@web-ppt/viewer-core';
+
+const st = new PresentationState(pres, { skipHidden: true, animate: true });
+
+st.subscribe((change) => {
+  if (change.type === 'slide') {
+    render(change.index);
+    if (change.transition) playTransition(prevEl, nextEl, change.transition);
+  } else if (change.type === 'animation' && change.group) {
+    playGroup(container, change.group);
+  }
+});
+
+st.next();
+st.hiddenElementIds;   // 当前批次下应隐藏的元素 id
+st.resolveLink(href);  // 'slide:3' → 2，外链 → null
+```
+
+状态机只决定「该显示什么」，实际播放由 UI 层调 `playGroup` / `playTransition` 完成——
+所以换框架时不需要重写任何逻辑。
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @web-ppt/viewer-core —— 查看器的 headless 层。
+ *
+ * `PresentationState` 是纯状态机（零 DOM），`Viewer` 是它之上最薄的 DOM 绑定。
+ * 想接 React / Vue / Svelte 就直接驱动 `PresentationState`，
+ * 播放动画与切换用这里导出的 `playGroup` / `playTransition`。
+ */
+export { PresentationState } from './state';
+export type { PresentationStateOptions, StateChange } from './state';
+export { Viewer } from './viewer';
+export type { ViewerOptions } from './viewer';
+export { autoAdvanceMs, framesFor, groupSteps, hiddenBefore, playGroup, playTransition, } from './playback';
+export type { PlayHandle } from './playback';

package/dist/playback.d.ts

@@ -0,0 +1,24 @@
+import type { AnimStep, Slide, Transition } from '@web-ppt/core';
+interface Keyframes {
+    from: Keyframe;
+    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;
+/**
+ * 播放切换：把旧内容截图式地留在下层，新内容在上层按效果进场。
+ * outgoing 为旧内容节点（可为 null），incoming 为新内容节点。
+ */
+export declare function playTransition(outgoing: HTMLElement | null, incoming: HTMLElement, t: Transition | undefined): Promise<void>;
+/** 幻灯片是否配置了自动换片 */
+export declare function autoAdvanceMs(slide: Slide): number | null;
+export {};

package/dist/state.d.ts

@@ -0,0 +1,94 @@
+import type { AnimStep, Presentation, Slide, Transition } from '@web-ppt/core';
+/**
+ * 演示文稿的 headless 状态机：翻页、缩放、搜索、动画批次。
+ *
+ * 不碰任何 DOM，因此可以被原生 / React / Vue / Svelte 任意 UI 驱动，
+ * 也能在 Node 里直接跑测试。UI 层只负责两件事：
+ * 订阅变更 → 把 `renderSlideToSvg` 的结果放进容器。
+ */
+export interface PresentationStateOptions {
+    /** 初始页 */
+    index?: number;
+    /** 翻页时跳过隐藏页 */
+    skipHidden?: boolean;
+    /** 启用切换与元素动画（演示模式建议开启） */
+    animate?: boolean;
+    /** 遵循文件里的自动换片设置 */
+    autoAdvance?: boolean;
+}
+export type StateChange = 
+/** 换页。`transition` 非空表示应播放切换效果 */
+{
+    type: 'slide';
+    index: number;
+    previous: number;
+    transition?: Transition;
+}
+/** 动画批次推进。`group` 是本次应播放的这一批 */
+ | {
+    type: 'animation';
+    done: number;
+    total: number;
+    group: AnimStep[] | null;
+} | {
+    type: 'zoom';
+    zoom: number;
+};
+type Listener = (change: StateChange) => void;
+export declare class PresentationState {
+    readonly presentation: Presentation;
+    private options;
+    private idx;
+    private zoomValue;
+    private groups;
+    private cursor;
+    private listeners;
+    private autoTimer;
+    /** 每页渲染结果的缓存交给 UI 层，这里只缓存文本以便搜索 */
+    private textCache;
+    constructor(presentation: Presentation, options?: PresentationStateOptions);
+    get index(): number;
+    get count(): number;
+    get slide(): Slide;
+    get zoom(): number;
+    get animate(): boolean;
+    get animationTotal(): number;
+    get animationDone(): number;
+    get hasPendingAnimation(): boolean;
+    /** 当前批次下应当隐藏的元素 id —— UI 据此设置可见性 */
+    get hiddenElementIds(): ReadonlySet<number>;
+    /** 本页的自动换片延迟（毫秒），未配置则为 null */
+    get autoAdvanceDelay(): number | null;
+    subscribe(fn: Listener): () => void;
+    private emit;
+    private clamp;
+    private visible;
+    /**
+     * 跳转到指定页。返回是否真的换了页。
+     * 前进时带上目标页的切换效果；回退不播切换，避免观感错乱。
+     */
+    goTo(i: number, direction?: 'forward' | 'backward'): boolean;
+    /** 有待播动画时先播动画，否则翻页 */
+    next(): void;
+    prev(): void;
+    setZoom(z: number): void;
+    setAnimate(on: boolean): void;
+    private loadAnimations;
+    /**
+     * 推进一批动画。返回应播放的这一批；没有待播批次时返回 null。
+     * 真正的播放由 UI 层执行——状态机只负责「该播哪一批」。
+     */
+    playNextAnimation(): AnimStep[] | null;
+    /** 直接跳到本页动画终态 */
+    finishAnimations(): void;
+    /** 启动自动换片计时；返回取消函数。由 UI 层在每次换页后调用。 */
+    scheduleAutoAdvance(): () => void;
+    cancelAutoAdvance(): void;
+    text(i: number): string;
+    /** 全文搜索，返回命中的页索引 */
+    search(query: string): number[];
+    /** 解析内部跳转目标（`slide:3` / `slide:last`）为页索引；外部链接返回 null */
+    resolveLink(href: string): number | null;
+    destroy(): void;
+}
+export {};

package/dist/viewer-core.js

@@ -0,0 +1,484 @@
+import { slideText as m, renderSlideToSvg as d, slideToPng as y } from "@web-ppt/core";
+const l = 1.15;
+function v(s) {
+  switch (s) {
+    case "l":
+      return [-100 * l, 0];
+    case "r":
+      return [100 * l, 0];
+    case "u":
+      return [0, -100 * l];
+    case "d":
+      return [0, 100 * l];
+    case "lu":
+      return [-100 * l, -100 * l];
+    case "ru":
+      return [100 * l, -100 * l];
+    case "ld":
+      return [-100 * l, 100 * l];
+    case "rd":
+      return [100 * l, 100 * l];
+    default:
+      return [0, 100 * l];
+  }
+}
+function u(s, t) {
+  const e = t ? 100 : 0;
+  switch (s) {
+    case "l":
+      return `inset(0 ${e}% 0 0)`;
+    case "r":
+      return `inset(0 0 0 ${e}%)`;
+    case "u":
+      return `inset(0 0 ${e}% 0)`;
+    case "horz":
+      return `inset(0 ${e / 2}% 0 ${e / 2}%)`;
+    case "vert":
+      return `inset(${e / 2}% 0 ${e / 2}% 0)`;
+    default:
+      return `inset(${e}% 0 0 0)`;
+  }
+}
+function f(s) {
+  switch (s.effect) {
+    case "appear":
+      return { from: { opacity: 0 }, to: { opacity: 1 } };
+    case "fly": {
+      const [t, e] = v(s.dir);
+      return {
+        from: { opacity: 0, transform: `translate(${t}%, ${e}%)` },
+        to: { opacity: 1, transform: "translate(0, 0)" }
+      };
+    }
+    case "zoom":
+      return {
+        from: { opacity: 0, transform: s.dir === "out" ? "scale(1.6)" : "scale(0.1)" },
+        to: { opacity: 1, transform: "scale(1)" }
+      };
+    case "grow":
+      return { from: { opacity: 0, transform: "scale(0.2) rotate(-90deg)" }, to: { opacity: 1, transform: "scale(1) rotate(0)" } };
+    case "spin":
+      return { from: { opacity: 0, transform: "rotate(-180deg) scale(0.4)" }, to: { opacity: 1, transform: "rotate(0) scale(1)" } };
+    case "swivel":
+      return { from: { opacity: 0, transform: "rotateY(90deg)" }, to: { opacity: 1, transform: "rotateY(0)" } };
+    case "float":
+      return { from: { opacity: 0, transform: "translateY(30%)" }, to: { opacity: 1, transform: "translateY(0)" } };
+    case "bounce":
+      return { from: { opacity: 0, transform: "translateY(-60%)" }, to: { opacity: 1, transform: "translateY(0)" } };
+    case "stretch":
+      return { from: { opacity: 0, transform: "scaleX(0.05)" }, to: { opacity: 1, transform: "scaleX(1)" } };
+    case "wipe":
+    case "blinds":
+    case "split":
+    case "wheel":
+      return {
+        from: { opacity: 1, clipPath: u(s.dir, !0) },
+        to: { opacity: 1, clipPath: u(s.dir, !1) }
+      };
+    case "dissolve":
+    case "fade":
+    case "random":
+    default:
+      return { from: { opacity: 0 }, to: { opacity: 1 } };
+  }
+}
+function g(s) {
+  const t = f({ ...s });
+  return { from: t.to, to: t.from };
+}
+function x(s) {
+  switch (s.effect) {
+    case "spin":
+      return { from: { transform: "rotate(0)" }, to: { transform: "rotate(360deg)" } };
+    case "grow":
+      return { from: { transform: "scale(1)" }, to: { transform: "scale(1.25)" } };
+    default:
+      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 T(s, t) {
+  const e = [];
+  let n = 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 = "");
+    try {
+      const h = r.animate([c, o], {
+        duration: i.durationMs,
+        delay: a,
+        easing: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+        fill: "both"
+      });
+      i.kind === "exit" && h.finished.then(() => {
+        r.style.visibility = "hidden";
+      }).catch(() => {
+      }), e.push(h);
+    } catch {
+      Object.assign(r.style, o);
+    }
+  }
+  return {
+    cancel: () => e.forEach((i) => {
+      try {
+        i.finish();
+      } catch {
+      }
+    }),
+    finished: Promise.all(e.map((i) => i.finished.catch(() => {
+    }))).then(() => {
+    })
+  };
+}
+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%"];
+  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)) }];
+    }
+    case "cover": {
+      const [r, a] = i();
+      return t ? [{ transform: n(r, a) }, { 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 }];
+    }
+    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 }];
+    }
+    case "zoom":
+      return t ? [{ opacity: 0, transform: e === "out" ? "scale(1.4)" : "scale(0.6)" }, { opacity: 1, transform: "scale(1)" }] : [{ opacity: 1 }, { opacity: 0 }];
+    case "wheel":
+    case "circle":
+    case "diamond":
+    case "plus":
+    case "wedge":
+      return t ? [{ opacity: 0, transform: "scale(0.7)" }, { opacity: 1, transform: "scale(1)" }] : [{ opacity: 1 }, { opacity: 0 }];
+    case "blinds":
+    case "checker":
+    case "comb":
+    case "randomBar":
+    case "strips":
+    case "newsflash":
+    case "dissolve":
+    case "fade":
+    default:
+      return t ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 1 }, { opacity: 0 }];
+  }
+}
+function k(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 = [];
+  try {
+    i.push(t.animate(p(e, !0), n).finished), s && i.push(s.animate(p(e, !1), n).finished);
+  } catch {
+    return s == null || s.remove(), Promise.resolve();
+  }
+  return Promise.all(i.map((r) => r.catch(() => {
+  }))).then(() => {
+    s == null || s.remove();
+  });
+}
+function C(s) {
+  var e;
+  const t = (e = s.transition) == null ? void 0 : e.advanceAfterMs;
+  return t !== void 0 && t > 0 ? t : null;
+}
+class P {
+  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();
+  }
+  // ---------------- 只读状态 ----------------
+  get index() {
+    return this.idx;
+  }
+  get count() {
+    return this.presentation.slides.length;
+  }
+  get slide() {
+    return this.presentation.slides[this.idx];
+  }
+  get zoom() {
+    return this.zoomValue;
+  }
+  get animate() {
+    return this.options.animate === !0;
+  }
+  get animationTotal() {
+    return this.groups.length;
+  }
+  get animationDone() {
+    return this.cursor;
+  }
+  get hasPendingAnimation() {
+    return this.animate && this.cursor < this.groups.length;
+  }
+  /** 当前批次下应当隐藏的元素 id —— UI 据此设置可见性 */
+  get hiddenElementIds() {
+    return this.animate ? b(this.groups, this.cursor) : /* @__PURE__ */ new Set();
+  }
+  /** 本页的自动换片延迟（毫秒），未配置则为 null */
+  get autoAdvanceDelay() {
+    return this.options.autoAdvance ? C(this.slide) : null;
+  }
+  // ---------------- 订阅 ----------------
+  subscribe(t) {
+    return this.listeners.add(t), () => this.listeners.delete(t);
+  }
+  emit(t) {
+    for (const e of this.listeners) e(t);
+  }
+  // ---------------- 导航 ----------------
+  clamp(t) {
+    return Math.max(0, Math.min(this.count - 1, t));
+  }
+  visible(t) {
+    var e;
+    return !this.options.skipHidden || !((e = this.presentation.slides[t]) != null && e.hidden);
+  }
+  /**
+   * 跳转到指定页。返回是否真的换了页。
+   * 前进时带上目标页的切换效果；回退不播切换，避免观感错乱。
+   */
+  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({
+      type: "slide",
+      index: n,
+      previous: i,
+      transition: e === "forward" && this.animate ? this.slide.transition : void 0
+    }), !0;
+  }
+  /** 有待播动画时先播动画，否则翻页 */
+  next() {
+    if (this.playNextAnimation()) return;
+    let t = this.idx + 1;
+    for (; t < this.count && !this.visible(t); ) t++;
+    t < this.count && this.goTo(t);
+  }
+  prev() {
+    let t = this.idx - 1;
+    for (; t >= 0 && !this.visible(t); ) t--;
+    t >= 0 && this.goTo(t, "backward");
+  }
+  setZoom(t) {
+    const e = Math.max(0.1, Math.min(8, t));
+    e !== this.zoomValue && (this.zoomValue = e, this.emit({ type: "zoom", zoom: e }));
+  }
+  setAnimate(t) {
+    this.options.animate !== t && (this.options = { ...this.options, animate: t }, this.loadAnimations(), this.emit({ type: "animation", done: this.cursor, total: this.groups.length, group: null }));
+  }
+  // ---------------- 动画 ----------------
+  loadAnimations() {
+    this.groups = this.animate ? w(this.slide.animations) : [], this.cursor = 0;
+  }
+  /**
+   * 推进一批动画。返回应播放的这一批；没有待播批次时返回 null。
+   * 真正的播放由 UI 层执行——状态机只负责「该播哪一批」。
+   */
+  playNextAnimation() {
+    if (!this.hasPendingAnimation) return null;
+    const t = this.groups[this.cursor];
+    return this.cursor++, this.emit({ type: "animation", done: this.cursor, total: this.groups.length, group: t }), t;
+  }
+  /** 直接跳到本页动画终态 */
+  finishAnimations() {
+    this.cursor !== this.groups.length && (this.cursor = this.groups.length, this.emit({ type: "animation", done: this.cursor, total: this.groups.length, group: null }));
+  }
+  // ---------------- 自动换片 ----------------
+  /** 启动自动换片计时；返回取消函数。由 UI 层在每次换页后调用。 */
+  scheduleAutoAdvance() {
+    this.cancelAutoAdvance();
+    const t = this.autoAdvanceDelay;
+    return t === null ? () => {
+    } : (this.autoTimer = setTimeout(() => {
+      this.autoTimer = null, this.next();
+    }, t), () => this.cancelAutoAdvance());
+  }
+  cancelAutoAdvance() {
+    this.autoTimer !== null && (clearTimeout(this.autoTimer), this.autoTimer = null);
+  }
+  // ---------------- 文本 / 搜索 ----------------
+  text(t) {
+    let e = this.textCache.get(t);
+    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;
+  }
+  /** 解析内部跳转目标（`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;
+  }
+  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);
+        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();
+    }), this.container.addEventListener("click", this.handleClick), this.paint();
+  }
+  // ---------------- 转发给状态机 ----------------
+  get index() {
+    return this.state.index;
+  }
+  get count() {
+    return this.state.count;
+  }
+  get slide() {
+    return this.state.slide;
+  }
+  get zoomLevel() {
+    return this.state.zoom;
+  }
+  get animationTotal() {
+    return this.state.animationTotal;
+  }
+  get animationDone() {
+    return this.state.animationDone;
+  }
+  get hasPendingAnimation() {
+    return this.state.hasPendingAnimation;
+  }
+  goTo(t, e = "forward") {
+    this.state.goTo(t, e);
+  }
+  next() {
+    this.state.next();
+  }
+  prev() {
+    this.state.prev();
+  }
+  setZoom(t) {
+    this.state.setZoom(t);
+  }
+  finishAnimations() {
+    this.state.finishAnimations();
+  }
+  search(t) {
+    return this.state.search(t);
+  }
+  text(t) {
+    return this.state.text(t);
+  }
+  setAnimate(t) {
+    this.state.setAnimate(t), this.paint();
+  }
+  playNextAnimation() {
+    return this.state.playNextAnimation() !== null;
+  }
+  // ---------------- 渲染 ----------------
+  /** 带缓存的单页 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;
+  }
+  /** 不走缓存，用于缩略图等需要独立 defs id 的场景 */
+  renderSlide(t) {
+    return d(this.presentation, this.presentation.slides[t]);
+  }
+  exportPng(t = 2, e = this.index) {
+    return y(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);
+    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 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();
+  }
+  /** 按状态机给出的隐藏集合设置元素可见性 */
+  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";
+    });
+  }
+  applyZoom() {
+    const t = this.container.querySelector("svg");
+    if (!t) return;
+    const e = this.state.zoom;
+    e === 1 ? (t.style.width = "100%", t.style.height = "100%") : (t.style.width = `${this.presentation.width * e}px`, t.style.height = `${this.presentation.height * e}px`);
+  }
+  startAutoAdvance() {
+    this.cancelAuto = this.state.scheduleAutoAdvance();
+  }
+  destroy() {
+    var t, e;
+    this.container.removeEventListener("click", this.handleClick), this.unsubscribe(), (t = this.playing) == null || t.cancel(), (e = this.cancelAuto) == null || e.call(this), this.state.destroy(), this.container.innerHTML = "", this.svgCache.clear();
+  }
+}
+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
+};

package/dist/viewer.d.ts

@@ -0,0 +1,54 @@
+import type { Presentation, Slide } from '@web-ppt/core';
+import { PresentationState, type PresentationStateOptions } from './state';
+/**
+ * 原生 DOM 查看器：`PresentationState` 之上最薄的一层绑定。
+ *
+ * 它做的全部事情只有三件——把 SVG 塞进容器、按状态设元素可见性、
+ * 在状态机说「该播这一批」时调用播放层。所有决策都在状态机里，
+ * 因此换成 React / Vue 只需重写这三件事。
+ */
+export interface ViewerOptions extends PresentationStateOptions {
+}
+export declare class Viewer {
+    private container;
+    readonly presentation: Presentation;
+    readonly state: PresentationState;
+    private svgCache;
+    private playing;
+    private cancelAuto;
+    private unsubscribe;
+    onChange: ((index: number) => void) | null;
+    onAnimStep: ((done: number, total: number) => void) | null;
+    /** 点击外部链接时回调；返回 true 表示宿主已处理，不再打开新窗口 */
+    onLinkClick: ((href: string) => boolean | void) | null;
+    constructor(container: HTMLElement, presentation: Presentation, options?: ViewerOptions);
+    get index(): number;
+    get count(): number;
+    get slide(): Slide;
+    get zoomLevel(): number;
+    get animationTotal(): number;
+    get animationDone(): number;
+    get hasPendingAnimation(): boolean;
+    goTo(i: number, direction?: 'forward' | 'backward'): void;
+    next(): void;
+    prev(): void;
+    setZoom(z: number): void;
+    finishAnimations(): void;
+    search(q: string): number[];
+    text(i: number): string;
+    setAnimate(on: boolean): void;
+    playNextAnimation(): boolean;
+    /** 带缓存的单页 SVG（主视图用） */
+    slideSvg(i: number): string;
+    /** 不走缓存，用于缩略图等需要独立 defs id 的场景 */
+    renderSlide(i: number): string;
+    exportPng(scale?: number, i?: number): Promise<Blob>;
+    private paint;
+    private play;
+    /** 按状态机给出的隐藏集合设置元素可见性 */
+    private applyVisibility;
+    private applyZoom;
+    private startAutoAdvance;
+    private handleClick;
+    destroy(): void;
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@web-ppt/viewer-core",
+  "version": "0.1.0",
+  "description": "Web-PPT 查看器的 headless 状态机与播放层：导航 / 缩放 / 搜索 / 动画批次，可被任意 UI 框架驱动",
+  "keywords": [
+    "pptx",
+    "viewer",
+    "headless",
+    "state-machine"
+  ],
+  "license": "MIT",
+  "author": "unStone",
+  "homepage": "https://github.com/unStone/web-ppt#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unStone/web-ppt.git",
+    "directory": "packages/viewer-core"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/viewer-core.js",
+  "module": "./dist/viewer-core.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/viewer-core.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "prepack": "node ../../tooling/sync-package-docs.mjs"
+  },
+  "peerDependencies": {
+    "@web-ppt/core": "^0.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}