html2pptx-local-mcp 1.1.37 → 1.1.38

package/app/docs/content.js

@@ -170,17 +170,20 @@ const SKILL_INSTALL_COMMAND_EN = `# Choose the command for your agent
 # Claude Code
 npx skills add https://html2pptx.app -a claude-code
 
+# Grok Build
+npx --yes --package html2pptx-local-mcp@latest html2pptx-install-skills grok
+
 # Codex
 npx skills add https://html2pptx.app -a codex
 
 # Cursor
 npx skills add https://html2pptx.app -a cursor
 
-# Windsurf
-npx skills add https://html2pptx.app -a windsurf
+# VS Code (GitHub Copilot)
+npx skills add https://html2pptx.app -a github-copilot
 
-# Grok Build
-npx --yes --package html2pptx-local-mcp@latest html2pptx-install-skills grok
+# Antigravity
+npx skills add https://html2pptx.app -a antigravity
 
 # Preview published skills without installing
 npx skills add https://html2pptx.app --list
@@ -197,17 +200,20 @@ const SKILL_INSTALL_COMMAND_JA = `# 使うエージェントのコマンドを
 # Claude Code
 npx skills add https://html2pptx.app -a claude-code
 
+# Grok Build
+npx --yes --package html2pptx-local-mcp@latest html2pptx-install-skills grok
+
 # Codex
 npx skills add https://html2pptx.app -a codex
 
 # Cursor
 npx skills add https://html2pptx.app -a cursor
 
-# Windsurf
-npx skills add https://html2pptx.app -a windsurf
+# VS Code (GitHub Copilot)
+npx skills add https://html2pptx.app -a github-copilot
 
-# Grok Build
-npx --yes --package html2pptx-local-mcp@latest html2pptx-install-skills grok
+# Antigravity
+npx skills add https://html2pptx.app -a antigravity
 
 # インストールせずに公開Skillを確認
 npx skills add https://html2pptx.app --list
@@ -432,44 +438,54 @@ export const DOCS_COPY = {
       'Comprehensive documentation for html2pptx.app: the only API that converts HTML/CSS to fully editable PowerPoint files. REST API, Skills integration, MCP protocol, quickstart guides, and the HTML contract for reliable PowerPoint generation.',
 
     navSections: [
-      { id: 'overview', label: 'Service Overview', children: [
+      { id: 'overview', label: 'Service Overview', desc: 'What html2pptx is, architecture, channels, comparison, and CSS support.', children: [
         { id: 'overview-channels', label: 'Channels' },
         { id: 'overview-comparison', label: 'Comparison' },
         { id: 'overview-css', label: 'CSS Support' },
       ]},
-      { id: 'quickstart', label: 'Quick Start' },
-      { id: 'api-reference', label: 'API Reference', children: [
+      { id: 'quickstart', label: 'Quick Start', desc: 'Your first authenticated HTML-to-PPTX export in four steps.' },
+      { id: 'api-reference', label: 'API Reference', desc: 'REST endpoints, supported and forbidden HTML elements, and response headers.', children: [
         { id: 'api-html-elements', label: 'HTML Elements' },
         { id: 'api-html-forbidden', label: 'Forbidden' },
       ]},
-	      { id: 'skills', label: 'Skills Integration', children: [
+	      { id: 'skills', label: 'Skills Integration', desc: 'Use the html2pptx skill inside Claude Code and Codex agents.', children: [
 	        { id: 'skills-setup', label: 'Setup' },
 	        { id: 'skills-local-editor', label: 'Local Visual Editor' },
 	        { id: 'skills-capabilities', label: 'Capabilities' },
 	      ]},
-      { id: 'mcp', label: 'MCP Integration', children: [
+      { id: 'mcp', label: 'MCP Integration', desc: 'Connect AI agents via the Model Context Protocol — remote and local.', children: [
         { id: 'mcp-setup', label: 'Setup' },
         { id: 'mcp-auth', label: 'Authentication' },
         { id: 'mcp-tools', label: 'Tools' },
         { id: 'mcp-example', label: 'Example' },
       ]},
-      { id: 'cli', label: 'CLI Tool', children: [
+      { id: 'cli', label: 'CLI Tool', desc: 'Install and run the command-line tool for exports.', children: [
         { id: 'cli-install', label: 'Installation' },
         { id: 'cli-commands', label: 'Commands' },
         { id: 'cli-examples', label: 'Examples' },
       ]},
-      { id: 'use-cases', label: 'Use Cases' },
-      { id: 'plans', label: 'Plans & Pricing', children: [
+      { id: 'use-cases', label: 'Use Cases', desc: 'Common ways teams use html2pptx in production.' },
+      { id: 'plans', label: 'Plans & Pricing', desc: 'Subscription tiers, pricing, and per-plan rate limits.', children: [
         { id: 'plans-rate-limits', label: 'Rate Limits' },
       ]},
-      { id: 'security', label: 'Security & Limits', children: [
+      { id: 'security', label: 'Security & Limits', desc: 'Security model, limits, and the pre-publish checklist.', children: [
         { id: 'security-checklist', label: 'Checklist' },
       ]},
-      { id: 'faq', label: 'FAQ', children: [
+      { id: 'faq', label: 'FAQ', desc: 'Frequently asked questions and troubleshooting.', children: [
         { id: 'faq-troubleshoot', label: 'Troubleshoot' },
       ]},
     ],
 
+    searchCopy: {
+      rootCrumb: 'Docs',
+      buttonLabel: 'Search docs…',
+      placeholder: 'Search documentation…',
+      noResults: 'No results found',
+      hintNavigate: 'navigate',
+      hintSelect: 'select',
+      hintClose: 'close',
+    },
+
     /* --- Section 1: Service Overview --- */
     overviewTitle: 'Service Overview',
     overviewSubtitle: 'What is html2pptx.app',
@@ -842,7 +858,7 @@ html2pptx edit ./html2pptx/slides.html --no-open`,
 	      { issue: 'Another tab is read-only', fix: 'The editor uses a local tab lock to avoid two tabs writing to the same file. Use the active tab or click the transfer edit control.' },
 	    ],
 	    skillsSetupTitle: 'Setup',
-    skillsSetupLead: 'Pick the agent you actually use and run the matching command. The skills CLI handles Claude Code, Codex, Cursor, and Windsurf; Grok Build uses its own installer.',
+    skillsSetupLead: 'Pick the agent you actually use and run the matching command. The skills CLI handles Claude Code, Codex, Cursor, VS Code (GitHub Copilot), and Antigravity; Grok Build uses its own installer. The tab list mirrors the MCP setup tabs below so the same agent appears in the same place in both sections.',
     skillsEditorTabs: [
       {
         id: 'claude-code',
@@ -881,28 +897,30 @@ html2pptx edit ./html2pptx/slides.html --no-open`,
         ],
       },
       {
-        id: 'windsurf',
-        label: 'Windsurf',
-        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/windsurf/default.svg',
+        id: 'vscode',
+        label: 'VS Code',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/visual-studio-code/default.svg',
         steps: [
-          { title: 'Install the html2pptx skill', body: 'Register the published html2pptx skills into Windsurf via the skills CLI.', code: `npx skills add https://html2pptx.app -a windsurf` },
+          { title: 'Install the html2pptx skill', body: 'Register the published html2pptx skills into VS Code (GitHub Copilot) via the skills CLI. Skills land under `~/.copilot/skills/`.', code: `npx skills add https://html2pptx.app -a github-copilot` },
         ],
+        tip: 'The skills CLI agent ID is `github-copilot`; the GitHub Copilot extension inside VS Code picks the skill up after a reload.',
       },
       {
-        id: 'others',
-        label: 'Other agents',
+        id: 'antigravity',
+        label: 'Antigravity',
+        icon: 'https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg/icons/antigravity-color.svg',
         steps: [
-          { title: 'Use the interactive selector', body: 'For any other supported agent, or to install into multiple targets at once, run the CLI without `-a` and choose interactively.', code: `npx skills add https://html2pptx.app` },
+          { title: 'Install the html2pptx skill', body: 'Register the published html2pptx skills into Antigravity via the skills CLI. Skills land under `~/.gemini/antigravity/skills/`.', code: `npx skills add https://html2pptx.app -a antigravity` },
         ],
-        tip: 'Avoid `--yes` unless you intentionally want to install into every detected agent directory.',
+        tip: 'Antigravity (Google) shares the same skills CLI flow as Claude Code — restart Antigravity after installing so the IDE picks up the new skill.',
       },
     ],
     skillsSetupSteps: [
       {
         step: '1',
         title: 'Install MCP + Skill',
-        icons: ['claude-code', 'codex', 'cursor'],
-        body: 'Choose the command for the agent you actually use: Claude Code, Codex, or Cursor. 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.',
+        icons: ['claude-code', 'grok-build', 'codex', 'cursor', 'vscode', 'antigravity'],
+        body: 'Pick the command for the agent you actually use: Claude Code, Codex, Cursor, VS Code (GitHub Copilot), or Antigravity. For Grok Build, use the Grok-specific installer. For other supported agents or multiple targets, drop the `-a` flag and use the interactive selector. Avoid `--yes` unless you intentionally want to install into every detected agent directory.',
         code: SKILL_INSTALL_COMMAND_EN,
       },
       {
@@ -1359,44 +1377,54 @@ echo 'HTML2PPTX_API_KEY=sk_live_xxxx' >> .env`,
       'html2pptx.app の包括的なドキュメント。HTML/CSSを完全に編集可能なPowerPointファイルに変換する唯一のAPI。REST API、Skills統合、MCPプロトコル、クイックスタートガイド、HTML変換契約を網羅しています。',
 
     navSections: [
-      { id: 'overview', label: 'サービス概要', children: [
+      { id: 'overview', label: 'サービス概要', desc: 'html2pptxの概要・アーキテクチャ・チャネル・比較・CSS対応。', children: [
         { id: 'overview-channels', label: 'チャネル' },
         { id: 'overview-comparison', label: '比較' },
         { id: 'overview-css', label: 'CSS対応' },
       ]},
-      { id: 'quickstart', label: 'クイックスタート' },
-      { id: 'api-reference', label: 'APIリファレンス', children: [
+      { id: 'quickstart', label: 'クイックスタート', desc: '認証付きでHTMLをPPTXに変換する最初の4ステップ。' },
+      { id: 'api-reference', label: 'APIリファレンス', desc: 'RESTエンドポイント、対応/禁止HTML要素、レスポンスヘッダー。', children: [
         { id: 'api-html-elements', label: '対応HTML要素' },
         { id: 'api-html-forbidden', label: '使用禁止要素' },
       ]},
-	      { id: 'skills', label: 'Skills統合', children: [
+	      { id: 'skills', label: 'Skills統合', desc: 'Claude Code や Codex エージェントで html2pptx skill を使う。', children: [
 	        { id: 'skills-setup', label: 'セットアップ' },
 	        { id: 'skills-local-editor', label: 'ローカル編集' },
 	        { id: 'skills-capabilities', label: '機能一覧' },
 	      ]},
-      { id: 'mcp', label: 'MCP統合', children: [
+      { id: 'mcp', label: 'MCP統合', desc: 'Model Context Protocol でAIエージェントと連携（リモート/ローカル）。', children: [
         { id: 'mcp-setup', label: 'セットアップ' },
         { id: 'mcp-auth', label: '認証方法' },
         { id: 'mcp-tools', label: 'ツール一覧' },
         { id: 'mcp-example', label: '使用例' },
       ]},
-      { id: 'cli', label: 'CLIツール', children: [
+      { id: 'cli', label: 'CLIツール', desc: 'エクスポート用のコマンドラインツールの導入と実行。', children: [
         { id: 'cli-install', label: 'インストール' },
         { id: 'cli-commands', label: 'コマンド' },
         { id: 'cli-examples', label: '使用例' },
       ]},
-      { id: 'use-cases', label: '活用事例' },
-      { id: 'plans', label: 'プラン・料金', children: [
+      { id: 'use-cases', label: '活用事例', desc: '本番環境での html2pptx の代表的な活用方法。' },
+      { id: 'plans', label: 'プラン・料金', desc: 'サブスクプラン、料金、プランごとのレート制限。', children: [
         { id: 'plans-rate-limits', label: 'レート制限' },
       ]},
-      { id: 'security', label: 'セキュリティ・制限', children: [
+      { id: 'security', label: 'セキュリティ・制限', desc: 'セキュリティモデル・制限・公開前チェックリスト。', children: [
         { id: 'security-checklist', label: 'チェックリスト' },
       ]},
-      { id: 'faq', label: 'FAQ', children: [
+      { id: 'faq', label: 'FAQ', desc: 'よくある質問とトラブルシューティング。', children: [
         { id: 'faq-troubleshoot', label: 'トラブルシュート' },
       ]},
     ],
 
+    searchCopy: {
+      rootCrumb: 'ドキュメント',
+      buttonLabel: 'ドキュメントを検索…',
+      placeholder: 'ドキュメントを検索…',
+      noResults: '結果が見つかりません',
+      hintNavigate: '移動',
+      hintSelect: '選択',
+      hintClose: '閉じる',
+    },
+
     /* --- Section 1: サービス概要 --- */
     overviewTitle: 'サービス概要',
     overviewSubtitle: 'html2pptx.app とは',
@@ -1768,7 +1796,7 @@ html2pptx edit ./html2pptx/slides.html --no-open`,
 	      { issue: '別タブが読み取り専用になる', fix: '同じHTMLを複数タブで編集して競合しないよう、エディタはタブロックを使います。編集権限のあるタブを使うか、画面上の移譲操作を行ってください。' },
 	    ],
 	    skillsSetupTitle: 'セットアップ',
-    skillsSetupLead: '実際に使うエージェントのタブを開き、そのコマンドだけ実行してください。skills CLI は Claude Code / Codex / Cursor / Windsurf に対応し、Grok Build のみ Grok 専用 installer を使います。',
+    skillsSetupLead: '実際に使うエージェントのタブを開き、そのコマンドだけ実行してください。skills CLI は Claude Code / Codex / Cursor / VS Code (GitHub Copilot) / Antigravity に対応し、Grok Build のみ Grok 専用 installer を使います。タブの並びは下の MCP セットアップと同じ順序にしてあるので、同じエージェントは両セクションの同じ位置にあります。',
     skillsEditorTabs: [
       {
         id: 'claude-code',
@@ -1807,28 +1835,30 @@ html2pptx edit ./html2pptx/slides.html --no-open`,
         ],
       },
       {
-        id: 'windsurf',
-        label: 'Windsurf',
-        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/windsurf/default.svg',
+        id: 'vscode',
+        label: 'VS Code',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/visual-studio-code/default.svg',
         steps: [
-          { title: 'html2pptx Skill をインストール', body: '公開済みの html2pptx skills を skills CLI から Windsurf に登録します。', code: `npx skills add https://html2pptx.app -a windsurf` },
+          { title: 'html2pptx Skill をインストール', body: '公開済みの html2pptx skills を skills CLI から VS Code (GitHub Copilot) に登録します。skills は `~/.copilot/skills/` に配置されます。', code: `npx skills add https://html2pptx.app -a github-copilot` },
         ],
+        tip: 'skills CLI でのエージェント ID は `github-copilot` です。インストール後、VS Code の GitHub Copilot 拡張を再読み込みすると skill が認識されます。',
       },
       {
-        id: 'others',
-        label: 'その他のエージェント',
+        id: 'antigravity',
+        label: 'Antigravity',
+        icon: 'https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg/icons/antigravity-color.svg',
         steps: [
-          { title: '対話形式で選択', body: 'その他の対応エージェントや、複数のエージェントへ一度にインストールする場合は `-a` を付けずに対話形式で選択します。', code: `npx skills add https://html2pptx.app` },
+          { title: 'html2pptx Skill をインストール', body: '公開済みの html2pptx skills を skills CLI から Antigravity に登録します。skills は `~/.gemini/antigravity/skills/` に配置されます。', code: `npx skills add https://html2pptx.app -a antigravity` },
         ],
-        tip: '`--yes` は検出された全エージェントのディレクトリへ入るため、全対応が必要な場合以外は使わないでください。',
+        tip: 'Antigravity (Google) は Claude Code と同じく skills CLI でそのまま導入できます。インストール後に Antigravity を再起動すると skill が読み込まれます。',
       },
     ],
     skillsSetupSteps: [
       {
         step: '1',
         title: 'MCP + スキルをインストール',
-        icons: ['claude-code', 'codex', 'cursor'],
-        body: 'Claude Code、Codex、Cursor のうち、実際に使うエージェントのコマンドを選んで実行してください。Grok Build は Grok 専用 installer を使います。その他の対応エージェントや複数指定の場合は対話形式で選択します。--yes は検出された全エージェントのディレクトリへ入るため、全対応が必要な場合以外は使わないでください。',
+        icons: ['claude-code', 'grok-build', 'codex', 'cursor', 'vscode', 'antigravity'],
+        body: 'Claude Code / Codex / Cursor / VS Code (GitHub Copilot) / Antigravity のうち、実際に使うエージェントのコマンドを選んで実行してください。Grok Build のみ Grok 専用 installer を使います。その他の対応エージェントや複数指定の場合は `-a` を付けずに対話形式で選択します。`--yes` は検出された全エージェントのディレクトリへ入るため、全対応が必要な場合以外は使わないでください。',
         code: SKILL_INSTALL_COMMAND_JA,
       },
       {

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

@@ -8,11 +8,13 @@ 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 = 8 * 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_IMAGE_EXT = new Set(ASSET_IMAGE_EXTENSIONS);
+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",
@@ -21,6 +23,11 @@ const ASSET_CONTENT_TYPES = {
     ".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",
@@ -29,6 +36,11 @@ const ASSET_CONTENT_TYPE_EXT = {
     "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",
@@ -460,8 +472,8 @@ async function safeAssetPath(ctx, rel) {
         throw new Error("path escape");
     }
     const ext = extname(abs).toLowerCase();
-    if (!ASSET_IMAGE_EXT.has(ext)) {
-        throw new Error("only image files are allowed");
+    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)) {
@@ -477,18 +489,21 @@ async function safeAssetPath(ctx, rel) {
 }
 function assetExt(name, contentType) {
     const fromName = extname(String(name || "")).toLowerCase();
-    if (ASSET_IMAGE_EXT.has(fromName))
+    if (ASSET_MEDIA_EXT.has(fromName))
         return fromName;
     return ASSET_CONTENT_TYPE_EXT[String(contentType || "").toLowerCase()] || "";
 }
 function assetSlug(name) {
-    const base = String(name || "image").replace(/\.[^.]+$/, "");
+    const base = String(name || "asset").replace(/\.[^.]+$/, "");
     const slug = base
         .normalize("NFKD")
         .replace(/[^\w.-]+/g, "-")
         .replace(/^[-.]+|[-.]+$/g, "")
         .toLowerCase();
-    return slug || "image";
+    return slug || "asset";
+}
+function assetKind(ext) {
+    return ASSET_VIDEO_EXT.has(ext) ? "video" : "image";
 }
 function assetDirRel(scope, htmlDirRel) {
     if (scope === "global")
@@ -530,10 +545,11 @@ async function handleAssetGet(ctx, req, reqUrl, res) {
             if (absDir === ctx.root || absDir.startsWith(ctx.root + sep)) {
                 const names = await readdir(absDir);
                 assets = names
-                    .filter((name) => ASSET_IMAGE_EXT.has(extname(name).toLowerCase()))
+                    .filter((name) => ASSET_MEDIA_EXT.has(extname(name).toLowerCase()))
                     .map((name) => ({
                     name,
                     src: toPosixPath(relative(htmlDirAbs, join(absDir, name))),
+                    kind: assetKind(extname(name).toLowerCase()),
                 }));
             }
         }
@@ -576,21 +592,21 @@ async function handleAssetPost(ctx, req, res) {
     }
     const { file, scope: rawScope, name, contentType, dataBase64 } = body || {};
     if (typeof dataBase64 !== "string" || !dataBase64) {
-        sendJson(res, 400, { error: "missing image data" });
+        sendJson(res, 400, { error: "missing asset data" });
         return;
     }
     const buf = Buffer.from(dataBase64, "base64");
     if (!buf.length) {
-        sendJson(res, 400, { error: "empty image data" });
+        sendJson(res, 400, { error: "empty asset data" });
         return;
     }
     if (buf.length > MAX_ASSET_BYTES) {
-        sendJson(res, 413, { error: "image too large (>8MB)" });
+        sendJson(res, 413, { error: "asset too large (>64MB)" });
         return;
     }
     const ext = assetExt(name, contentType);
-    if (!ASSET_IMAGE_EXT.has(ext)) {
-        sendJson(res, 400, { error: "unsupported image type" });
+    if (!ASSET_MEDIA_EXT.has(ext)) {
+        sendJson(res, 400, { error: "unsupported asset type" });
         return;
     }
     const scope = rawScope === "global" ? "global" : "project";
@@ -617,6 +633,7 @@ async function handleAssetPost(ctx, req, res) {
             name: fileName,
             path: toPosixPath(relative(ctx.root, absTarget)),
             src: toPosixPath(relative(htmlDirAbs, absTarget)),
+            kind: assetKind(ext),
             bytes: buf.length,
             reused: alreadyIdentical,
             policy: buildPolicy(ctx),

package/local-editor-app/app/edit-slide/edit-slide-client.jsx

@@ -4228,6 +4228,15 @@ ${slidesArg.join('\n\n')}
                   {text.layers}
                 </button>
                 <span className="cv-inspector__zoom">{Math.round(viewScale * 100)}%</span>
+                <button
+                  type="button"
+                  className="cv-inspector__close"
+                  onClick={exitFocus}
+                  aria-label={text.panel?.closeEditPanel || 'Close'}
+                  title={text.overview || 'Overview'}
+                >
+                  <X size={19} strokeWidth={2.25} />
+                </button>
               </div>
               <div className="cv-inspector__ctx">
                 <span className="cv-inspector__tag">&lt;{selection.element?.tagName?.toLowerCase?.() || 'node'}&gt;</span>
@@ -4255,7 +4264,7 @@ ${slidesArg.join('\n\n')}
                   key={`${selection.key || selection.selector || selection.element?.tagName || 'selection'}:${inspectorNonce}`}
                   selector={selection.selector}
                   element={selection.element}
-                  onClose={clearSelection}
+                  onClose={exitFocus}
                   onChange={onPanelChange}
                   labels={text.panel}
                   assetTools={{
@@ -4506,11 +4515,13 @@ ${slidesArg.join('\n\n')}
         .cv-zoomhud { position: absolute; bottom: 16px; right: 16px; display: flex; align-items: center; gap: 2px; padding: 5px 8px; border-radius: 10px; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid #e6e6e6; box-shadow: 0 4px 16px rgba(0,0,0,0.1); z-index: 8; }
         .cv-zoomhud__label { min-width: 44px; text-align: center; font-size: 12px; font-weight: 600; color: #3a3a3a; font-variant-numeric: tabular-nums; }
 
-        .cv-inspector { width: 280px; flex: 0 0 280px; display: flex; flex-direction: column; background: #ffffff; border-left: 1px solid #e6e6e6; overflow-x: hidden; overflow-y: auto; min-height: 0; scrollbar-gutter: stable; }
+        .cv-inspector { order: -1; width: 280px; flex: 0 0 280px; display: flex; flex-direction: column; background: #ffffff; border-right: 1px solid #e6e6e6; overflow-x: hidden; overflow-y: auto; min-height: 0; scrollbar-gutter: stable; }
         .cv-inspector__tabs { display: flex; align-items: center; gap: 2px; padding: 8px 10px; border-bottom: 1px solid #ececec; flex: 0 0 auto; }
         .cv-inspector__tabs button { border: none; background: transparent; font-size: 12.5px; font-weight: 600; color: #9a9a9a; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
         .cv-inspector__tabs button.is-active { color: #1a1a1a; background: #f0f0f0; }
         .cv-inspector__zoom { margin-left: auto; font-size: 11px; color: #9a9a9a; font-variant-numeric: tabular-nums; padding-right: 4px; }
+        .cv-inspector__close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: 2px; border: none; background: transparent; color: #6a6a6a; border-radius: 8px; cursor: pointer; flex: 0 0 auto; }
+        .cv-inspector__close:hover { background: #ececec; color: #111; }
         .cv-inspector__ctx { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #ececec; flex: 0 0 auto; }
         .cv-inspector__tag { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 600; color: var(--cv-sel); background: var(--cv-sel-soft); padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
         .cv-inspector__sel { font-size: 11px; color: #9a9a9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -4540,7 +4551,8 @@ ${slidesArg.join('\n\n')}
 
         @keyframes cv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
 
-        .cv-main:not(:has(.cv-inspector)) .cv-lp-section--layers {
+        /* While editing an element the inspector replaces the slide/layer list on the left */
+        .cv-main:has(.cv-inspector) .cv-leftpanel {
           display: none;
         }
 
@@ -4576,6 +4588,7 @@ ${slidesArg.join('\n\n')}
           }
 
           .cv-main:has(.cv-inspector) .cv-leftpanel {
+            display: flex;
             grid-column: 1;
           }
 
@@ -4613,6 +4626,8 @@ ${slidesArg.join('\n\n')}
             width: 248px;
             min-width: 0;
             flex: none;
+            border-left: 1px solid #e6e6e6;
+            border-right: 0;
           }
 
           .cv-lp-section--slides .cv-lp-pages {
@@ -4691,6 +4706,7 @@ ${slidesArg.join('\n\n')}
 
           .cv-leftpanel,
           .cv-main:has(.cv-inspector) .cv-leftpanel {
+            display: flex;
             grid-column: 1;
             grid-row: 2;
           }
@@ -4707,6 +4723,7 @@ ${slidesArg.join('\n\n')}
             max-width: none;
             border-top: 1px solid #e6e6e6;
             border-left: 0;
+            border-right: 0;
           }
 
           .cv-lp-section--slides .cv-lp-pages {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html2pptx-local-mcp",
-  "version": "1.1.37",
+  "version": "1.1.38",
   "type": "module",
   "description": "Local stdio MCP server for opening html2pptx slide HTML in the local edit-slide editor.",
   "bin": {

package/public/skills/html2pptx/SKILL.md

@@ -420,6 +420,10 @@ Extract the download URL from the `Download:` text block in the response. Then o
 
 Do NOT ask the user to manually download — always automate the full flow.
 
+#### Step 9: Open the local editor (mandatory)
+
+After the PPTX is downloaded and opened, immediately perform the mandatory editor handoff (see "Mandatory editor handoff after HTML generation"). This is not optional and must run even when the user only asked for a PPTX export — do not stop at the PPTX/HTML and do not ask whether to open the editor.
+
 ### Output directory structure
 
 All generated files MUST be saved under `./html2pptx/`:
@@ -575,6 +579,8 @@ If the user clicks Export PPTX inside the local editor, the browser must only sh
 
 Whenever this skill finishes generating or materially updating a slide HTML file, always hand it off to the local visual editor. Prefer `html2pptx_open_local_slide_editor` because it starts the loopback UI and bridge together; do not use hosted edit-slide as a fallback. Do this even if the user did not separately ask for preview.
 
+This handoff is unconditional and applies to EVERY slide generation path, including when the user only asked for a PPTX export. Do not merely offer it, and do not ask "shall I open the editor?" — open it. The only thing that ever requires asking first is adding the local stdio MCP config when it is not yet present (see below); the act of opening the editor itself is never gated on user confirmation. Treat "stopped at HTML/PPTX without opening the editor" as a skill failure.
+
 Required behavior:
 
 1. Save the deck under `./html2pptx/<fileName>.html`.