ppt-dsl-renderer 1.1.0

package/docs/DSL.md

@@ -0,0 +1,60 @@
+# DSL 数据契约
+
+完整 TypeScript 字段定义见 `src/types/ppt-dsl.d.ts`，通过包入口以类型导出。接口延续提取来源的实际渲染行为，存在类型字段并不意味着已经实现对应视觉功能。
+
+## 文档与页面
+
+```ts
+{
+  title: string,
+  width: number,
+  height: number,
+  slides: Array<{
+    id: string,
+    background?: PptDslBackground,
+    elements: PptDslElement[],
+  }>,
+  theme?: PptDslTheme,
+}
+```
+
+文档宽高必须是正的有限数值，单位为 CSS 像素，支持小数。`slides` 不可为空，单页允许空元素数组。元素 ID 在同一页内必须唯一，不同页可以复用。默认保留原文档页序；CLI/API 的页码从 1 开始。
+
+元素 `left/top` 是页面坐标；除线条外，外框沿用 `width || 120`、`height || 40`、`rotate || 0` 的已有规则。元素按数组顺序叠放，后面的在上层，opacity 默认 1。页面边界会裁剪；不会缩小字体、自动调整布局或移动越界元素。
+
+背景支持 solid、gradient、image。渐变支持 linear/radial，颜色停靠点单位为百分比。图片 `size` 沿用现有浏览器 CSS 赋值，推荐 cover/contain；类型中的 stretch 尚未映射为 CSS 的 `100% 100%`。
+
+## 元素能力
+
+| type | 主要字段与实际行为 |
+| --- | --- |
+| text | content 为富文本 HTML；支持 defaultColor、defaultFontName、fill、lineHeight、wordSpace、inset、vAlign、vertical、fixedHeight。DOMPurify 清理后显示。内联数值字重 550–699 沿用已有行为显示为 700。 |
+| image | src；支持 fit、clip.range、flipH/V、radius、filters、outline、shadow、colorMask。clip.range 使用 0–1 归一化矩形坐标。 |
+| shape | path 和 viewBox；支持填充、渐变、轮廓、阴影、翻转及 text 富文本。直接使用给定 path，不计算 pathFormula。 |
+| line | start、end、color；支持实线/虚线/点线和箭头/圆点端点。width 表示线宽；外框来自端点差，最小宽高 24，不使用通用 rotate。 |
+| chart | chartType、data.labels、data.legends、data.series；支持 area/bar/column/line/pie/radar/ring/scatter，沿用当前 ECharts 映射。支持主题色、文字色、线条色、平滑和堆叠，关闭动画。 |
+| table | data 为行和单元格数组；单元格包含 id、text 和可选 style。支持 colWidths、cellMinHeight、outline、fill、colspan、rowspan。文本按纯文本显示；不自动补齐合并单元格结构。 |
+| latex | 有 path 与 viewBox 时绘制 SVG，否则展示 latex 字符串。没有 KaTeX/MathJax，也不把公式源码自动排成数学公式。 |
+| video | src 保留在 DSL 中但不加载；仅展示 poster，无封面时显示深色背景，忽略自动播放。 |
+| audio | src 保留但不加载；展示图标与禁用态音频控件，忽略自动播放和循环。 |
+
+## 资源与字体
+
+结构化图片、背景、封面和媒体 src 只接受 HTTP(S) URL 或 data URL。不会转换相对路径，不读取本地文件，不下载素材。富文本中的图片也应使用这两种地址，不支持依赖外部页面 CSS 的排版。`class` 按输入绑定，但包不提供自定义 class 样式注入接口。
+
+文字常用 p、h1–h5、span、strong、em、u、ol、ul、li 和内联样式。脚本及事件属性由 DOMPurify 移除。普通文字和形状文字默认字体为 Microsoft YaHei，页面继承字体为 PingFang SC、Microsoft YaHei、sans-serif；不内置字体文件。浏览器字体替换不会自动作为渲染错误报告。
+
+普通文本和形状内富文本中，段落未设置字号、且段内文字均使用明确的 px 字号时，渲染器以最小行内字号作为段落基准，避免默认 16px 字号撑大行框。每行仍按实际文字排版；显式段落字号、行高和垂直对齐设置保持不变。包含默认字号或相对字号的段落保留原有继承关系。此处理只作用于渲染 DOM，不修改输入 DSL。
+
+## 兼容边界
+
+- 文档 theme 当前不自动下沉到元素。需要效果的颜色、字体等应显式写在元素上。
+- text 的 paragraphSpace、outline、shadow，以及 shape.text 的 paragraphSpace、wordSpace 当前未实现视觉映射。
+- image 的 clip.shape、fixedRatio，shape 的 pathFormula、keypoints、special 等不在只读渲染中重新计算。
+- 表格单元格 underline 当前未映射；既有字体、间距和合并逻辑原样保留。
+- groupId、lock、name、link、页面 remark/type 等元数据不产生编辑、跳转或交互行为。
+- 不读取 PPTX，不导出图片/PDF，不修复输入，也不检测文字溢出和元素遮挡。PPTX 导出由独立浏览器入口提供，见 [Agent PPTX 导出指南](../AGENT_PPTX_EXPORT.md)。
+
+PPTX 导出还识别 text.textType、shape.pattern、线条的 broken/broken2/broken2Direction/curve/cubic/shadow 和 table.theme。它们不改变当前 HTML/Vue 预览行为。导出中的 bar 为横向、column 为竖向；普通文字、形状、线条、图表和表格使用原生对象，特殊／渐变形状、图片填充形状和有路径的公式使用 SVG 图片对象。音视频会读取实际内容并嵌入 PPTX，受到浏览器网络和 CORS 约束。
+
+校验针对文档结构、资源协议和渲染必需字段，不是完整的设计语义校验。嵌套样式或素材的运行问题仍可能通过浏览器的 error 状态返回。

package/docs/VUE.md

@@ -0,0 +1,231 @@
+# Vue 接入指南
+
+本包使用同一套九类元素组件，提供 Node 独立 HTML 和 Vue 嵌入式渲染两种入口。前端只维护编辑交互、编辑控件和业务数据，展示代码统一由本包维护。
+
+源码已经包含以下接口。使用 npm 或 tgz 安装前，维护者需要显式构建并发布包含 `dist/vue` 的版本；直接安装未构建的源码目录不能使用 `/vue` 入口。
+
+## 1. 安装与入口
+
+```bash
+yarn add ppt-dsl-renderer
+```
+
+前端需要 Vue `^3.4.21`，并在应用入口引入一次样式：
+
+```ts
+import 'ppt-dsl-renderer/style.css'
+```
+
+| 导入路径 | 导出内容 |
+| --- | --- |
+| `ppt-dsl-renderer` | Node 的 `renderToHtml()`；DSL 类型可通过 `import type` 在前端使用 |
+| `ppt-dsl-renderer/vue` | `SlideRenderer`、`ElementRenderer`、三个共用计算方法、DSL 与组件接口类型 |
+| `ppt-dsl-renderer/style.css` | 组件样式，不包含独立 HTML 的页面重置、光标隐藏规则 |
+
+Vue 组件采用预编译 ESM，应用无需编译包内 `.vue` 文件。Vue 由宿主提供，ECharts、DOMPurify 由包声明为运行依赖。Vue 是可选 peer dependency，纯 Node 调用者无需安装 Vue；使用 `/vue` 的项目必须提供 Vue。
+
+组件面向浏览器，富文本净化和图表绘制会使用 DOM；SSR 项目应在客户端挂载。组件导入不会自动创建应用、修改 `document.title` 或设置 `window.__PPT_DSL_RENDER__`。
+
+## 2. 整页与缩略图
+
+```vue
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SlideRenderer } from 'ppt-dsl-renderer/vue'
+import type { PptDslSlide } from 'ppt-dsl-renderer'
+
+const props = defineProps<{
+  slide: PptDslSlide
+  width: number
+  height: number
+  scale?: number
+}>()
+
+// transform 不改变布局占位，外层使用缩放后的尺寸。
+const previewStyle = computed(() => ({
+  width: `${props.width * (props.scale ?? 1)}px`,
+  height: `${props.height * (props.scale ?? 1)}px`,
+  overflow: 'hidden',
+}))
+</script>
+
+<template>
+  <div :style="previewStyle">
+    <SlideRenderer
+      :slide="slide"
+      :width="width"
+      :height="height"
+      :scale="scale"
+    />
+  </div>
+</template>
+```
+
+| 参数 | 类型 | 说明 |
+| --- | --- | --- |
+| `slide` | `PptDslSlide` | 必填；显示该页的背景与全部元素 |
+| `width`、`height` | `number` | 必填；DSL 原始尺寸 |
+| `scale` | `number` | 默认 `1`；从左上角缩放，不改写 DSL 坐标 |
+
+同一页可以同时显示在主画布与多个缩略图中。组件没有固定 DOM ID；形状渐变和线条箭头的 SVG ID 按 Vue 组件实例区分。根节点保留 `data-ppt-slide-id`，元素保留 `data-ppt-element-id`。多个实例中的业务 ID 可以相同，查询元素时先限定到相应画布容器。
+
+`SlideRenderer` 用于只读整页展示。编辑画布通过 `ElementRenderer` 逐个渲染元素，以便前端继续控制选择、拖动和内容编辑。
+
+## 3. 编辑画布与原生事件
+
+```vue
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ElementRenderer, getPptDslSlideStyle } from 'ppt-dsl-renderer/vue'
+import type { PptDslElement, PptDslSlide } from 'ppt-dsl-renderer'
+
+const props = defineProps<{ slide: PptDslSlide; width: number; height: number; scale: number }>()
+const emit = defineEmits<{
+  (event: 'element-pointerdown', pointer: PointerEvent, element: PptDslElement): void
+}>()
+const slideStyle = computed(() => getPptDslSlideStyle(props.slide, props.width, props.height, props.scale))
+</script>
+
+<template>
+  <div :style="[slideStyle, { position: 'relative' }]">
+    <ElementRenderer
+      v-for="(element, elementIndex) in slide.elements"
+      :key="element.id"
+      :element="element"
+      :element-index="elementIndex"
+      @pointerdown="emit('element-pointerdown', $event, element)"
+    />
+  </div>
+</template>
+```
+
+`ElementRenderer` 只接收 `element`、`elementIndex`；后者是从 `0` 开始的 DSL 数组下标，渲染层级为 `elementIndex + 1`。元素根节点负责定位、尺寸、旋转和透明度，外层画布需要 `position: relative`。不要在每个元素外增加会改变定位参照的容器。
+
+`class`、`style`、`id` 和原生事件透传到根节点。组件不会阻止 `pointerdown` 或 `dblclick` 冒泡，也不产生 `select`、`move`、`update`、`commit` 等业务事件；这些行为由前端交互组件处理。`readonly`、`editing`、`selected` 也属于前端交互组件的状态，不是本包的组件参数。
+
+## 4. 编辑插槽
+
+| 插槽 | 参数 | 保留在包中的内容 |
+| --- | --- | --- |
+| `text-editor` | `{ element, content }` | 文字容器、背景、内边距、垂直对齐等 |
+| `shape-text-editor` | `{ element, content }` | SVG 形状、文字位置、对齐与内边距 |
+| `table-cell-editor` | `{ element, cell, rowIndex, colIndex }` | table/td 结构、合并单元格、列宽、边框与单元格样式 |
+
+`element` 类型分别是 `PptDslTextElement`、`PptDslShapeElement`、`PptDslTableElement`；行列下标从 `0` 开始。插槽参数来自当前 DSL，编辑控件需要通过前端 Store 或事件更新 DSL，渲染器不会写入输入数据。
+
+没有提供对应插槽时显示默认只读内容。只读或锁定状态应通过 `v-if` 移除整个插槽；不能只在插槽内部渲染一个禁用的编辑器来期待恢复默认展示。包会为编辑内容开启文字选择，形状文字编辑区域也会开启指针事件。
+
+下面是宿主交互组件中的接入片段；`ProsemirrorEditor` 使用前端现有实现。`canEdit` 应由 `!readonly && !element.lock` 计算，`editing` 沿用前端的当前编辑状态。
+
+```vue
+<ElementRenderer
+  :element="element"
+  :element-index="elementIndex"
+  @pointerdown="handlePointerdown"
+  @dblclick="startEditing"
+>
+  <template v-if="canEdit && element.type === 'text'" #text-editor="{ content }">
+    <ProsemirrorEditor
+      :element-id="element.id"
+      :model-value="content"
+      @blur="emit('commit')"
+      @update:model-value="emit('update', { content: $event })"
+    />
+  </template>
+
+  <template v-if="canEdit && element.type === 'shape'" #shape-text-editor="{ content }">
+    <ProsemirrorEditor
+      :element-id="element.id"
+      :model-value="content"
+      @blur="emit('commit')"
+      @update:model-value="updateShapeText"
+    />
+  </template>
+
+  <template v-if="canEdit && editing && element.type === 'table'" #table-cell-editor="{ cell, rowIndex, colIndex }">
+    <div
+      contenteditable="true"
+      @pointerdown.stop
+      @blur="updateCell($event, rowIndex, colIndex)"
+    >{{ cell.text }}</div>
+  </template>
+</ElementRenderer>
+```
+
+前端保留以下回写逻辑，传入的 `element` 类型为 `PptDslElement`；`emit('update', patch)` 由父组件连接到文档 Store，`emit('commit')` 连接到撤销快照。示例只说明内容回写，不替代现有的选择、拖动或提交时机逻辑。
+
+```ts
+import { toRaw } from 'vue'
+
+const updateShapeText = (content: string) => {
+  if (props.element.type !== 'shape') return
+  emit('update', { text: { ...props.element.text, content } })
+}
+
+const updateCell = (event: FocusEvent, rowIndex: number, colIndex: number) => {
+  if (props.element.type !== 'table') return
+  const data = structuredClone(toRaw(props.element.data))
+  data[rowIndex][colIndex].text = (event.currentTarget as HTMLElement).innerText
+  emit('update', { data })
+  emit('commit')
+}
+```
+
+文字与已有形状文字的插槽可以不依赖 `editing`，以支持单击直接聚焦 ProseMirror。空形状没有 `element.text` 时不显示文字区域，前端双击逻辑负责创建该字段。编辑控件自身的光标、选区、工具栏及内部排版样式由前端负责。
+
+## 5. 共用计算与类型
+
+```ts
+import {
+  getPptDslElementFrame,
+  getPptDslLineFrame,
+  getPptDslSlideStyle,
+} from 'ppt-dsl-renderer/vue'
+import type { PptDslElement, ElementRendererSlots } from 'ppt-dsl-renderer/vue'
+```
+
+| 方法 | 返回值与边界 |
+| --- | --- |
+| `getPptDslElementFrame(element)` | `{ left, top, width, height, rotate }`，与元素定位一致 |
+| `getPptDslLineFrame(line)` | 线条的外框，保留当前最小画布规则 |
+| `getPptDslSlideStyle(slide, width, height, scale = 1)` | 页面背景、尺寸、缩放样式；不包含 `position: relative` |
+
+旋转后的轴对齐选区计算、拖动、缩放最小尺寸及新建 ID 属于编辑逻辑，继续放在前端。公开类型声明随包发布，不要求使用方执行声明生成。
+
+## 6. 迁移现有渲染器
+
+已有渲染器的 Vue 项目可以按以下顺序接入：
+
+1. 在应用入口引入一次 `ppt-dsl-renderer/style.css`。
+2. 从包中导入 DSL 类型；也可在原类型文件中使用 `export type * from 'ppt-dsl-renderer'` 保留已有导入路径。
+3. 将整页预览与缩略图替换为 `SlideRenderer`，外层继续管理缩放后的布局占位。
+4. 编辑画布使用 `ElementRenderer`，通过插槽注入编辑控件，事件连接到宿主的选择、拖动和数据更新逻辑。
+5. 共用的展示计算方法改为从包导入，选区计算及其他编辑规则继续由宿主维护。
+6. 验证展示和编辑功能后，删除重复的本地展示实现。
+
+删除旧组件前，先迁移其中的编辑回写逻辑，避免丢失编辑能力。
+
+前端工具文件可采用以下转导出方式，内部的旋转边界计算复用同一外框规则：
+
+```ts
+export {
+  getPptDslElementFrame,
+  getPptDslLineFrame,
+  getPptDslSlideStyle,
+} from 'ppt-dsl-renderer/vue'
+
+import { getPptDslElementFrame } from 'ppt-dsl-renderer/vue'
+// 本地选区计算可复用这个外框方法。
+```
+
+PPTX 导出、富文本转 PPTX、保存接口、Store、撤销重做、工具栏和 ProseMirror 继续留在前端。删除本地渲染组件后，只有确认没有其他引用时才清理前端的直接依赖。
+
+## 7. 维护与验证边界
+
+维护者显式执行 `yarn build` 时会生成 `dist/browser` 和 `dist/vue`。`yarn pack` 的检查要求两套 JS/CSS 及公开类型存在，不自动构建，也不判断已有产物是否陈旧；每次发布都应先显式重新构建。
+
+Vue 图表会等待字体就绪，响应 DSL 对象替换或内部字段变更，并在 DOM 尺寸更新后重绘；卸载会释放 ECharts 实例。尺寸变更应通过 DSL 的 `width`、`height` 表达，外层 `scale` 只缩放显示。隐藏容器恢复可见而 DSL 尺寸不变的自动测量不属于当前接口。
+
+Node 独立 HTML 仍使用 `#ppt-slide` 和 `window.__PPT_DSL_RENDER__`；Vue 入口不提供这个全局完成协议。图片、字体的真实加载及 ECharts 的实际绘制结果需要在使用方浏览器中核对。
+
+本仓库测试使用内存编译与 JSDOM 验证组件行为，ECharts 使用交互替身；公开类型检查只覆盖一个消费端夹具。这些检查不替代真实 tgz 安装和页面视觉验收，也不运行 build、vue-tsc 或本地服务。

package/examples/deck.json

@@ -0,0 +1,302 @@
+{
+  "title": "DSL 渲染示例",
+  "width": 1000,
+  "height": 562.5,
+  "slides": [
+    {
+      "id": "cover",
+      "background": {
+        "type": "solid",
+        "color": "#f4f7fc"
+      },
+      "elements": [
+        {
+          "id": "panel",
+          "type": "shape",
+          "left": 600,
+          "top": 0,
+          "width": 400,
+          "height": 562.5,
+          "path": "M0 0H400V563H0Z",
+          "viewBox": [
+            400,
+            563
+          ],
+          "gradient": {
+            "type": "linear",
+            "rotate": 25,
+            "colors": [
+              {
+                "color": "#315fa8",
+                "pos": 0
+              },
+              {
+                "color": "#8bb6ff",
+                "pos": 100
+              }
+            ]
+          }
+        },
+        {
+          "id": "headline",
+          "type": "text",
+          "left": 60,
+          "top": 110,
+          "width": 500,
+          "height": 135,
+          "content": "<p style=\"font-size:52px;font-weight:700\">让 DSL<br>成为可见的页面</p>",
+          "defaultColor": "#17233e"
+        },
+        {
+          "id": "subtitle",
+          "type": "text",
+          "left": 63,
+          "top": 288,
+          "width": 460,
+          "height": 110,
+          "content": "<p style=\"font-size:23px\">生成 HTML，交给 agent 截图审查。</p><p style=\"font-size:18px;color:#64748b\">固定尺寸 · 原始页码 · 完成状态</p>"
+        },
+        {
+          "id": "badge",
+          "type": "shape",
+          "left": 664,
+          "top": 185,
+          "width": 270,
+          "height": 150,
+          "path": "M0 0H270V150H0Z",
+          "viewBox": [
+            270,
+            150
+          ],
+          "fill": "#fff",
+          "text": {
+            "content": "<p style=\"font-size:38px;font-weight:700\">DSL → HTML</p>",
+            "align": "middle",
+            "defaultColor": "#315fa8"
+          }
+        },
+        {
+          "id": "underline",
+          "type": "line",
+          "left": 65,
+          "top": 430,
+          "start": [
+            0,
+            0
+          ],
+          "end": [
+            400,
+            0
+          ],
+          "width": 3,
+          "color": "#315fa8",
+          "points": [
+            "",
+            "arrow"
+          ]
+        }
+      ]
+    },
+    {
+      "id": "data",
+      "background": {
+        "type": "solid",
+        "color": "#fff"
+      },
+      "elements": [
+        {
+          "id": "heading",
+          "type": "text",
+          "left": 54,
+          "top": 38,
+          "width": 890,
+          "height": 65,
+          "content": "<p style=\"font-size:36px;font-weight:700\">图表与表格</p>",
+          "defaultColor": "#17233e"
+        },
+        {
+          "id": "chart",
+          "type": "chart",
+          "left": 52,
+          "top": 135,
+          "width": 550,
+          "height": 340,
+          "chartType": "column",
+          "themeColors": [
+            "#315fa8",
+            "#71b5a6"
+          ],
+          "data": {
+            "labels": [
+              "第一阶段",
+              "第二阶段",
+              "第三阶段"
+            ],
+            "legends": [
+              "计划",
+              "完成"
+            ],
+            "series": [
+              [
+                40,
+                65,
+                90
+              ],
+              [
+                35,
+                61,
+                86
+              ]
+            ]
+          }
+        },
+        {
+          "id": "table",
+          "type": "table",
+          "left": 636,
+          "top": 160,
+          "width": 310,
+          "height": 265,
+          "colWidths": [
+            0.55,
+            0.45
+          ],
+          "cellMinHeight": 52,
+          "outline": {
+            "color": "#dce3ef",
+            "width": 1,
+            "style": "solid"
+          },
+          "data": [
+            [
+              {
+                "id": "h1",
+                "text": "检查项",
+                "style": {
+                  "bold": true,
+                  "backcolor": "#edf2fa"
+                }
+              },
+              {
+                "id": "h2",
+                "text": "状态",
+                "style": {
+                  "bold": true,
+                  "backcolor": "#edf2fa"
+                }
+              }
+            ],
+            [
+              {
+                "id": "a1",
+                "text": "字体排版"
+              },
+              {
+                "id": "a2",
+                "text": "人工审查"
+              }
+            ],
+            [
+              {
+                "id": "b1",
+                "text": "图片位置"
+              },
+              {
+                "id": "b2",
+                "text": "人工审查"
+              }
+            ],
+            [
+              {
+                "id": "c1",
+                "text": "图表内容"
+              },
+              {
+                "id": "c2",
+                "text": "人工审查"
+              }
+            ]
+          ]
+        },
+        {
+          "id": "note",
+          "type": "text",
+          "left": 60,
+          "top": 492,
+          "width": 880,
+          "height": 34,
+          "content": "<p style=\"font-size:16px;color:#64748b\">ready 表示渲染完成，视觉质量由调用方 agent 判断。</p>"
+        }
+      ]
+    },
+    {
+      "id": "media",
+      "background": {
+        "type": "solid",
+        "color": "#f4f7fc"
+      },
+      "elements": [
+        {
+          "id": "heading",
+          "type": "text",
+          "left": 54,
+          "top": 38,
+          "width": 890,
+          "height": 65,
+          "content": "<p style=\"font-size:36px;font-weight:700\">图片、公式与静态媒体</p>",
+          "defaultColor": "#17233e"
+        },
+        {
+          "id": "picture",
+          "type": "image",
+          "left": 54,
+          "top": 138,
+          "width": 425,
+          "height": 239,
+          "src": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDUwIiB2aWV3Qm94PSIwIDAgODAwIDQ1MCI+PHJlY3Qgd2lkdGg9IjgwMCIgaGVpZ2h0PSI0NTAiIGZpbGw9IiNlNmVmZmYiLz48Y2lyY2xlIGN4PSI2MTAiIGN5PSIxMTUiIHI9Ijc1IiBmaWxsPSIjOTRiNmZmIi8+PHBhdGggZD0iTTAgNDAwTDE4MCAyMDBMMzQwIDM3MEw1NDAgMTcwTDgwMCA0MDBWNDUwSDBaIiBmaWxsPSIjNDU3NWNmIi8+PHBhdGggZD0iTTAgNDMwTDI1MCAzMTBMNDEwIDQwNUw2NDAgMzAwTDgwMCA0MTVWNDUwSDBaIiBmaWxsPSIjMjM0NTgyIi8+PC9zdmc+",
+          "radius": 12,
+          "fit": "cover"
+        },
+        {
+          "id": "video",
+          "type": "video",
+          "left": 524,
+          "top": 138,
+          "width": 422,
+          "height": 239,
+          "src": "https://example.invalid/demo.mp4",
+          "poster": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDUwIiB2aWV3Qm94PSIwIDAgODAwIDQ1MCI+PHJlY3Qgd2lkdGg9IjgwMCIgaGVpZ2h0PSI0NTAiIGZpbGw9IiNlNmVmZmYiLz48Y2lyY2xlIGN4PSI2MTAiIGN5PSIxMTUiIHI9Ijc1IiBmaWxsPSIjOTRiNmZmIi8+PHBhdGggZD0iTTAgNDAwTDE4MCAyMDBMMzQwIDM3MEw1NDAgMTcwTDgwMCA0MDBWNDUwSDBaIiBmaWxsPSIjNDU3NWNmIi8+PHBhdGggZD0iTTAgNDMwTDI1MCAzMTBMNDEwIDQwNUw2NDAgMzAwTDgwMCA0MTVWNDUwSDBaIiBmaWxsPSIjMjM0NTgyIi8+PC9zdmc+",
+          "autoplay": true
+        },
+        {
+          "id": "formula",
+          "type": "latex",
+          "left": 54,
+          "top": 409,
+          "width": 425,
+          "height": 75,
+          "latex": "E = mc²"
+        },
+        {
+          "id": "audio",
+          "type": "audio",
+          "left": 524,
+          "top": 417,
+          "width": 422,
+          "height": 60,
+          "src": "https://example.invalid/demo.mp3",
+          "autoplay": true
+        },
+        {
+          "id": "media-note",
+          "type": "text",
+          "left": 54,
+          "top": 509,
+          "width": 890,
+          "height": 28,
+          "content": "<p style=\"font-size:14px;color:#64748b\">左右为图片与视频封面；音视频源为占位地址，静态渲染不会请求它们。</p>"
+        }
+      ]
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "ppt-dsl-renderer",
+  "version": "1.1.0",
+  "description": "Render PPT DSL with Vue components or standalone, agent-friendly HTML slides.",
+  "type": "module",
+  "license": "MIT",
+  "engines": {
+    "node": ">=22"
+  },
+  "packageManager": "yarn@1.22.19",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./vue": {
+      "types": "./src/vue.d.ts",
+      "import": "./dist/vue/renderer.js"
+    },
+    "./pptx": {
+      "types": "./src/pptx.d.ts",
+      "import": "./dist/pptx/index.js"
+    },
+    "./style.css": "./dist/vue/renderer.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "types": "./src/index.d.ts",
+  "bin": {
+    "ppt-dsl-renderer": "./dist/cli.js"
+  },
+  "files": [
+    "src/index.d.ts",
+    "src/vue.d.ts",
+    "src/pptx.d.ts",
+    "src/types",
+    "dist",
+    "AGENT_USAGE.md",
+    "AGENT_PPTX_EXPORT.md",
+    "docs",
+    "examples/deck.json",
+    "third-party-licenses",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "scripts": {
+    "build": "vite build && vite build --config vite.vue.config.js && vite build --config vite.pptx.config.js && vite build --config vite.pptx-module.config.js && vite build --config vite.node.config.js && vite build --config vite.cli.config.js",
+    "test": "node --test tests/*.test.js",
+    "coverage": "node --experimental-test-coverage --test tests/*.test.js",
+    "prepack": "node scripts/check-package.js"
+  },
+  "dependencies": {
+    "dompurify": "3.3.1",
+    "echarts": "6.1.0",
+    "playwright-core": "1.62.1",
+    "pptxgenjs": "3.12.0",
+    "svg-pathdata": "7.2.0",
+    "tinycolor2": "1.6.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.21"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "4.1.0",
+    "@vue/compiler-sfc": "3.4.21",
+    "jsdom": "26.1.0",
+    "jszip": "3.10.1",
+    "sass": "1.62.1",
+    "typescript": "5.0.4",
+    "vite": "4.5.9",
+    "vue": "3.4.21"
+  },
+  "keywords": [
+    "ppt",
+    "dsl",
+    "html",
+    "agent",
+    "presentation"
+  ]
+}