html2pptx-local-mcp 1.1.20 → 1.1.21

package/local-editor-app/lib/edit-panel-value-normalizer.js

@@ -0,0 +1,97 @@
+const PIXEL_LENGTH_KEYS = new Set([
+  'width',
+  'height',
+  'minWidth',
+  'minHeight',
+  'left',
+  'top',
+  'right',
+  'bottom',
+  'fontSize',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'marginTop',
+  'marginRight',
+  'marginBottom',
+  'marginLeft',
+  'borderRadius',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomRightRadius',
+  'borderBottomLeftRadius',
+  'borderWidth',
+]);
+
+const ZERO_ON_EMPTY_PIXEL_KEYS = new Set([
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'marginTop',
+  'marginRight',
+  'marginBottom',
+  'marginLeft',
+  'borderRadius',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomRightRadius',
+  'borderBottomLeftRadius',
+  'borderWidth',
+]);
+
+function isBareNumber(value) {
+  return /^-?(?:\d+|\d*\.\d+)$/.test(String(value).trim());
+}
+
+function addPxToBareNumbers(value) {
+  const raw = String(value ?? '');
+  const trimmed = raw.trim();
+  if (!trimmed) return raw;
+  return trimmed.replace(/(^|\s)(-?(?:\d+|\d*\.\d+))(?=\s|$)/g, '$1$2px');
+}
+
+export function normalizeEditPanelInputValue(key, value) {
+  if (!ZERO_ON_EMPTY_PIXEL_KEYS.has(key)) return value;
+  return String(value ?? '').trim() === '' ? '0' : value;
+}
+
+export function normalizeStyleValue(key, value) {
+  const input = normalizeEditPanelInputValue(key, value);
+  if (PIXEL_LENGTH_KEYS.has(key)) return addPxToBareNumbers(input);
+  if (key === 'lineHeight') {
+    const trimmed = String(input ?? '').trim();
+    if (isBareNumber(trimmed) && Math.abs(Number(trimmed)) > 4) return `${trimmed}px`;
+    return input;
+  }
+  return input;
+}
+
+export function getPaddingResizeDimension(side) {
+  if (side === 'Left' || side === 'Right') return 'width';
+  if (side === 'Top' || side === 'Bottom') return 'height';
+  return null;
+}
+
+export function getExpandedBorderBoxMetric({
+  boxSizing,
+  side,
+  previousPaddingPx,
+  nextPaddingPx,
+  currentMetricPx,
+}) {
+  if (boxSizing !== 'border-box') return null;
+  const dimension = getPaddingResizeDimension(side);
+  if (!dimension) return null;
+
+  const previous = Number(previousPaddingPx);
+  const next = Number(nextPaddingPx);
+  const current = Number(currentMetricPx);
+  if (![previous, next, current].every(Number.isFinite)) return null;
+
+  return {
+    dimension,
+    value: Math.max(0, current + next - previous),
+  };
+}

package/local-editor-app/lib/edit-slide-editor-helpers.js

@@ -0,0 +1,120 @@
+import { assetSrcFromPreviewUrl } from './edit-slide-url-security.js';
+
+export const EDITOR_ZOOM_MIN = 0.25;
+export const EDITOR_ZOOM_MAX = 2.4;
+export const EDITOR_ZOOM_STEP = 0.1;
+
+function finiteNumber(value, fallback = 0) {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : fallback;
+}
+
+export function roundEditorNumber(value) {
+  return Math.round(finiteNumber(value) * 100) / 100;
+}
+
+export function clampEditorZoom(value, min = EDITOR_ZOOM_MIN, max = EDITOR_ZOOM_MAX) {
+  return roundEditorNumber(Math.max(min, Math.min(max, finiteNumber(value, 1))));
+}
+
+export function readPixelValue(value, fallback = 0) {
+  const raw = String(value ?? '').trim();
+  if (!raw || raw === 'auto') return fallback;
+  const numeric = Number.parseFloat(raw);
+  return Number.isFinite(numeric) ? numeric : fallback;
+}
+
+function stripEditorHelperClasses(element) {
+  if (!element?.classList) return;
+  element.classList.remove('_os_hover', '_os_selected');
+  if (element.classList.length === 0) element.removeAttribute('class');
+}
+
+export function stripEditorHelpers(root) {
+  stripEditorHelperClasses(root);
+  root?.querySelectorAll?.('._os_hover, ._os_selected').forEach(stripEditorHelperClasses);
+}
+
+function restoreElementAssetUrls(element) {
+  if (!element?.getAttribute) return;
+  const src = element.getAttribute('src');
+  if (src) {
+    const restored = assetSrcFromPreviewUrl(src);
+    if (restored) element.setAttribute('src', restored);
+  }
+  element.querySelectorAll?.('source[src]').forEach((source) => {
+    const sourceSrc = source.getAttribute('src');
+    const restored = assetSrcFromPreviewUrl(sourceSrc);
+    if (restored) source.setAttribute('src', restored);
+  });
+  const style = element.getAttribute('style');
+  if (style && style.includes('url(')) {
+    const next = style.replace(/url\(\s*(['"]?)([^)'"]+)\1\s*\)/gi, (match, quote, val) => {
+      const restored = assetSrcFromPreviewUrl(val);
+      return restored ? `url(${quote}${restored}${quote})` : match;
+    });
+    if (next !== style) element.setAttribute('style', next);
+  }
+}
+
+/**
+ * Convert any token-scoped bridge asset preview URLs (added for in-iframe
+ * rendering) back to their canonical relative path before the slide HTML is
+ * serialized to disk. Keeps the saved file portable and free of session tokens.
+ */
+export function restorePreviewAssetUrls(root) {
+  if (!root) return;
+  restoreElementAssetUrls(root);
+  root.querySelectorAll?.('img[src], video[src], source[src], [style]').forEach(restoreElementAssetUrls);
+}
+
+export function isEditorTypingTarget(target) {
+  const element = target?.nodeType === 1 ? target : target?.parentElement;
+  if (!element) return false;
+  const tagName = element.tagName;
+  return Boolean(
+    element.isContentEditable ||
+      element.closest?.('[contenteditable="true"]') ||
+      tagName === 'INPUT' ||
+      tagName === 'TEXTAREA' ||
+      tagName === 'SELECT',
+  );
+}
+
+export function isEditorDeleteKey(key) {
+  return key === 'Backspace' || key === 'Delete';
+}
+
+export function consumeEditorKeyEvent(event) {
+  event?.preventDefault?.();
+  event?.stopPropagation?.();
+  event?.stopImmediatePropagation?.();
+}
+
+export function duplicateEditableElement(element) {
+  if (!element?.parentElement) return null;
+  const clone = element.cloneNode(true);
+  stripEditorHelpers(clone);
+  element.after(clone);
+  return clone;
+}
+
+export function deleteEditableElement(element) {
+  if (!element?.parentElement) return false;
+  element.remove();
+  return true;
+}
+
+export function orderEditableElement(element, direction) {
+  const parent = element?.parentElement;
+  if (!parent) return false;
+  if (direction === 'front') {
+    parent.appendChild(element);
+    return true;
+  }
+  if (direction === 'back') {
+    parent.insertBefore(element, parent.firstElementChild);
+    return true;
+  }
+  return false;
+}

package/local-editor-app/lib/edit-slide-url-security.js

@@ -0,0 +1,247 @@
+export const DEFAULT_EDIT_SLIDE_FILE_API = '/api/edit-slide/file';
+export const EDIT_SLIDE_ASSET_API_PATH = '/api/edit-slide/asset';
+export const ASSET_IMAGE_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.avif'];
+export const ASSET_VIDEO_EXTENSIONS = ['.mp4', '.webm', '.mov', '.m4v', '.ogv'];
+export const ASSET_MEDIA_EXTENSIONS = [...ASSET_IMAGE_EXTENSIONS, ...ASSET_VIDEO_EXTENSIONS];
+
+export function assetKindFromSrc(value) {
+  const pathPart = String(value || '').split(/[?#]/)[0].toLowerCase();
+  if (ASSET_VIDEO_EXTENSIONS.some((ext) => pathPart.endsWith(ext))) return 'video';
+  if (ASSET_IMAGE_EXTENSIONS.some((ext) => pathPart.endsWith(ext))) return 'image';
+  return 'file';
+}
+
+function firstParam(params, key) {
+  if (!params) return '';
+  if (params instanceof URLSearchParams) return params.get(key) || '';
+  const value = params[key];
+  if (Array.isArray(value)) return value[0] == null ? '' : String(value[0]);
+  return value == null ? '' : String(value);
+}
+
+export function isLoopbackBridgeUrl(url) {
+  const host = url.hostname.replace(/^\[|\]$/g, '');
+  const isLoopback =
+    host === 'localhost' ||
+    host === '::1' ||
+    host === '0:0:0:0:0:0:0:1' ||
+    /^127(?:\.\d{1,3}){3}$/.test(host);
+  return isLoopback && ['http:', 'https:'].includes(url.protocol);
+}
+
+export function isLoopbackRequestHost(rawHost) {
+  const hosts = String(rawHost || '')
+    .split(',')
+    .map((host) => host.trim())
+    .filter(Boolean);
+  if (!hosts.length) return false;
+  return hosts.every((host) => {
+    try {
+      return isLoopbackBridgeUrl(new URL(`http://${host}`));
+    } catch {
+      return false;
+    }
+  });
+}
+
+export function isLoopbackRequest(headersLike) {
+  const host = headersLike?.get?.('host') || '';
+  const forwardedHost = headersLike?.get?.('x-forwarded-host') || '';
+  if (!isLoopbackRequestHost(host)) return false;
+  return !forwardedHost || isLoopbackRequestHost(forwardedHost);
+}
+
+export function isLocalEditSlideLaunch(params) {
+  const file = firstParam(params, 'file');
+  const rawBridge = firstParam(params, 'bridge') || firstParam(params, 'localBridge');
+  if (!file || !rawBridge) return false;
+  try {
+    return isLoopbackBridgeUrl(new URL(rawBridge));
+  } catch {
+    return false;
+  }
+}
+
+export function bridgeTokenFromHash(hash) {
+  const rawHash = hash?.startsWith('#') ? hash.slice(1) : hash;
+  if (!rawHash) return '';
+  const params = new URLSearchParams(rawHash);
+  return params.get('bridgeToken') || params.get('token') || '';
+}
+
+export function normalizeLocalBridgeApi(rawBridge, defaultFileApi = DEFAULT_EDIT_SLIDE_FILE_API, bridgeToken = '') {
+  if (!rawBridge) return defaultFileApi;
+  try {
+    const url = new URL(rawBridge);
+    if (!isLoopbackBridgeUrl(url)) {
+      return defaultFileApi;
+    }
+    const token = bridgeToken || url.searchParams.get('token') || '';
+    url.pathname = `${url.pathname.replace(/\/+$/, '')}/api/edit-slide/file`;
+    url.search = '';
+    if (token) url.searchParams.set('token', token);
+    url.hash = '';
+    return url.toString();
+  } catch {
+    return defaultFileApi;
+  }
+}
+
+export function redactBridgeTokenFromEditorUrl(href) {
+  try {
+    const pageUrl = new URL(href);
+    let changed = false;
+    ['bridge', 'localBridge'].forEach((param) => {
+      const rawBridge = pageUrl.searchParams.get(param);
+      if (!rawBridge) return;
+      try {
+        const bridgeUrl = new URL(rawBridge);
+        if (!isLoopbackBridgeUrl(bridgeUrl) || !bridgeUrl.searchParams.has('token')) return;
+        bridgeUrl.searchParams.delete('token');
+        pageUrl.searchParams.set(param, bridgeUrl.toString());
+        changed = true;
+      } catch {
+        // Ignore malformed bridge URLs; normalizeLocalBridgeApi will fall back.
+      }
+    });
+    if (pageUrl.hash) {
+      const hashParams = new URLSearchParams(pageUrl.hash.slice(1));
+      const hadToken = hashParams.has('bridgeToken') || hashParams.has('token');
+      hashParams.delete('bridgeToken');
+      hashParams.delete('token');
+      if (hadToken) {
+        const nextHash = hashParams.toString();
+        pageUrl.hash = nextHash ? `#${nextHash}` : '';
+        changed = true;
+      }
+    }
+    return changed ? pageUrl.toString() : href;
+  } catch {
+    return href;
+  }
+}
+
+export function buildFileApiUrl(fileApi, params = {}, baseHref) {
+  try {
+    const base =
+      baseHref ||
+      (typeof window === 'undefined' ? 'http://localhost' : window.location.href);
+    const url = new URL(fileApi, base);
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null) url.searchParams.set(key, String(value));
+    });
+    return url.toString();
+  } catch {
+    const search = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null) search.set(key, String(value));
+    });
+    const glue = fileApi.includes('?') ? '&' : '?';
+    return search.size ? `${fileApi}${glue}${search.toString()}` : fileApi;
+  }
+}
+
+export function buildSlideDoc(outerHtml, css, options = {}) {
+  const editOverflowMargin = Number(options.editOverflowMargin) || 0;
+  const slideWidth = Number(options.slideWidth) || 1600;
+  const slideHeight = Number(options.slideHeight) || 900;
+  const resolve = typeof options.resolveAssetUrl === 'function' ? options.resolveAssetUrl : null;
+  const body = resolve ? rewriteAssetUrlsForPreview(outerHtml, resolve, { encodeAmp: true }) : (outerHtml || '');
+  const style = resolve ? rewriteAssetUrlsForPreview(css || '', resolve, { encodeAmp: false }) : (css || '');
+  if (editOverflowMargin <= 0) {
+    return `<!doctype html><html><head><meta charset="utf-8"><meta name="referrer" content="no-referrer"><style>
+    html,body{margin:0;padding:0;background:transparent;}
+    body{display:flex;align-items:center;justify-content:center;}
+    ${style}
+  </style></head><body>${body}</body></html>`;
+  }
+
+  return `<!doctype html><html><head><meta charset="utf-8"><meta name="referrer" content="no-referrer"><style>
+    html,body{margin:0;padding:0;background:transparent;}
+    ${style}
+    html,body{width:${slideWidth + editOverflowMargin * 2}px;min-height:${slideHeight + editOverflowMargin * 2}px;overflow:visible;}
+    body{display:block;padding:${editOverflowMargin}px;box-sizing:border-box;}
+    .slide{overflow:visible !important;}
+  </style></head><body>${body}</body></html>`;
+}
+
+/**
+ * Local media assets are stored on disk next to the slide HTML and referenced
+ * with relative paths (e.g. `assets/logo.png`). Those paths cannot resolve
+ * inside the srcDoc iframe, so for preview we rewrite them to a token-scoped
+ * bridge URL that streams the file. The canonical relative path is carried in
+ * the URL's `src` query param so it can be restored verbatim on save.
+ */
+export function isResolvableAssetRef(value) {
+  const v = String(value || '').trim();
+  if (!v) return false;
+  if (/^(data:|blob:|https?:|\/\/|#|mailto:|tel:)/i.test(v)) return false;
+  if (v.startsWith('/')) return false; // root-relative / absolute — leave untouched
+  const pathPart = v.split(/[?#]/)[0].toLowerCase();
+  return ASSET_MEDIA_EXTENSIONS.some((ext) => pathPart.endsWith(ext));
+}
+
+export function buildAssetApiBase(fileApi) {
+  const raw = fileApi || DEFAULT_EDIT_SLIDE_FILE_API;
+  try {
+    const isAbsolute = /^https?:\/\//i.test(raw);
+    const url = new URL(raw, isAbsolute ? undefined : 'http://localhost');
+    url.pathname = url.pathname.replace(/\/api\/(?:edit|open)-slide\/file\/?$/, EDIT_SLIDE_ASSET_API_PATH);
+    if (!url.pathname.endsWith(EDIT_SLIDE_ASSET_API_PATH)) {
+      url.pathname = EDIT_SLIDE_ASSET_API_PATH;
+    }
+    const token = url.searchParams.get('token') || '';
+    url.search = '';
+    if (token) url.searchParams.set('token', token);
+    url.hash = '';
+    return isAbsolute ? url.toString() : `${url.pathname}${url.search}`;
+  } catch {
+    return EDIT_SLIDE_ASSET_API_PATH;
+  }
+}
+
+export function buildAssetPreviewUrl(assetApiBase, { file, src } = {}) {
+  if (!assetApiBase || !src) return null;
+  try {
+    const isAbsolute = /^https?:\/\//i.test(assetApiBase);
+    const url = new URL(assetApiBase, isAbsolute ? undefined : 'http://localhost');
+    if (file) url.searchParams.set('file', file);
+    url.searchParams.set('src', src);
+    return isAbsolute ? url.toString() : `${url.pathname}${url.search}`;
+  } catch {
+    return null;
+  }
+}
+
+export function assetSrcFromPreviewUrl(value) {
+  const v = String(value || '');
+  if (!v.includes(EDIT_SLIDE_ASSET_API_PATH)) return null;
+  try {
+    const url = new URL(v, 'http://localhost');
+    if (!url.pathname.endsWith(EDIT_SLIDE_ASSET_API_PATH)) return null;
+    return url.searchParams.get('src') || null;
+  } catch {
+    return null;
+  }
+}
+
+export function rewriteAssetUrlsForPreview(input, resolve, { encodeAmp = true } = {}) {
+  if (!input || typeof resolve !== 'function') return input || '';
+  const enc = (url) => (encodeAmp ? url.replace(/&/g, '&amp;') : url);
+  let out = String(input).replace(/(\ssrc=)(["'])(.*?)\2/gi, (match, lead, quote, val) => {
+    if (!isResolvableAssetRef(val)) return match;
+    const resolved = resolve(val);
+    return resolved ? `${lead}${quote}${enc(resolved)}${quote}` : match;
+  });
+  out = out.replace(/(<source\b[^>]*\ssrc=)(["'])(.*?)\2/gi, (match, lead, quote, val) => {
+    if (!isResolvableAssetRef(val)) return match;
+    const resolved = resolve(val);
+    return resolved ? `${lead}${quote}${enc(resolved)}${quote}` : match;
+  });
+  out = out.replace(/url\(\s*(['"]?)([^)'"]+)\1\s*\)/gi, (match, quote, val) => {
+    if (!isResolvableAssetRef(val)) return match;
+    const resolved = resolve(val);
+    return resolved ? `url(${quote}${enc(resolved)}${quote})` : match;
+  });
+  return out;
+}

package/local-editor-app/next.config.mjs

@@ -0,0 +1,31 @@
+const localBridgeConnectSrc = 'http://localhost:* http://127.0.0.1:* https://localhost:* https://127.0.0.1:*';
+
+const localEditorSecurityHeaders = [
+  { key: 'X-Content-Type-Options', value: 'nosniff' },
+  { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
+  {
+    key: 'Content-Security-Policy',
+    value: [
+      "default-src 'self'",
+      "script-src 'self' 'unsafe-inline' 'unsafe-eval'",
+      "style-src 'self' 'unsafe-inline'",
+      "img-src 'self' data: blob: http://localhost:* http://127.0.0.1:* https://localhost:* https://127.0.0.1:*",
+      "media-src 'self' data: blob: http://localhost:* http://127.0.0.1:* https://localhost:* https://127.0.0.1:*",
+      "font-src 'self' data:",
+      `connect-src 'self' ${localBridgeConnectSrc}`,
+      "frame-src 'self' blob:",
+      "frame-ancestors 'none'",
+      "form-action 'self'",
+      "base-uri 'self'",
+    ].join('; '),
+  },
+];
+
+export default {
+  async headers() {
+    return [
+      { source: '/edit-slide', headers: localEditorSecurityHeaders },
+      { source: '/:path*', headers: localEditorSecurityHeaders },
+    ];
+  },
+};

package/local-editor-app/package.json

@@ -0,0 +1,7 @@
+{
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev --webpack"
+  }
+}

package/mcp/pptx-studio-mcp-server.mjs

@@ -186,7 +186,7 @@ async function getBaseUrl() {
     process.env.PPTX_STUDIO_BASE_URL || await readRegisteredEditorBaseUrl(process.cwd());
   if (!raw) {
     throw new Error(
-      'PPTX_STUDIO_BASE_URL is not set and no local editor URL is registered. Start `node scripts/dev-studio.mjs` first, or set PPTX_STUDIO_BASE_URL to the active loopback app URL.'
+      'PPTX_STUDIO_BASE_URL is not set and no local editor URL is registered. Set PPTX_STUDIO_BASE_URL to the active app URL when using remote export tools from a source checkout.'
     );
   }
   const normalized = raw.endsWith('/') ? raw : `${raw}/`;

package/package.json

@@ -1,22 +1,28 @@
 {
   "name": "html2pptx-local-mcp",
-  "version": "1.1.20",
+  "version": "1.1.21",
   "type": "module",
   "description": "Local stdio MCP server for opening html2pptx slide HTML in the local edit-slide editor.",
   "bin": {
     "html2pptx-mcp": "./mcp/pptx-studio-mcp-server.mjs",
     "html2pptx-install-mcp": "./scripts/install-mcp.mjs",
+    "html2pptx-install-skills": "./scripts/install-skills.mjs",
     "html2pptx-comments": "./scripts/extract-html2pptx-comments.mjs"
   },
   "files": [
     "app/docs/content.js",
     "cli/dist",
     "cli/package.json",
+    "local-editor-app",
+    "lib/local-editor-server.js",
+    "lib/local-editor-state.js",
     "lib/local-slide-editor-launcher.js",
     "lib/pptx-studio-mcp-core.js",
     "lib/server/template-html-policy.mjs",
     "mcp/pptx-studio-mcp-server.mjs",
+    "public/skills",
     "scripts/install-mcp.mjs",
+    "scripts/install-skills.mjs",
     "scripts/extract-html2pptx-comments.mjs",
     "src/animation-injector.js",
     "src/animation-renderers.js"
@@ -24,8 +30,13 @@
   "dependencies": {
     "@clack/prompts": "^0.10.1",
     "commander": "^13.1.0",
+    "framer-motion": "^12.38.0",
     "jsdom": "^26.1.0",
-    "picocolors": "^1.1.1"
+    "lucide-react": "^1.7.0",
+    "next": "^16.2.2",
+    "picocolors": "^1.1.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "engines": {
     "node": ">=18"