html2pptx-local-mcp 1.1.19 → 1.1.21

package/app/docs/content.js

@@ -179,14 +179,19 @@ npx skills add https://html2pptx.app -a cursor
 # Windsurf
 npx skills add https://html2pptx.app -a windsurf
 
+# Grok Build
+npx --yes --package html2pptx-local-mcp@latest html2pptx-install-skills grok
+
 # Preview published skills without installing
 npx skills add https://html2pptx.app --list
 
 # More agents / multiple targets: use the interactive selector
 npx skills add https://html2pptx.app
 
-# Claude Code users: run this one line
-npx -y -p html2pptx-local-mcp@latest html2pptx-install-mcp claude`;
+# Claude Code / Codex / Grok Build users: run the matching one line for MCP.
+npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp claude
+npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp codex
+npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp grok`;
 
 const SKILL_INSTALL_COMMAND_JA = `# 使うエージェントのコマンドを選択
 # Claude Code
@@ -201,14 +206,19 @@ npx skills add https://html2pptx.app -a cursor
 # Windsurf
 npx skills add https://html2pptx.app -a windsurf
 
+# Grok Build
+npx --yes --package html2pptx-local-mcp@latest html2pptx-install-skills grok
+
 # インストールせずに公開Skillを確認
 npx skills add https://html2pptx.app --list
 
 # その他のエージェント / 複数指定は対話形式で選択
 npx skills add https://html2pptx.app
 
-# Claude Codeユーザーはこの1行でOK
-npx -y -p html2pptx-local-mcp@latest html2pptx-install-mcp claude`;
+# Claude Code / Codex / Grok Build ユーザーは MCP 用の該当行を実行。
+npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp claude
+npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp codex
+npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp grok`;
 
 const SKILL_INVOCATION_EXAMPLE = `# 例: Claude Code でスライド作成 → PPTX出力
 
@@ -243,8 +253,12 @@ const SKILL_AVAILABLE_LIST = [
   },
 ];
 
-const MCP_INSTALL_EXAMPLE = `# Claude Codeユーザーはこの1行でOK
-npx -y -p html2pptx-local-mcp@latest html2pptx-install-mcp claude`;
+const MCP_INSTALL_EXAMPLE = `# Claude Code / Codex / Grok Build ユーザーは該当する1行でOK
+npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp claude
+npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp codex
+
+# Grok Build
+npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp grok`;
 
 const MCP_CONFIG_EXAMPLE = `// 方法2: 設定ファイルに手動追加
 
@@ -256,7 +270,7 @@ const MCP_CONFIG_EXAMPLE = `// 方法2: 設定ファイルに手動追加
   "mcpServers": {
     "html2pptx": {
       "command": "npx",
-      "args": ["-y", "-p", "html2pptx-local-mcp@latest", "html2pptx-mcp"],
+      "args": ["--yes", "--package", "html2pptx-local-mcp@latest", "html2pptx-mcp"],
       "env": {
         "PPTX_STUDIO_API_KEY": "sk_live_xxxx",
         "PPTX_STUDIO_BASE_URL": "http://127.0.0.1:<app-port>"
@@ -749,7 +763,7 @@ export const DOCS_COPY = {
     skillsDescription:
       'Skills are packaged capabilities that extend AI coding agents with domain-specific knowledge and workflows. The html2pptx.app skill teaches your agent how to author slide-safe HTML, validate it against the PPTX conversion contract, optionally open the local visual editor, export through remote or local MCP workflows, and publish HTML template drafts through its built-in remote MCP publishing workflow. Install once, and your agent can convert natural language instructions into production-ready PowerPoint files or creator-owned HTML drafts.',
     skillsHowItWorks: 'The skill bundles four core capabilities: (1) HTML authoring knowledge -- the rules for writing HTML/CSS that converts cleanly to editable PowerPoint, (2) MCP-based export automation -- connecting to the remote html2pptx.app MCP server or a local stdio MCP server to create jobs, poll status, and retrieve results, (3) local visual editing -- opening edit-slide through a localhost bridge when the user wants to inspect or tweak the HTML before export, and (4) template publishing -- requiring HTML drafts to go through the remote MCP validate/publish loop. The agent should ask before adding a local MCP server because that changes the user’s MCP configuration.',
-    skillsCompatibility: 'Works with 18+ AI agents including Claude Code, Cursor, GitHub Copilot, Windsurf, Cline, Codex, and more. Use the skills CLI command for the specific agent you use, or the interactive selector for other supported agents.',
+    skillsCompatibility: 'Works with 18+ AI agents including Claude Code, Grok Build, Cursor, GitHub Copilot, Windsurf, Cline, Codex, and more. Use the skills CLI command for Claude Code, Codex, Cursor, and Windsurf. For Grok Build, use the Grok-specific skills installer shown below.',
     skillsWorkflowTitle: 'Workflow',
 	    skillsWorkflow: [
 	      'Agent receives a user request (e.g., "Create a deck from these meeting notes")',
@@ -813,7 +827,7 @@ html2pptx edit ./html2pptx/slides.html --no-open`,
         step: '1',
         title: 'Install MCP + Skill',
         icons: ['claude-code', 'codex', 'cursor', 'windsurf'],
-        body: 'Choose the command for the agent you actually use: Claude Code, Codex, Cursor, or Windsurf. For other supported agents or multiple targets, use the interactive selector. Avoid --yes unless you intentionally want to install into every detected agent directory.',
+        body: 'Choose the command for the agent you actually use: Claude Code, Codex, Cursor, or Windsurf. For Grok Build, use the Grok-specific installer. For other supported agents or multiple targets, use the interactive selector. Avoid --yes unless you intentionally want to install into every detected agent directory.',
         code: SKILL_INSTALL_COMMAND_EN,
       },
       {
@@ -850,7 +864,7 @@ echo 'HTML2PPTX_API_KEY=sk_live_xxxx' >> .env`,
     mcpDescription:
       'MCP (Model Context Protocol) is an open protocol that exposes backend capabilities to AI agents through a standardized tool interface. html2pptx.app supports two MCP surfaces: the remote HTTP MCP endpoint at /mcp for export, usage, docs, templates, catalog, and HTML template publishing workflows, and the local stdio MCP server for export tools plus local edit-slide sessions through a localhost bridge. Use remote MCP when the agent needs to convert HTML to PPTX or create an HTML template draft. Use local stdio MCP only when the agent must open, preview, or edit a local HTML file on the user machine; local MCP does not publish templates.',
     mcpSetupTitle: 'Installation & Setup',
-    mcpSetupLead: 'For Claude Code, users can run one command to register both remote export tools and local edit-slide. Remote MCP follows the hosted service; local MCP uses html2pptx-local-mcp@latest so future starts pick up the newest published package.',
+    mcpSetupLead: 'Claude Code, Codex, and Grok Build users can run one command to register both remote export tools and local edit-slide. Remote MCP follows the hosted service; local MCP uses html2pptx-local-mcp@latest so future starts pick up the newest published package.',
     mcpEditorTabs: [
       {
         id: 'claude-code',
@@ -858,22 +872,32 @@ echo 'HTML2PPTX_API_KEY=sk_live_xxxx' >> .env`,
         icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/claude/default.svg',
         recommended: true,
         steps: [
-          { title: 'Claude Code users: run this one line', body: 'This registers remote export as `html2pptx`, then writes local edit-slide as `html2pptx-local` directly into Claude Code user config.', code: `npx -y -p html2pptx-local-mcp@latest html2pptx-install-mcp claude` },
+          { title: 'Claude Code users: run this one line', body: 'This registers remote export as `html2pptx`, then writes local edit-slide as `html2pptx-local` directly into Claude Code user config.', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp claude` },
           { title: 'Manual remote setup', body: 'If you only need hosted export tools, add the remote MCP server directly.', code: `claude mcp add --scope user --transport http html2pptx https://html2pptx.app/mcp` },
-          { title: 'Compatible local edit-slide setup', body: 'If Claude Code stdio registration is unreliable, use the installer because it writes the local server entry directly.', code: `npx -y -p html2pptx-local-mcp@latest html2pptx-install-mcp claude` },
+          { title: 'Compatible local edit-slide setup', body: 'If Claude Code stdio registration is unreliable, use the installer because it writes the local server entry directly.', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp claude` },
         ],
         tip: 'The installer registers the remote MCP with user scope and writes the local stdio MCP directly to Claude Code user config for better compatibility.',
       },
+      {
+        id: 'grok-build',
+        label: 'Grok Build',
+        steps: [
+          { title: 'Install MCP for Grok Build', body: 'Run the Grok installer. It registers remote export as `html2pptx` and local edit-slide as `html2pptx-local` through `grok mcp add`.', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp grok` },
+          { title: 'Install Skills for Grok Build', body: 'Install the published html2pptx skills into Grok Build’s native skills directory. This does not change MCP configuration.', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-skills grok` },
+        ],
+        tip: 'Use `grok inspect` if you want to confirm which project skills and MCP servers Grok discovered.',
+      },
       {
         id: 'codex',
         label: 'Codex',
         icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/openai/light.svg',
         steps: [
-          { title: 'Run the CLI command (recommended)', body: 'Add the hosted remote MCP server. OAuth authentication will start automatically.', code: `codex mcp add html2pptx --url https://html2pptx.app/mcp` },
+          { title: 'Run one command (recommended)', body: 'This registers remote export as `html2pptx`, then adds local edit-slide as `html2pptx-local` using the published package.', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp codex` },
           { title: 'Manual remote setup', body: 'If you only need hosted export tools, add the remote MCP server directly.', code: `codex mcp add html2pptx --url https://html2pptx.app/mcp` },
-          { title: 'Optional local stdio MCP for edit-slide', body: 'Use this only when Codex needs to launch local edit-slide for a `.html` file. It runs from the published package, so no repository checkout is required.', code: `codex mcp add html2pptx-local -- npx -y -p html2pptx-local-mcp@latest html2pptx-mcp` },
-          { title: 'Manual setup via codex.json', body: 'Alternatively, create or edit codex.json in your project root.', code: `{\n  "mcpServers": {\n    "html2pptx": {\n      "type": "url",\n      "url": "https://html2pptx.app/mcp"\n    }\n  }\n}` },
+          { title: 'Optional local stdio MCP for edit-slide', body: 'Use this only when Codex needs to launch local edit-slide for a `.html` file. It runs from the published package, so no repository checkout is required.', code: `codex mcp add html2pptx-local -- npx --yes --package html2pptx-local-mcp@latest html2pptx-mcp` },
+          { title: 'Manual remote setup via codex.json', body: 'Alternatively, create or edit codex.json in your project root for the hosted remote server.', code: `{\n  "mcpServers": {\n    "html2pptx": {\n      "type": "url",\n      "url": "https://html2pptx.app/mcp"\n    }\n  }\n}` },
         ],
+        tip: 'The installer runs the two Codex MCP add commands in order and continues if either server is already registered.',
       },
       {
         id: 'cursor',
@@ -1593,7 +1617,7 @@ echo 'HTML2PPTX_API_KEY=sk_live_xxxx' >> .env`,
     skillsDescription:
       'Skillsは、AIコーディングエージェントにドメイン固有の知識とワークフローを追加するパッケージ機能です。html2pptx.app のスキルをインストールすると、エージェントがスライド用HTMLの作成方法を理解し、PPTX変換契約に対する検証を行い、必要に応じてローカル Visual Editor を開き、remote MCP または local MCP のワークフローでエクスポートし、内蔵のremote MCP公開ワークフローでHTMLテンプレートdraftを作成できます。自然言語の指示だけで、本番品質のPowerPointファイルや作成者所有のHTML draftを生成できます。',
     skillsHowItWorks: 'スキルには4つのコア機能がバンドルされています: (1) HTMLオーサリング知識 -- 高品質なPowerPointに変換されるHTML/CSSの書き方ルール、(2) MCPベースのエクスポート自動化 -- remote MCP または local stdio MCP に接続してジョブ作成・ステータスポーリング・結果取得を行う仕組み、(3) ローカル Visual Editor -- ユーザーがPPTX出力前にHTMLを目視確認・微調整したい場合に edit-slide を localhost bridge 経由で開く仕組み、(4) テンプレート公開 -- HTML draft を remote MCP の validate/publish ループに限定する仕組みです。local MCP の追加はユーザーのMCP設定を変更するため、エージェントは必ず事前に確認します。',
-    skillsCompatibility: 'Claude Code、Cursor、GitHub Copilot、Windsurf、Cline、Codex 等 18以上のAIエージェントに対応。使うエージェントに対応する skills CLI コマンドを選ぶか、その他の対応エージェントは対話形式で選択します。',
+    skillsCompatibility: 'Claude Code、Grok Build、Cursor、GitHub Copilot、Windsurf、Cline、Codex 等 18以上のAIエージェントに対応。Claude Code、Codex、Cursor、Windsurf は skills CLI コマンドを使います。Grok Build は下に表示している Grok 専用の skills installer を使います。',
     skillsWorkflowTitle: 'ワークフロー',
 	    skillsWorkflow: [
 	      'エージェントがユーザーリクエストを受信（例: 「この会議メモからデッキを作成して」）',
@@ -1657,7 +1681,7 @@ html2pptx edit ./html2pptx/slides.html --no-open`,
         step: '1',
         title: 'MCP + スキルをインストール',
         icons: ['claude-code', 'codex', 'cursor', 'windsurf'],
-        body: 'Claude Code、Codex、Cursor、Windsurf のうち、実際に使うエージェントのコマンドを選んで実行してください。その他の対応エージェントや複数指定の場合は対話形式で選択します。--yes は検出された全エージェントのディレクトリへ入るため、全対応が必要な場合以外は使わないでください。',
+        body: 'Claude Code、Codex、Cursor、Windsurf のうち、実際に使うエージェントのコマンドを選んで実行してください。Grok Build は Grok 専用 installer を使います。その他の対応エージェントや複数指定の場合は対話形式で選択します。--yes は検出された全エージェントのディレクトリへ入るため、全対応が必要な場合以外は使わないでください。',
         code: SKILL_INSTALL_COMMAND_JA,
       },
       {
@@ -1694,7 +1718,7 @@ echo 'HTML2PPTX_API_KEY=sk_live_xxxx' >> .env`,
     mcpDescription:
       'MCP (Model Context Protocol) は、標準化されたツールインターフェースを通じてAIエージェントにバックエンド機能を公開するオープンプロトコルです。html2pptx.app は2種類のMCPサーフェスを提供します。remote HTTP MCP (`/mcp`) はエクスポート、usage、docs、templates、catalog、HTMLテンプレート公開に使います。local stdio MCP は同じエクスポート系ツールに加えて、localhost bridge 経由でローカルHTMLを edit-slide で開くために使います。HTMLをPPTXに変換する、またはHTMLテンプレートdraftを作るなら remote MCP、ユーザーPC上の `.html` を開いてプレビュー・編集するなら local MCP を選びます。local MCP はテンプレート公開には使いません。',
     mcpSetupTitle: 'インストール & セットアップ',
-    mcpSetupLead: 'Claude Codeユーザーは1コマンドで remote export と local edit-slide の両方を登録できます。remote MCP は hosted service 側の更新が反映され、local MCP は html2pptx-local-mcp@latest 経由で起動するため、次回起動時に新しい公開パッケージへ追従できます。',
+    mcpSetupLead: 'Claude Code、Codex、Grok Build は1コマンドで remote export と local edit-slide の両方を登録できます。remote MCP は hosted service 側の更新が反映され、local MCP は html2pptx-local-mcp@latest 経由で起動するため、次回起動時に新しい公開パッケージへ追従できます。',
     mcpEditorTabs: [
       {
         id: 'claude-code',
@@ -1702,22 +1726,32 @@ echo 'HTML2PPTX_API_KEY=sk_live_xxxx' >> .env`,
         icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/claude/default.svg',
         recommended: true,
         steps: [
-          { title: 'Claude Codeユーザーはこの1行でOK', body: '`html2pptx` として remote export を登録し、`html2pptx-local` として local edit-slide を Claude Code の user config に直接書き込みます。', code: `npx -y -p html2pptx-local-mcp@latest html2pptx-install-mcp claude` },
+          { title: 'Claude Codeユーザーはこの1行でOK', body: '`html2pptx` として remote export を登録し、`html2pptx-local` として local edit-slide を Claude Code の user config に直接書き込みます。', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp claude` },
           { title: 'remote だけ手動セットアップ', body: 'PPTX出力などのホスト側ツールだけ必要な場合はこちらを使います。', code: `claude mcp add --scope user --transport http html2pptx https://html2pptx.app/mcp` },
-          { title: 'local edit-slide 互換セットアップ', body: 'Claude Code の stdio 登録が不安定な場合も、このインストーラーが local server 設定を直接書き込みます。', code: `npx -y -p html2pptx-local-mcp@latest html2pptx-install-mcp claude` },
+          { title: 'local edit-slide 互換セットアップ', body: 'Claude Code の stdio 登録が不安定な場合も、このインストーラーが local server 設定を直接書き込みます。', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp claude` },
         ],
         tip: 'このインストーラーは remote MCP を user scope で登録し、互換性のため local stdio MCP は Claude Code の user config に直接書き込みます。',
       },
+      {
+        id: 'grok-build',
+        label: 'Grok Build',
+        steps: [
+          { title: 'Grok Build 向けに MCP を追加', body: 'Grok installer を実行します。remote export は `html2pptx`、local edit-slide は `html2pptx-local` として `grok mcp add` で登録されます。', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp grok` },
+          { title: 'Grok Build 向けに Skills を追加', body: '公開済みの html2pptx skills を Grok Build の native skills ディレクトリへ入れます。MCP設定は変更しません。', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-skills grok` },
+        ],
+        tip: 'Grok が検出した project skills と MCP server を確認したい場合は `grok inspect` を使ってください。',
+      },
       {
         id: 'codex',
         label: 'Codex',
         icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/openai/light.svg',
         steps: [
-          { title: 'CLIコマンドで追加（推奨）', body: 'hosted remote MCP server を追加します。OAuth認証が自動的に開始されます。', code: `codex mcp add html2pptx --url https://html2pptx.app/mcp` },
+          { title: '1コマンドで追加（推奨）', body: '`html2pptx` として remote export を登録し、`html2pptx-local` として local edit-slide を公開パッケージ経由で追加します。', code: `npx --yes --package html2pptx-local-mcp@latest html2pptx-install-mcp codex` },
           { title: 'remote だけ手動セットアップ', body: 'PPTX出力などのホスト側ツールだけ必要な場合はこちらを使います。', code: `codex mcp add html2pptx --url https://html2pptx.app/mcp` },
-          { title: 'edit-slide 用 local stdio MCP（任意）', body: 'Codex がローカル `.html` を edit-slide で開く必要がある場合だけ追加します。公開パッケージから起動するため、リポジトリの checkout は不要です。', code: `codex mcp add html2pptx-local -- npx -y -p html2pptx-local-mcp@latest html2pptx-mcp` },
-          { title: 'codex.json で手動セットアップ', body: 'コマンドが使えない場合は、プロジェクトルートの codex.json に以下を追加してください。', code: `{\n  "mcpServers": {\n    "html2pptx": {\n      "type": "url",\n      "url": "https://html2pptx.app/mcp"\n    }\n  }\n}` },
+          { title: 'edit-slide 用 local stdio MCP（任意）', body: 'Codex がローカル `.html` を edit-slide で開く必要がある場合だけ追加します。公開パッケージから起動するため、リポジトリの checkout は不要です。', code: `codex mcp add html2pptx-local -- npx --yes --package html2pptx-local-mcp@latest html2pptx-mcp` },
+          { title: 'codex.json で remote を手動セットアップ', body: 'コマンドが使えない場合は、hosted remote server 用にプロジェクトルートの codex.json に以下を追加してください。', code: `{\n  "mcpServers": {\n    "html2pptx": {\n      "type": "url",\n      "url": "https://html2pptx.app/mcp"\n    }\n  }\n}` },
         ],
+        tip: 'インストーラーは Codex の2つの MCP add コマンドを順に実行し、すでに登録済みの場合は継続します。',
       },
       {
         id: 'cursor',

package/cli/dist/commands/edit.d.ts

@@ -18,7 +18,7 @@ declare function normalizeBaseUrl(raw: string): URL;
 declare function readRegisteredEditorBaseUrl(root: string): Promise<string | null>;
 declare function resolveEditorBaseUrl(root: string, explicitBaseUrl: string | undefined): Promise<URL>;
 declare function buildEditorUrl(baseUrl: URL, rel: string, bridgeUrl: string, sessionToken: string): URL;
-declare function createBridgeServer(ctx: BridgeContext): import("http").Server<typeof IncomingMessage, typeof ServerResponse>;
+declare function createBridgeServer(ctx: BridgeContext): import("node:http").Server<typeof IncomingMessage, typeof ServerResponse>;
 declare function listen(server: ReturnType<typeof createBridgeServer>, requestedPort: number): Promise<number>;
 export declare function editCommand(input: string | undefined, options?: EditOptions): Promise<void>;
 export declare const editCommandInternalsForTest: {

package/cli/dist/commands/edit.js

@@ -2,14 +2,46 @@ import { createHash, randomBytes, timingSafeEqual } from "node:crypto";
 import { spawn } from "node:child_process";
 import { createServer } from "node:http";
 import { platform } from "node:os";
-import { mkdir, readFile, realpath, stat, writeFile, } from "node:fs/promises";
+import { mkdir, readdir, readFile, realpath, stat, writeFile, } from "node:fs/promises";
 import { dirname, extname, join, relative, resolve, sep, } from "node:path";
 import * as p from "@clack/prompts";
 import pc from "picocolors";
 const AUTO_PORT = 0;
 const MAX_WRITE_BYTES = 5 * 1024 * 1024;
+const MAX_ASSET_BYTES = 64 * 1024 * 1024;
 const ALLOWED_EXTENSIONS = [".html", ".htm"];
 const ALLOWED_EXT = new Set(ALLOWED_EXTENSIONS);
+const ASSET_IMAGE_EXTENSIONS = [".png", ".jpg", ".jpeg", ".gif", ".webp", ".svg", ".avif"];
+const ASSET_VIDEO_EXTENSIONS = [".mp4", ".webm", ".mov", ".m4v", ".ogv"];
+const ASSET_VIDEO_EXT = new Set(ASSET_VIDEO_EXTENSIONS);
+const ASSET_MEDIA_EXT = new Set([...ASSET_IMAGE_EXTENSIONS, ...ASSET_VIDEO_EXTENSIONS]);
+const ASSET_CONTENT_TYPES = {
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".gif": "image/gif",
+    ".webp": "image/webp",
+    ".svg": "image/svg+xml",
+    ".avif": "image/avif",
+    ".mp4": "video/mp4",
+    ".webm": "video/webm",
+    ".mov": "video/quicktime",
+    ".m4v": "video/x-m4v",
+    ".ogv": "video/ogg",
+};
+const ASSET_CONTENT_TYPE_EXT = {
+    "image/png": ".png",
+    "image/jpeg": ".jpg",
+    "image/gif": ".gif",
+    "image/webp": ".webp",
+    "image/svg+xml": ".svg",
+    "image/avif": ".avif",
+    "video/mp4": ".mp4",
+    "video/webm": ".webm",
+    "video/quicktime": ".mov",
+    "video/x-m4v": ".m4v",
+    "video/ogg": ".ogv",
+};
 const DISALLOWED_TOP_DIRECTORIES = [
     "public",
     ".next",
@@ -32,6 +64,9 @@ const EDITOR_BASE_URL_EXAMPLE = "http://localhost:<port>";
 function sha256(content) {
     return createHash("sha256").update(content).digest("hex");
 }
+function sha256Buffer(buf) {
+    return createHash("sha256").update(buf).digest("hex");
+}
 function generateSessionToken() {
     return randomBytes(32).toString("base64url");
 }
@@ -278,13 +313,13 @@ function validateWriteRequest(req, ctx, reqUrl) {
     return (req.headers["x-edit-slide-local"] === "1" ||
         req.headers["x-open-slide-local"] === "1");
 }
-async function readBody(req) {
+async function readBody(req, maxBytes = MAX_WRITE_BYTES) {
     const chunks = [];
     let total = 0;
     for await (const chunk of req) {
         const buf = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk);
         total += buf.length;
-        if (total > MAX_WRITE_BYTES + 1024 * 1024) {
+        if (total > maxBytes + 1024 * 1024) {
             throw new Error("request body too large");
         }
         chunks.push(buf);
@@ -427,6 +462,187 @@ async function handlePost(ctx, req, res) {
         sendJson(res, 400, { error: error?.message || "write failed" });
     }
 }
+async function safeAssetPath(ctx, rel) {
+    if (typeof rel !== "string" || !rel) {
+        throw new Error("missing path");
+    }
+    const normalized = rel.replace(/^\/+/, "");
+    const abs = resolve(ctx.root, normalized);
+    if (abs !== ctx.root && !abs.startsWith(ctx.root + sep)) {
+        throw new Error("path escape");
+    }
+    const ext = extname(abs).toLowerCase();
+    if (!ASSET_MEDIA_EXT.has(ext)) {
+        throw new Error("only image, GIF, and video files are allowed");
+    }
+    const real = await resolveReal(abs);
+    if (real !== ctx.root && !real.startsWith(ctx.root + sep)) {
+        throw new Error("path escape via symlink");
+    }
+    for (const candidate of [relative(ctx.root, abs), relative(ctx.root, real)]) {
+        const first = candidate.split(sep)[0];
+        if (DISALLOWED_TOP_DIRS.has(first)) {
+            throw new Error(`assets under ${first}/ are not allowed`);
+        }
+    }
+    return real;
+}
+function assetExt(name, contentType) {
+    const fromName = extname(String(name || "")).toLowerCase();
+    if (ASSET_MEDIA_EXT.has(fromName))
+        return fromName;
+    return ASSET_CONTENT_TYPE_EXT[String(contentType || "").toLowerCase()] || "";
+}
+function assetSlug(name) {
+    const base = String(name || "asset").replace(/\.[^.]+$/, "");
+    const slug = base
+        .normalize("NFKD")
+        .replace(/[^\w.-]+/g, "-")
+        .replace(/^[-.]+|[-.]+$/g, "")
+        .toLowerCase();
+    return slug || "asset";
+}
+function assetKind(ext) {
+    return ASSET_VIDEO_EXT.has(ext) ? "video" : "image";
+}
+function assetDirRel(scope, htmlDirRel) {
+    if (scope === "global")
+        return "assets";
+    return htmlDirRel ? join(htmlDirRel, "assets") : "assets";
+}
+async function readBytesOrNull(abs) {
+    try {
+        return await readFile(abs);
+    }
+    catch (error) {
+        if (error?.code === "ENOENT")
+            return null;
+        throw error;
+    }
+}
+function sendBinary(res, status, contentType, buf) {
+    res.statusCode = status;
+    res.setHeader("content-type", contentType);
+    res.setHeader("cache-control", "no-store");
+    res.setHeader("x-content-type-options", "nosniff");
+    res.setHeader("content-security-policy", "sandbox; default-src 'none'; style-src 'unsafe-inline'");
+    res.end(buf);
+}
+async function handleAssetGet(ctx, req, reqUrl, res) {
+    if (!validateBridgeRequest(req, ctx, reqUrl)) {
+        sendJson(res, 403, { error: "forbidden" });
+        return;
+    }
+    const file = reqUrl.searchParams.get("file") || "";
+    const htmlDirRel = file ? dirname(file) : "";
+    if (reqUrl.searchParams.get("list") === "1") {
+        const scope = reqUrl.searchParams.get("scope") === "global" ? "global" : "project";
+        const dirRel = assetDirRel(scope, htmlDirRel);
+        const absDir = resolve(ctx.root, dirRel);
+        const htmlDirAbs = resolve(ctx.root, htmlDirRel || ".");
+        let assets = [];
+        try {
+            if (absDir === ctx.root || absDir.startsWith(ctx.root + sep)) {
+                const names = await readdir(absDir);
+                assets = names
+                    .filter((name) => ASSET_MEDIA_EXT.has(extname(name).toLowerCase()))
+                    .map((name) => ({
+                    name,
+                    src: toPosixPath(relative(htmlDirAbs, join(absDir, name))),
+                    kind: assetKind(extname(name).toLowerCase()),
+                }));
+            }
+        }
+        catch {
+            assets = [];
+        }
+        sendJson(res, 200, { assets, policy: buildPolicy(ctx) });
+        return;
+    }
+    const src = reqUrl.searchParams.get("src") || "";
+    if (!src) {
+        sendJson(res, 400, { error: "missing src" });
+        return;
+    }
+    try {
+        const abs = await safeAssetPath(ctx, join(htmlDirRel, src));
+        const buf = await readFile(abs);
+        const ext = extname(abs).toLowerCase();
+        sendBinary(res, 200, ASSET_CONTENT_TYPES[ext] || "application/octet-stream", buf);
+    }
+    catch (error) {
+        const message = error?.message || "read failed";
+        const status = message.includes("ENOENT") ? 404 : 400;
+        sendJson(res, status, { error: message });
+    }
+}
+async function handleAssetPost(ctx, req, res) {
+    const reqUrl = new URL(req.url || "/", `http://${req.headers.host || "127.0.0.1"}`);
+    if (!validateWriteRequest(req, ctx, reqUrl)) {
+        sendJson(res, 403, { error: "forbidden" });
+        return;
+    }
+    let body;
+    try {
+        body = JSON.parse(await readBody(req, MAX_ASSET_BYTES * 2));
+    }
+    catch (error) {
+        sendJson(res, 400, { error: error?.message || "invalid json" });
+        return;
+    }
+    const { file, scope: rawScope, name, contentType, dataBase64 } = body || {};
+    if (typeof dataBase64 !== "string" || !dataBase64) {
+        sendJson(res, 400, { error: "missing asset data" });
+        return;
+    }
+    const buf = Buffer.from(dataBase64, "base64");
+    if (!buf.length) {
+        sendJson(res, 400, { error: "empty asset data" });
+        return;
+    }
+    if (buf.length > MAX_ASSET_BYTES) {
+        sendJson(res, 413, { error: "asset too large (>64MB)" });
+        return;
+    }
+    const ext = assetExt(name, contentType);
+    if (!ASSET_MEDIA_EXT.has(ext)) {
+        sendJson(res, 400, { error: "unsupported asset type" });
+        return;
+    }
+    const scope = rawScope === "global" ? "global" : "project";
+    const htmlDirRel = typeof file === "string" && file ? dirname(file) : "";
+    const htmlDirAbs = resolve(ctx.root, htmlDirRel || ".");
+    const dirRel = assetDirRel(scope, htmlDirRel);
+    const slug = assetSlug(name);
+    try {
+        let fileName = `${slug}${ext}`;
+        let absTarget = await safeAssetPath(ctx, join(dirRel, fileName));
+        const existing = await readBytesOrNull(absTarget);
+        if (existing && !existing.equals(buf)) {
+            fileName = `${slug}-${sha256Buffer(buf).slice(0, 8)}${ext}`;
+            absTarget = await safeAssetPath(ctx, join(dirRel, fileName));
+        }
+        const alreadyIdentical = Boolean(existing && existing.equals(buf));
+        if (!alreadyIdentical) {
+            await mkdir(dirname(absTarget), { recursive: true });
+            await writeFile(absTarget, buf);
+        }
+        sendJson(res, 200, {
+            ok: true,
+            scope,
+            name: fileName,
+            path: toPosixPath(relative(ctx.root, absTarget)),
+            src: toPosixPath(relative(htmlDirAbs, absTarget)),
+            kind: assetKind(ext),
+            bytes: buf.length,
+            reused: alreadyIdentical,
+            policy: buildPolicy(ctx),
+        });
+    }
+    catch (error) {
+        sendJson(res, 400, { error: error?.message || "asset write failed" });
+    }
+}
 function createBridgeServer(ctx) {
     return createServer(async (req, res) => {
         if (!applyCors(req, res, ctx.editorOrigin))
@@ -445,6 +661,18 @@ function createBridgeServer(ctx) {
             sendJson(res, 200, { ok: true, service: "html2pptx edit bridge", root: ctx.root });
             return;
         }
+        if (reqUrl.pathname === "/api/edit-slide/asset") {
+            if (req.method === "GET") {
+                await handleAssetGet(ctx, req, reqUrl, res);
+                return;
+            }
+            if (req.method === "POST") {
+                await handleAssetPost(ctx, req, res);
+                return;
+            }
+            sendJson(res, 405, { error: "method not allowed" });
+            return;
+        }
         if (reqUrl.pathname !== "/api/edit-slide/file") {
             sendJson(res, 404, { error: "not found" });
             return;