@pinepaper.studio/mcp-server 1.5.3 → 1.5.5

package/dist/types/code-generator.js

@@ -10,10 +10,6 @@ import { CreateItemInputSchema, ModifyItemInputSchema, AddRelationInputSchema, A
 CreateDiagramShapeInputSchema, ConnectInputSchema, ConnectPortsInputSchema, AddPortsInputSchema, AutoLayoutInputSchema, GetDiagramShapesInputSchema, UpdateConnectorInputSchema, RemoveConnectorInputSchema, DiagramModeInputSchema, 
 // Agent flow mode types
 AgentStartJobInputSchema, AgentEndJobInputSchema, AgentResetInputSchema, AgentBatchExecuteInputSchema, AgentExportInputSchema, AgentAnalyzeInputSchema, 
-// Interactive/Trigger types
-AddTriggerInputSchema, RemoveTriggerInputSchema, QueryTriggersInputSchema, 
-// Quiz types
-CreateQuizInputSchema, GetQuizStateInputSchema, ResetQuizInputSchema, 
 // Letter collage types
 CreateLetterCollageInputSchema, AnimateLetterCollageInputSchema, 
 // Map types
@@ -82,7 +78,7 @@ function generateBlendModeCode(itemVarName, blendMode) {
  */
 function generateCreateItemCode(itemType, position, properties) {
     // Extract special properties that need separate handling
-    const { color, fillColor, strokeColor, shadowColor, shadowBlur, shadowOffset, blendMode, opacity, ...baseProperties } = properties;
+    const { color, fillColor, strokeColor, shadowColor, shadowBlur, shadowOffset, blendMode, opacity, contentType, contentFormat, countdownTarget, countdownEndText, ...baseProperties } = properties;
     const params = {
         x: position.x,
         y: position.y,
@@ -127,6 +123,17 @@ const item = app.create('${itemType}', ${JSON.stringify(params, null, 2)});`;
     }
     // Ensure item is visible above backgrounds/generators
     code += `\nif (item.bringToFront) item.bringToFront();`;
+    // Add dynamic content support for text items
+    if (contentType && itemType === 'text') {
+        const opts = {};
+        if (contentFormat)
+            opts.format = contentFormat;
+        if (countdownTarget !== undefined)
+            opts.countdownTarget = countdownTarget;
+        if (countdownEndText)
+            opts.countdownEndText = countdownEndText;
+        code += `\nif (app.setDynamicContent) app.setDynamicContent(item, '${contentType}', ${JSON.stringify(opts)});`;
+    }
     code += `
 const itemId = item.data.registryId;
 app.historyManager.saveState();
@@ -139,15 +146,42 @@ app.historyManager.saveState();
  * Template for modifying items
  */
 function generateModifyItemCode(itemId, properties) {
-    return `
+    const { contentType, contentFormat, countdownTarget, countdownEndText, ...restProperties } = properties;
+    let code = `
 // Modify item ${itemId}
-app.select('${itemId}');
-app.modify(${JSON.stringify(properties, null, 2)});
+app.select('${itemId}');`;
+    // Pass non-dynamic-content properties to app.modify
+    if (Object.keys(restProperties).length > 0) {
+        code += `\napp.modify(${JSON.stringify(restProperties, null, 2)});`;
+    }
+    // Handle dynamic content type changes
+    if (contentType !== undefined) {
+        if (contentType === null || contentType === 'none' || contentType === '') {
+            // Remove dynamic content
+            code += `
+const entry = app.itemRegistry.get('${itemId}');
+if (entry && entry.item && app.removeDynamicContent) app.removeDynamicContent(entry.item);`;
+        }
+        else {
+            // Set dynamic content
+            const opts = {};
+            if (contentFormat)
+                opts.format = contentFormat;
+            if (countdownTarget !== undefined)
+                opts.countdownTarget = countdownTarget;
+            if (countdownEndText)
+                opts.countdownEndText = countdownEndText;
+            code += `
+const entry = app.itemRegistry.get('${itemId}');
+if (entry && entry.item && app.setDynamicContent) app.setDynamicContent(entry.item, '${contentType}', ${JSON.stringify(opts)});`;
+        }
+    }
+    code += `
 app.historyManager.saveState();
 
 // Return success
-({ success: true, itemId: '${itemId}' });
-`.trim();
+({ success: true, itemId: '${itemId}' });`;
+    return code.trim();
 }
 /**
  * Template for deleting items
@@ -254,17 +288,40 @@ app.animate(item, {
 ({ success: true, itemId: '${itemId}', animationType: '${animationType}' });
 `.trim();
 }
+/**
+ * PinePaper's keyframe interpolator only tweens `position` when it is an [x, y]
+ * ARRAY. Callers (and other agents) routinely pass a { x, y } object, which is
+ * silently ignored — the item then stays frozen for the whole animation. Accept
+ * both shapes by normalizing { x, y } -> [x, y] before the keyframes are emitted.
+ */
+function normalizeKeyframePositions(keyframes) {
+    return (keyframes || []).map((kf) => {
+        const props = kf?.properties;
+        const p = props?.position;
+        if (p && !Array.isArray(p) && typeof p === 'object' && 'x' in p && 'y' in p) {
+            return { ...kf, properties: { ...props, position: [p.x, p.y] } };
+        }
+        return kf;
+    });
+}
 /**
  * Template for keyframe animation
  */
-function generateKeyframeAnimateCode(itemId, keyframes, duration, loop = false) {
-    const keyframesJson = JSON.stringify(keyframes, null, 2);
+function generateKeyframeAnimateCode(itemId, keyframes, duration, loop = false, timeOffset, clipInPoint, clipOutPoint) {
+    const keyframesJson = JSON.stringify(normalizeKeyframePositions(keyframes), null, 2);
     const calculatedDuration = duration || Math.max(...keyframes.map(k => k.time));
+    const opts = { duration: calculatedDuration, loop };
+    if (timeOffset !== undefined)
+        opts.timeOffset = timeOffset;
+    if (clipInPoint !== undefined)
+        opts.clipInPoint = clipInPoint;
+    if (clipOutPoint !== undefined)
+        opts.clipOutPoint = clipOutPoint;
     return `
 // Apply keyframe animation to ${itemId}
-app.addAnimation('${itemId}', ${keyframesJson}, { duration: ${calculatedDuration}, loop: ${loop} });
+app.addAnimation('${itemId}', ${keyframesJson}, ${JSON.stringify(opts)});
 
-({ success: true, itemId: '${itemId}', duration: ${calculatedDuration}, loop: ${loop} });
+({ success: true, itemId: '${itemId}', duration: ${calculatedDuration}, loop: ${loop}${timeOffset !== undefined ? `, timeOffset: ${timeOffset}` : ''}${clipInPoint !== undefined ? `, clipInPoint: ${clipInPoint}` : ''}${clipOutPoint !== undefined ? `, clipOutPoint: ${clipOutPoint}` : ''} });
 `.trim();
 }
 /**
@@ -411,35 +468,29 @@ const size = app.getCanvasSize();
  */
 function generateClearCanvasCode() {
     return `
-// Clear all items from canvas
-const entries = app.itemRegistry.getAll();
-const itemIds = entries.map(entry => entry.id || entry.itemId);
-let removedCount = 0;
-
-for (const itemId of itemIds) {
-  try {
-    const item = app.getItemById(itemId);
-    if (item) {
-      item.remove();
-      app.itemRegistry.remove(itemId);
-      removedCount++;
-    }
-  } catch (e) {
-    console.warn('Failed to remove item:', itemId, e);
-  }
-}
-
-// Also clear any relations
-if (app.clearAllRelations) {
-  app.clearAllRelations();
+// Clear all items from canvas. Prefer app.clearCanvas() — the canonical
+// reset that also tears down relations, the (virtual) camera animation,
+// generators, effects and background. The old manual loop here was broken:
+// it keyed item lookups on entry.id/entry.itemId (the registry getAll()
+// entries don't expose those — getItemById wants the registry id), so it
+// removed 0 items, and it called the non-existent app.clearAllRelations.
+const before = app.itemRegistry ? app.itemRegistry.getAll().length : 0;
+
+if (typeof app.clearCanvas === 'function') {
+  app.clearCanvas();
+} else {
+  // Fallback for older builds without clearCanvas().
+  if (app.textItemGroup) app.textItemGroup.removeChildren();
+  if (app.patternGroup) app.patternGroup.removeChildren();
+  if (app.itemRegistry) app.itemRegistry.clear();
+  if (app.relationRegistry) app.relationRegistry.clear();
 }
 
-app.historyManager.saveState();
+if (app.historyManager) app.historyManager.saveState();
 
-// Verify canvas is empty
-const remaining = app.itemRegistry.getAll().length;
+const remaining = app.itemRegistry ? app.itemRegistry.getAll().length : 0;
 
-({ success: true, removedCount, remainingItems: remaining });
+({ success: true, removedCount: Math.max(0, before - remaining), remainingItems: remaining });
 `.trim();
 }
 /**
@@ -582,7 +633,14 @@ export class PinePaperCodeGenerator {
      */
     generateCreateItem(input) {
         const validated = CreateItemInputSchema.parse(input);
-        return generateCreateItemCode(validated.itemType, validated.position, validated.properties);
+        const properties = { ...validated.properties };
+        if (validated.animationType !== undefined)
+            properties.animationType = validated.animationType;
+        if (validated.animationSpeed !== undefined)
+            properties.animationSpeed = validated.animationSpeed;
+        if (validated.keyframes !== undefined)
+            properties.keyframes = validated.keyframes;
+        return generateCreateItemCode(validated.itemType, validated.position, properties);
     }
     /**
      * Generate code for modifying an item
@@ -628,7 +686,7 @@ export class PinePaperCodeGenerator {
      */
     generateKeyframeAnimate(input) {
         const validated = KeyframeAnimateInputSchema.parse(input);
-        return generateKeyframeAnimateCode(validated.itemId, validated.keyframes, validated.duration, validated.loop);
+        return generateKeyframeAnimateCode(validated.itemId, validated.keyframes, validated.duration, validated.loop, validated.timeOffset, validated.clipInPoint, validated.clipOutPoint);
     }
     /**
      * Generate code for executing a generator
@@ -748,6 +806,70 @@ if (imported) {
         return `
 // Error: No SVG source provided
 throw new Error('Either svgString or url must be provided');
+`.trim();
+    }
+    /**
+     * Generate code for importing a Mermaid diagram (flowchart, stateDiagram,
+     * sequenceDiagram, erDiagram, classDiagram).
+     */
+    generateImportMermaid(mermaidText, options = {}) {
+        const escaped = mermaidText.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, '\\$');
+        const optsJson = JSON.stringify(options);
+        return `
+// Import Mermaid diagram
+(function() {
+  if (!app.importMermaid) return { success: false, error: 'importMermaid not available — diagramSystem missing' };
+  const mermaidText = \`${escaped}\`;
+  const result = app.importMermaid(mermaidText, ${optsJson});
+  return {
+    success: !!result.success,
+    nodeCount: result.nodes ? result.nodes.length : 0,
+    edgeCount: result.edges ? result.edges.length : 0,
+    nodes: result.nodes || [],
+    edges: result.edges || [],
+    errors: result.errors || [],
+  };
+})();
+`.trim();
+    }
+    /**
+     * Generate code for capturing the canvas as pp: ontology. Wraps FxTool's
+     * app.exportCanvasOntology() — defined in PinePaper.js after the
+     * canvas-state-to-ontology promotion. Output mirrors the cloud-sync
+     * postMessage contract: { canvasWidth, canvasHeight, itemCount,
+     * itemTypes, hasAnimations, relationCount, items, triples, [viewport] }.
+     *
+     * Failure modes: app missing the method → return { success: false, error }
+     * with a clear FxTool-version hint. Internal exceptions propagate from
+     * the browser-side function (TripleLanguage warns to console; we don't
+     * fail the tool call on triple-only failures).
+     */
+    generateGetCanvasOntology(options = {}) {
+        const optsJson = JSON.stringify(options);
+        return `
+// Capture canvas as pp: ontology
+(function() {
+  if (!app.exportCanvasOntology) {
+    return {
+      success: false,
+      error: 'app.exportCanvasOntology not available — requires FxTool with canvas-ontology promotion. Falling back to pinepaper_get_items is acceptable but loses the triples representation.',
+    };
+  }
+  const ctx = app.exportCanvasOntology(${optsJson});
+  return {
+    success: true,
+    canvasWidth: ctx.canvasWidth,
+    canvasHeight: ctx.canvasHeight,
+    canvasPreset: ctx.canvasPreset,
+    itemCount: ctx.itemCount,
+    itemTypes: ctx.itemTypes,
+    hasAnimations: ctx.hasAnimations,
+    relationCount: ctx.relationCount,
+    items: ctx.items,
+    triples: ctx.triples,
+    viewport: ctx.viewport,
+  };
+})();
 `.trim();
     }
     /**
@@ -1062,13 +1184,9 @@ if (typeof app.generators !== 'undefined' && app.generators['${backgroundGenerat
   const sourceId = nameToId['${source}'];
   const targetId = nameToId['${target}'];
   if (sourceId && targetId) {
-    const sourceItem = app.itemRegistry.get(sourceId);
-    const targetItem = app.itemRegistry.get(targetId);
-    if (sourceItem && targetItem) {
-      const params = ${paramsStr};
-      app.relationManager.addRelation(sourceItem, targetItem, '${type}', params);
-      results.relations.push({ source: '${source}', target: '${target}', type: '${type}' });
-    }
+    const params = ${paramsStr};
+    app.addRelation(sourceId, targetId, '${type}', params);
+    results.relations.push({ source: '${source}', target: '${target}', type: '${type}' });
   }
 })();
 `);
@@ -1346,10 +1464,11 @@ throw new Error('Unknown diagram mode action: ${action}');
      */
     generateAgentStartJob(input) {
         const validated = AgentStartJobInputSchema.parse(input);
-        const { name, screenshotPolicy, canvasPreset, clearCanvas } = validated;
+        const { name, screenshotPolicy, canvasPreset, clearCanvas, includeOntology } = validated;
         const nameStr = name ? `'${name.replace(/'/g, "\\'")}'` : 'null';
         const policyStr = screenshotPolicy || 'on_complete';
         const shouldClear = clearCanvas !== false;
+        const wantOntology = includeOntology !== false;
         let code = `
 // Start agent job
 (async function() {
@@ -1378,10 +1497,31 @@ throw new Error('Unknown diagram mode action: ${action}');
   app.setCanvasSize('${canvasPreset}');
   // Allow canvas resize to take effect
   await new Promise(r => setTimeout(r, 50));
+`;
+        }
+        if (wantOntology) {
+            code += `
+  // Capture initial canvas ontology so the agent has baseline context
+  // without a follow-up pinepaper_get_canvas_ontology call. After
+  // clearCanvas this is a tiny empty-state payload; with clearCanvas:false
+  // it captures whatever's already on the canvas. Older FxTool builds
+  // without exportCanvasOntology produce an _ontologyUnavailable: true
+  // marker so the agent knows to fall back to pinepaper_get_items.
+  let _ontology = null;
+  let _ontologyUnavailable = false;
+  try {
+    if (app.exportCanvasOntology) {
+      _ontology = app.exportCanvasOntology();
+    } else {
+      _ontologyUnavailable = true;
+    }
+  } catch (e) {
+    _ontologyUnavailable = true;
+  }
 `;
         }
         code += `
-  // Return job context with canvas size
+  // Return job context with canvas size${wantOntology ? ' + initial ontology' : ''}
   const _cs = app.getCanvasSize ? app.getCanvasSize() : { width: 800, height: 600 };
   return {
     success: true,
@@ -1390,7 +1530,9 @@ throw new Error('Unknown diagram mode action: ${action}');
     screenshotPolicy: '${policyStr}',
     canvasPreset: ${canvasPreset ? `'${canvasPreset}'` : 'null'},
     canvasCleared: ${shouldClear},
-    canvasSize: { width: _cs.width || 800, height: _cs.height || 600 }
+    canvasSize: { width: _cs.width || 800, height: _cs.height || 600 }${wantOntology ? `,
+    ontology: _ontology,
+    ontologyUnavailable: _ontologyUnavailable || undefined` : ''}
   };
 })();
 `;
@@ -1461,14 +1603,7 @@ throw new Error('Unknown diagram mode action: ${action}');
     if (item.shadowColor || item.shadowBlur) analysis.hasShadows = true;
   });
 
-  // Check animation manager for registered animations
-  if (app.animationManager) {
-    const animations = app.animationManager.getAll ? app.animationManager.getAll() : (app.animationManager.animations || []);
-    if (animations.length > 0) {
-      analysis.hasAnimations = true;
-      animationSet.add('managed');
-    }
-  }
+  // FxTool has no animationManager — animations are detected via item.data.animationType walk above
   // Check timeline for active animations
   if (app.timeline && (app.timeline.isPlaying || app.timeline.animations?.length > 0)) {
     analysis.hasAnimations = true;
@@ -1639,16 +1774,29 @@ throw new Error('Unknown diagram mode action: ${action}');
      */
     generateBatchOperationCode(op, index) {
         switch (op.type) {
-            case 'create':
+            case 'create': {
                 const pos = op.position || { x: 400, y: 300 };
-                const props = JSON.stringify(op.properties || {});
-                return `
+                const createProps = (op.properties || {});
+                const props = JSON.stringify(createProps);
+                let createCode = `
 const item = app.create('${op.itemType}', { position: { x: ${pos.x}, y: ${pos.y} }, ...${props} });
-const itemId = item.data && item.data.id ? item.data.id : app.registerItem(item, '${op.itemType}', { source: 'mcp-batch' });
+const itemId = item.data && item.data.id ? item.data.id : app.registerItem(item, '${op.itemType}', { source: 'mcp-batch' });`;
+                // app.create() does not read blendMode/opacity from its params, but the
+                // underlying Paper.js item supports them directly — apply post-create so
+                // callers can pass them inline in `properties` and have them take effect.
+                if (createProps.blendMode !== undefined) {
+                    createCode += `\nif ('blendMode' in item) item.blendMode = ${JSON.stringify(createProps.blendMode)};`;
+                }
+                if (createProps.opacity !== undefined) {
+                    createCode += `\nif ('opacity' in item) item.opacity = ${JSON.stringify(createProps.opacity)};`;
+                }
+                createCode += `
 // Ensure item is visible above backgrounds/generators
 if (item.bringToFront) item.bringToFront();
 return { itemId };
 `;
+                return createCode;
+            }
             case 'modify':
                 const itemRef = op.itemId?.startsWith('$')
                     ? `itemIds[${op.itemId.substring(1)}]`
@@ -1729,7 +1877,7 @@ return { success: true, width: ${w}, height: ${h} };
                 const kfItemRef = op.itemId?.startsWith('$')
                     ? `itemIds[${op.itemId.substring(1)}]`
                     : `'${op.itemId}'`;
-                const kfJson = JSON.stringify(op.keyframes || []);
+                const kfJson = JSON.stringify(normalizeKeyframePositions(op.keyframes || []));
                 const kfDuration = op.duration || (op.keyframes?.length ? Math.max(...op.keyframes.map(k => k.time)) : 5);
                 const kfLoop = op.loop ?? false;
                 return `
@@ -1743,16 +1891,14 @@ return { itemId: targetId, duration: ${kfDuration}, loop: ${kfLoop} };
                     ? `itemIds[${op.itemId.substring(1)}]`
                     : `'${op.itemId}'`;
                 const maskOpts = JSON.stringify(op.maskOptions || {});
+                const preset = op.maskPreset || op.maskType || 'wipeLeft';
                 return `
 const targetId = ${maskItemRef};
-if (!app.maskSystem) throw new Error('Mask system not available');
-const result = app.maskSystem.applyAnimatedMask(targetId, {
-  preset: ${op.maskPreset ? `'${op.maskPreset}'` : 'null'},
-  maskType: ${op.maskType ? `'${op.maskType}'` : 'null'},
-  options: ${maskOpts},
-  maskOptions: ${maskOpts}
-});
-return result;
+const item = app.getItemById(targetId);
+if (!item) throw new Error('Item not found: ' + targetId);
+if (!app.applyAnimatedMask) throw new Error('Mask system not available');
+const maskedGroup = app.applyAnimatedMask(item, '${preset}', ${maskOpts});
+return { success: !!maskedGroup, itemId: targetId, preset: '${preset}' };
 `;
             }
             case 'apply_effect': {
@@ -1800,8 +1946,9 @@ return { success: true, action: 'seek', time: ${op.time || 0} };
      */
     generateAgentExport(input) {
         const validated = AgentExportInputSchema.parse(input);
-        const { platform, format, quality } = validated;
+        const { platform, format, quality, framing, duration } = validated;
         const qualityLevel = quality || 'standard';
+        const videoDuration = duration ?? 5;
         // Quality settings (bitrate in bps for VideoEncoder)
         const qualitySettings = {
             draft: { compression: 0.6, fps: 15, dpi: 72, bitrate: 2_000_000 },
@@ -1830,10 +1977,38 @@ return { success: true, action: 'seek', time: ${op.time || 0} };
   const platform = '${platform}';
   const format = '${exportFormat}';
   const quality = '${qualityLevel}';
+  const framing = '${framing}';
   const settings = ${JSON.stringify(qualitySettings)};
   const dimensions = ${JSON.stringify({ width: preset.width, height: preset.height })};
 
-  let result = { success: false, platform, format, quality };
+  // Resolve camera-view framing dims when requested. Reads the first
+  // camera_animates keyframe's zoom and divides the canvas dims by it
+  // (mirrors FxTool ExportEngine.js:466-485). Camera animation still
+  // drives motion during export — framing only fixes the output frame.
+  let cameraDims = null;
+  if (framing === 'camera') {
+    if (!['gif', 'mp4', 'webm'].includes(format)) {
+      return { success: false, platform, format, framing, error: 'framing: "camera" is only supported for video formats (gif, mp4, webm). Use format: "mp4" / "gif" / "webm" or omit framing.' };
+    }
+    const rr = app.relationRegistry;
+    const hasWalkthrough = rr && typeof rr.hasCameraAnimation === 'function' && rr.hasCameraAnimation();
+    if (!hasWalkthrough) {
+      return { success: false, platform, format, framing, error: 'framing: "camera" requires a camera_animates walkthrough on the canvas. Add one or omit framing.' };
+    }
+    const params = rr.getCameraAnimationParams ? rr.getCameraAnimationParams() : null;
+    if (!params || (params.mode || 'keyframes') !== 'keyframes' || !params.keyframes || !params.keyframes.length) {
+      return { success: false, platform, format, framing, error: 'framing: "camera" requires a keyframe-mode camera walkthrough with at least one keyframe.' };
+    }
+    const firstKf = params.keyframes[0];
+    const firstZoom = firstKf && firstKf.zoom > 0 ? firstKf.zoom : 1;
+    const canvasEl = document.querySelector('canvas');
+    cameraDims = {
+      width: Math.round((canvasEl ? canvasEl.width : dimensions.width) / firstZoom),
+      height: Math.round((canvasEl ? canvasEl.height : dimensions.height) / firstZoom),
+    };
+  }
+
+  let result = { success: false, platform, format, quality, framing };
 
   try {
     switch (format) {
@@ -1881,28 +2056,44 @@ return { success: true, action: 'seek', time: ${op.time || 0} };
       case 'mp4':
       case 'webm': {
         const videoMimeType = { mp4: 'video/mp4', webm: 'video/webm', gif: 'image/gif' }[format];
-        // Use _quickExportVideo (delegates to VideoExporter.export internally)
-        if (app.exportEngine && app.exportEngine._quickExportVideo) {
-          const videoResult = await app.exportEngine._quickExportVideo(format, { fps: settings.fps, bitrate: settings.bitrate, duration: 5 }, false);
+        // FxTool VideoExporter._calculateBitrate multiplies a per-resolution
+        // base by settings.quality (0.5-1.0). Our existing per-tier compression
+        // values (0.6 / 0.85 / 0.95) map directly to that scale. Without this,
+        // ExportEngine._quickExportVideo overrides quality with undefined for
+        // mp4/webm, _calculateBitrate yields NaN, and VideoEncoder.configure
+        // rejects with 'malformed bitrate value'.
+        const baseVideoSettings = { format, fps: settings.fps, quality: settings.compression, duration: ${videoDuration} };
+        const blobToDataUrl = (b) => new Promise(resolve => {
+          const r = new FileReader();
+          r.onloadend = () => resolve(r.result);
+          r.readAsDataURL(b);
+        });
+        // Camera framing requires going direct to videoExporter so width/height
+        // pass through — _quickExportVideo strips dim fields.
+        if (cameraDims && app.exportEngine && app.exportEngine.videoExporter) {
+          const blob = await app.exportEngine.videoExporter.export({ ...baseVideoSettings, width: cameraDims.width, height: cameraDims.height });
+          const dataUrl = await blobToDataUrl(blob);
+          result = { success: true, platform, format, framing, data: dataUrl, mimeType: videoMimeType, size: blob.size, dimensions: cameraDims };
+        } else if ((format === 'mp4' || format === 'webm') && app.exportEngine && app.exportEngine.videoExporter) {
+          // Bypass _quickExportVideo for mp4/webm — it hardcodes
+          // quality:undefined for these formats and produces a NaN bitrate.
+          const blob = await app.exportEngine.videoExporter.export(baseVideoSettings);
+          const dataUrl = await blobToDataUrl(blob);
+          result = { success: true, platform, format, framing, data: dataUrl, mimeType: videoMimeType, size: blob.size };
+        } else if (app.exportEngine && app.exportEngine._quickExportVideo) {
+          // GIF path (working): _quickExportVideo forwards gifQuality to
+          // gif.js. Also serves as the fallback if videoExporter is absent.
+          const videoResult = await app.exportEngine._quickExportVideo(format, baseVideoSettings, false);
           if (videoResult && videoResult.blob) {
-            const reader = new FileReader();
-            const dataUrl = await new Promise(resolve => {
-              reader.onloadend = () => resolve(reader.result);
-              reader.readAsDataURL(videoResult.blob);
-            });
-            result = { success: true, platform, format, data: dataUrl, mimeType: videoMimeType, size: videoResult.blob.size };
+            const dataUrl = await blobToDataUrl(videoResult.blob);
+            result = { success: true, platform, format, framing, data: dataUrl, mimeType: videoMimeType, size: videoResult.blob.size };
           } else {
             result = { success: false, error: format.toUpperCase() + ' export returned no data' };
           }
         } else if (app.exportEngine && app.exportEngine.videoExporter) {
-          // Fallback: call VideoExporter.export directly
-          const blob = await app.exportEngine.videoExporter.export({ format, fps: settings.fps, bitrate: settings.bitrate, duration: 5 });
-          const reader = new FileReader();
-          const dataUrl = await new Promise(resolve => {
-            reader.onloadend = () => resolve(reader.result);
-            reader.readAsDataURL(blob);
-          });
-          result = { success: true, platform, format, data: dataUrl, mimeType: videoMimeType, size: blob.size };
+          const blob = await app.exportEngine.videoExporter.export(baseVideoSettings);
+          const dataUrl = await blobToDataUrl(blob);
+          result = { success: true, platform, format, framing, data: dataUrl, mimeType: videoMimeType, size: blob.size };
         } else {
           result = { success: false, error: format.toUpperCase() + ' export not available' };
         }
@@ -1994,14 +2185,7 @@ return { success: true, action: 'seek', time: ${op.time || 0} };
     if (item.shadowColor || item.shadowBlur) hasShadow = true;
   });
 
-  // Check animation manager for registered animations
-  if (app.animationManager) {
-    const animations = app.animationManager.getAll ? app.animationManager.getAll() : (app.animationManager.animations || []);
-    if (animations.length > 0) {
-      analysis.hasAnimations = true;
-      animationSet.add('managed');
-    }
-  }
+  // FxTool has no animationManager — animations are detected via item.data.animationType walk above
   // Check timeline for active animations
   if (app.timeline && (app.timeline.isPlaying || app.timeline.animations?.length > 0)) {
     analysis.hasAnimations = true;
@@ -2065,257 +2249,6 @@ return { success: true, action: 'seek', time: ${op.time || 0} };
     suggestedPlatforms
   };
 })();
-`.trim();
-    }
-    // ===========================================================================
-    // INTERACTIVE TRIGGER CODE GENERATORS
-    // ===========================================================================
-    /**
-     * Generate code for adding a trigger
-     */
-    generateAddTrigger(input) {
-        const validated = AddTriggerInputSchema.parse(input);
-        const { itemId, event, actions, condition, timelineOffset } = validated;
-        const actionsStr = JSON.stringify(actions);
-        const conditionStr = condition ? `'${condition.replace(/'/g, "\\'")}'` : 'null';
-        const offsetStr = timelineOffset !== undefined ? timelineOffset : 'null';
-        return `
-// Add trigger to ${itemId}
-const item = app.getItemById('${itemId}');
-if (!item) throw new Error('Item not found: ${itemId}');
-
-const trigger = {
-  event: '${event}',
-  actions: ${actionsStr},
-  condition: ${conditionStr},
-  timelineOffset: ${offsetStr}
-};
-
-// Initialize triggers array if needed
-if (!item.data) item.data = {};
-if (!item.data.triggers) item.data.triggers = [];
-
-// Add trigger
-item.data.triggers.push(trigger);
-
-// Register event handler
-if (app.triggerManager) {
-  app.triggerManager.registerTrigger(item, trigger);
-}
-
-app.historyManager.saveState();
-({ success: true, itemId: '${itemId}', event: '${event}', triggerId: item.data.triggers.length - 1 });
-`.trim();
-    }
-    /**
-     * Generate code for removing a trigger
-     */
-    generateRemoveTrigger(input) {
-        const validated = RemoveTriggerInputSchema.parse(input);
-        const { itemId, event, removeAll } = validated;
-        if (removeAll) {
-            return `
-// Remove all triggers from ${itemId}
-const item = app.getItemById('${itemId}');
-if (!item) throw new Error('Item not found: ${itemId}');
-
-const removedCount = item.data?.triggers?.length || 0;
-if (item.data) item.data.triggers = [];
-
-if (app.triggerManager) {
-  app.triggerManager.unregisterAll(item);
-}
-
-app.historyManager.saveState();
-({ success: true, itemId: '${itemId}', removedCount, removeAll: true });
-`.trim();
-        }
-        return `
-// Remove ${event} trigger from ${itemId}
-const item = app.getItemById('${itemId}');
-if (!item) throw new Error('Item not found: ${itemId}');
-
-let removedCount = 0;
-if (item.data?.triggers) {
-  const before = item.data.triggers.length;
-  item.data.triggers = item.data.triggers.filter(t => t.event !== '${event}');
-  removedCount = before - item.data.triggers.length;
-}
-
-if (app.triggerManager) {
-  app.triggerManager.unregisterEvent(item, '${event}');
-}
-
-app.historyManager.saveState();
-({ success: true, itemId: '${itemId}', event: '${event}', removedCount });
-`.trim();
-    }
-    /**
-     * Generate code for querying triggers
-     */
-    generateQueryTriggers(input) {
-        const validated = QueryTriggersInputSchema.parse(input);
-        const { itemId, event } = validated;
-        if (itemId) {
-            return `
-// Query triggers for ${itemId}
-const item = app.getItemById('${itemId}');
-if (!item) throw new Error('Item not found: ${itemId}');
-
-let triggers = item.data?.triggers || [];
-${event ? `triggers = triggers.filter(t => t.event === '${event}');` : ''}
-
-({ success: true, itemId: '${itemId}', triggers, count: triggers.length });
-`.trim();
-        }
-        return `
-// Query all triggers
-const allTriggers = [];
-const items = app.itemRegistry ? app.itemRegistry.getAll() : [];
-
-items.forEach(entry => {
-  const item = entry.item;
-  if (item.data?.triggers?.length > 0) {
-    let triggers = item.data.triggers;
-    ${event ? `triggers = triggers.filter(t => t.event === '${event}');` : ''}
-    triggers.forEach((trigger, idx) => {
-      allTriggers.push({
-        itemId: entry.id,
-        triggerId: idx,
-        ...trigger
-      });
-    });
-  }
-});
-
-({ success: true, triggers: allTriggers, count: allTriggers.length${event ? `, event: '${event}'` : ''} });
-`.trim();
-    }
-    // ===========================================================================
-    // QUIZ CODE GENERATORS
-    // ===========================================================================
-    /**
-     * Generate code for creating a quiz
-     */
-    generateCreateQuiz(input) {
-        const validated = CreateQuizInputSchema.parse(input);
-        const { title, questions, passingScore, showScore, allowRetry, shuffleQuestions, shuffleOptions } = validated;
-        const quizConfig = JSON.stringify({
-            title: title || 'Untitled Quiz',
-            questions,
-            passingScore: passingScore || 70,
-            showScore: showScore !== false,
-            allowRetry: allowRetry !== false,
-            shuffleQuestions: shuffleQuestions || false,
-            shuffleOptions: shuffleOptions || false,
-        }, null, 2);
-        return `
-// Create quiz
-const quizConfig = ${quizConfig};
-
-// Initialize quiz manager if needed
-if (!app.quizManager) {
-  app.quizManager = {
-    quizzes: [],
-    activeQuiz: null,
-    createQuiz: function(config) {
-      const quiz = {
-        id: 'quiz_' + Date.now(),
-        ...config,
-        state: {
-          currentQuestion: 0,
-          answers: [],
-          score: 0,
-          maxScore: config.questions.reduce((sum, q) => sum + q.points, 0),
-          complete: false
-        }
-      };
-      this.quizzes.push(quiz);
-      this.activeQuiz = quiz;
-      return quiz;
-    }
-  };
-}
-
-const quiz = app.quizManager.createQuiz(quizConfig);
-app.historyManager.saveState();
-
-({
-  success: true,
-  quizId: quiz.id,
-  title: quiz.title,
-  questionCount: quiz.questions.length,
-  maxScore: quiz.state.maxScore,
-  passingScore: quiz.passingScore
-});
-`.trim();
-    }
-    /**
-     * Generate code for getting quiz state
-     */
-    generateGetQuizState(input) {
-        const validated = GetQuizStateInputSchema.parse(input);
-        const { quizId } = validated;
-        const quizRef = quizId
-            ? `app.quizManager.quizzes.find(q => q.id === '${quizId}')`
-            : 'app.quizManager?.activeQuiz';
-        return `
-// Get quiz state
-if (!app.quizManager) {
-  return { success: false, error: 'No quiz manager initialized' };
-}
-
-const quiz = ${quizRef};
-if (!quiz) {
-  return { success: false, error: 'Quiz not found' };
-}
-
-({
-  success: true,
-  quizId: quiz.id,
-  title: quiz.title,
-  currentQuestion: quiz.state.currentQuestion,
-  totalQuestions: quiz.questions.length,
-  score: quiz.state.score,
-  maxScore: quiz.state.maxScore,
-  answers: quiz.state.answers,
-  complete: quiz.state.complete,
-  passed: quiz.state.complete ? (quiz.state.score / quiz.state.maxScore * 100) >= quiz.passingScore : null
-});
-`.trim();
-    }
-    /**
-     * Generate code for resetting a quiz
-     */
-    generateResetQuiz(input) {
-        const validated = ResetQuizInputSchema.parse(input);
-        const { quizId } = validated;
-        const quizRef = quizId
-            ? `app.quizManager.quizzes.find(q => q.id === '${quizId}')`
-            : 'app.quizManager?.activeQuiz';
-        return `
-// Reset quiz
-if (!app.quizManager) {
-  return { success: false, error: 'No quiz manager initialized' };
-}
-
-const quiz = ${quizRef};
-if (!quiz) {
-  return { success: false, error: 'Quiz not found' };
-}
-
-// Reset state
-quiz.state = {
-  currentQuestion: 0,
-  answers: [],
-  score: 0,
-  maxScore: quiz.questions.reduce((sum, q) => sum + q.points, 0),
-  complete: false
-};
-
-app.historyManager.saveState();
-
-({ success: true, quizId: quiz.id, reset: true });
 `.trim();
     }
     // ===========================================================================
@@ -2345,7 +2278,7 @@ app.historyManager.saveState();
         if (gradientDirection)
             options.gradientDirection = gradientDirection;
         return `
-// Create letter collage: "${text}"
+// Create letter collage
 (function() {
   const text = ${JSON.stringify(text)};
   const options = ${JSON.stringify(options, null, 2)};
@@ -2360,7 +2293,21 @@ app.historyManager.saveState();
     app.historyManager.saveState('create_letter_collage');
   }
 
-  return result;
+  // Return a SERIALIZABLE summary — never the raw result. result.group and
+  // result.letters are live Paper.js objects (circular parent/children refs,
+  // methods, canvas handles); the browser round-trip (page.evaluate / CDP
+  // return-by-value) can't serialize them, so returning result throws
+  // "Failed to execute code in browser" even though the collage was already
+  // created — a false negative. Surface registry ids instead.
+  const collageId = (result && (result.collageId
+    || (result.group && result.group.data && (result.group.data.id || result.group.data.registryId)))) || null;
+  const letterIds = (result && Array.isArray(result.letters))
+    ? result.letters.map(function(l){ return (l && l.data && (l.data.id || l.data.registryId)) || null; }).filter(Boolean)
+    : [];
+  if (!collageId) {
+    return { success: false, error: 'createLetterCollage returned no id', letterCount: letterIds.length, letterIds: letterIds };
+  }
+  return { success: true, collageId: collageId, itemId: collageId, letterCount: letterIds.length, letterIds: letterIds };
 })();
 `.trim();
     }
@@ -2390,80 +2337,6 @@ app.historyManager.saveState();
 
   return result;
 })();
-`.trim();
-    }
-    /**
-     * Generate code to get letter collage options
-     */
-    generateGetLetterCollageOptions() {
-        return `
-// Get letter collage options
-(function() {
-  if (!app.getLetterCollageOptions) {
-    // Return static options if function not available
-    return {
-      success: true,
-      styles: ['tile', 'magazine', 'paperCut', 'fold', 'gradient', 'image'],
-      tilePalettes: {
-        game: ['wordle', 'scrabble'],
-        vibrant: ['candy', 'neon', 'rainbow'],
-        soft: ['pastel', 'cotton'],
-        natural: ['earth', 'ocean', 'forest', 'sunset'],
-        professional: ['corporate', 'minimal', 'slate'],
-        seasonal: ['christmas', 'halloween', 'spring'],
-        magazine: ['magazine', 'newspaper', 'vintage'],
-        paperCraft: ['paperCraft', 'origami', 'craftPaper']
-      },
-      gradientPalettes: ['rainbow', 'sunset', 'ocean', 'fire', 'gold', 'rose', 'ice', 'cyberpunk', 'neonGlow', 'purplePink'],
-      gradientDirections: ['vertical', 'horizontal', 'diagonal', 'radial']
-    };
-  }
-
-  return app.getLetterCollageOptions();
-})();
-`.trim();
-    }
-    // ===========================================================================
-    // CANVAS PRESETS CODE GENERATORS
-    // ===========================================================================
-    /**
-     * Generate code to get canvas presets
-     */
-    generateGetCanvasPresets() {
-        return `
-// Get canvas presets
-(function() {
-  if (app.getCanvasPresets) {
-    return app.getCanvasPresets();
-  }
-
-  // Return static presets if function not available
-  return {
-    success: true,
-    presets: [
-      { key: 'youtube-thumbnail', name: 'YouTube Thumbnail', width: 1280, height: 720, aspectRatio: '16:9', category: 'video' },
-      { key: 'youtube-short', name: 'YouTube Shorts', width: 1080, height: 1920, aspectRatio: '9:16', category: 'video' },
-      { key: 'tiktok', name: 'TikTok', width: 1080, height: 1920, aspectRatio: '9:16', category: 'video' },
-      { key: 'instagram-story', name: 'Instagram Story', width: 1080, height: 1920, aspectRatio: '9:16', category: 'social' },
-      { key: 'instagram-post', name: 'Instagram Post (Square)', width: 1080, height: 1080, aspectRatio: '1:1', category: 'social' },
-      { key: 'instagram-landscape', name: 'Instagram Landscape', width: 1080, height: 566, aspectRatio: '1.91:1', category: 'social' },
-      { key: 'instagram-portrait', name: 'Instagram Portrait', width: 1080, height: 1350, aspectRatio: '4:5', category: 'social' },
-      { key: 'facebook-post', name: 'Facebook Post', width: 1200, height: 630, aspectRatio: '1.91:1', category: 'social' },
-      { key: 'facebook-cover', name: 'Facebook Cover', width: 820, height: 312, aspectRatio: '2.63:1', category: 'social' },
-      { key: 'facebook-story', name: 'Facebook Story', width: 1080, height: 1920, aspectRatio: '9:16', category: 'social' },
-      { key: 'twitter-post', name: 'Twitter/X Post', width: 1200, height: 675, aspectRatio: '16:9', category: 'social' },
-      { key: 'twitter-header', name: 'Twitter/X Header', width: 1500, height: 500, aspectRatio: '3:1', category: 'social' },
-      { key: 'linkedin-post', name: 'LinkedIn Post', width: 1200, height: 627, aspectRatio: '1.91:1', category: 'social' },
-      { key: 'linkedin-banner', name: 'LinkedIn Banner', width: 1584, height: 396, aspectRatio: '4:1', category: 'social' },
-      { key: 'pinterest-pin', name: 'Pinterest Pin', width: 1000, height: 1500, aspectRatio: '2:3', category: 'social' },
-      { key: 'presentation-16x9', name: 'Presentation 16:9', width: 1920, height: 1080, aspectRatio: '16:9', category: 'presentation' },
-      { key: 'presentation-4x3', name: 'Presentation 4:3', width: 1024, height: 768, aspectRatio: '4:3', category: 'presentation' },
-      { key: 'hd-720p', name: 'HD 720p', width: 1280, height: 720, aspectRatio: '16:9', category: 'video' },
-      { key: 'full-hd-1080p', name: 'Full HD 1080p', width: 1920, height: 1080, aspectRatio: '16:9', category: 'video' },
-      { key: 'default', name: 'Default', width: 800, height: 600, aspectRatio: '4:3', category: 'general' }
-    ]
-  };
-})();
 `.trim();
     }
     // ===========================================================================
@@ -3248,22 +3121,27 @@ app.historyManager.saveState();
         const optionsStr = validated.options ? JSON.stringify(validated.options) : '{}';
         const keyframesStr = validated.keyframes ? JSON.stringify(validated.keyframes) : 'null';
         const maskOptionsStr = validated.maskOptions ? JSON.stringify(validated.maskOptions) : '{}';
+        const preset = validated.preset || validated.maskType || 'wipeLeft';
+        // Per-preset options. Custom keyframes are an animated-mask extension —
+        // when supplied, fall through to maskingSystem.applyCustomMask instead.
         return `
 // Apply animated mask to ${validated.itemId}
 (function() {
-  if (!app.maskSystem) {
+  if (!app.applyAnimatedMask) {
     return { success: false, error: 'Mask system not available' };
   }
+  const item = app.getItemById('${validated.itemId}');
+  if (!item) return { success: false, error: 'Item not found: ${validated.itemId}' };
 
   try {
-    const result = app.maskSystem.applyAnimatedMask('${validated.itemId}', {
-      preset: ${validated.preset ? `'${validated.preset}'` : 'null'},
-      maskType: ${validated.maskType ? `'${validated.maskType}'` : 'null'},
-      keyframes: ${keyframesStr},
-      options: ${optionsStr},
-      maskOptions: ${maskOptionsStr}
-    });
-    return result;
+    const mergedOpts = Object.assign({}, ${optionsStr}, ${maskOptionsStr});
+    let maskedGroup;
+    if (${keyframesStr} && app.maskingSystem && app.maskingSystem.applyCustomMask) {
+      maskedGroup = app.maskingSystem.applyCustomMask(item, '${preset}', ${keyframesStr}, mergedOpts);
+    } else {
+      maskedGroup = app.applyAnimatedMask(item, '${preset}', mergedOpts);
+    }
+    return { success: !!maskedGroup, itemId: '${validated.itemId}', preset: '${preset}' };
   } catch (error) {
     return { success: false, error: error.message };
   }
@@ -3277,17 +3155,15 @@ app.historyManager.saveState();
         return `
 // Apply custom mask to ${validated.itemId}
 (function() {
-  if (!app.maskSystem) {
+  if (!app.maskingSystem || !app.maskingSystem.applyCustomMask) {
     return { success: false, error: 'Mask system not available' };
   }
+  const item = app.getItemById('${validated.itemId}');
+  if (!item) return { success: false, error: 'Item not found: ${validated.itemId}' };
 
   try {
-    const result = app.maskSystem.applyCustomMask('${validated.itemId}', {
-      maskType: '${validated.maskType}',
-      keyframes: ${keyframesStr},
-      maskOptions: ${maskOptionsStr}
-    });
-    return result;
+    const maskedGroup = app.maskingSystem.applyCustomMask(item, '${validated.maskType}', ${keyframesStr}, ${maskOptionsStr});
+    return { success: !!maskedGroup, itemId: '${validated.itemId}', maskType: '${validated.maskType}' };
   } catch (error) {
     return { success: false, error: error.message };
   }
@@ -3299,12 +3175,17 @@ app.historyManager.saveState();
         return `
 // Remove mask from ${validated.itemId}
 (function() {
-  if (!app.maskSystem) {
+  if (!app.removeMask) {
     return { success: false, error: 'Mask system not available' };
   }
+  // The item id may point at either the masked group OR the original item;
+  // app.removeMask expects the masked group, so resolve and walk up if needed.
+  const item = app.getItemById('${validated.itemId}');
+  if (!item) return { success: false, error: 'Item not found: ${validated.itemId}' };
+  const maskedGroup = (item.data && item.data.isMaskedGroup) ? item : (item.parent && item.parent.data && item.parent.data.isMaskedGroup ? item.parent : item);
 
   try {
-    const result = app.maskSystem.removeMask('${validated.itemId}');
+    app.removeMask(maskedGroup);
     return { success: true, itemId: '${validated.itemId}', message: 'Mask removed' };
   } catch (error) {
     return { success: false, error: error.message };
@@ -3398,10 +3279,12 @@ app.historyManager.saveState();
 })();
 `.trim();
     }
+    // =============================================================================
+    // TEMPLATE
+    // =============================================================================
     generateApplyTemplate(input) {
         const { templateId, category, listOnly } = input;
         if (listOnly || !templateId) {
-            // List mode: return available templates, optionally filtered by category
             const categoryFilter = category ? `'${category}'` : 'null';
             return `
 // List available templates
@@ -3427,7 +3310,6 @@ app.historyManager.saveState();
 })();
 `.trim();
         }
-        // Load mode: apply a specific template
         return `
 // Apply template: ${templateId}
 (async function() {
@@ -3703,7 +3585,7 @@ ${mask ? `    app.imageTools.applyMask(raster, '${mask}');\n` : ''}    const ite
 // Select all items
 (function() {
   app.selectAll();
-  const items = app.getSelection().map(i => i.data?.itemId || i.name || i.id);
+  const items = app.getSelectedItems().map(i => i.data?.itemId || i.name || i.id);
   return { success: true, action: 'select_all', count: items.length, items };
 })();`.trim();
             case 'deselect_all':
@@ -3717,7 +3599,7 @@ ${mask ? `    app.imageTools.applyMask(raster, '${mask}');\n` : ''}    const ite
                 return `
 // Get current selection
 (function() {
-  const items = app.getSelection().map(i => ({
+  const items = app.getSelectedItems().map(i => ({
     itemId: i.data?.itemId || i.name || i.id,
     type: i.data?.itemType || i.className,
     bounds: i.bounds ? { x: i.bounds.x, y: i.bounds.y, width: i.bounds.width, height: i.bounds.height } : null
@@ -3728,7 +3610,7 @@ ${mask ? `    app.imageTools.applyMask(raster, '${mask}');\n` : ''}    const ite
                 return `
 // Delete selected items
 (function() {
-  const selection = app.getSelection();
+  const selection = app.getSelectedItems();
   const deleted = selection.map(i => i.data?.itemId || i.name || i.id);
   app.deleteSelected();
   return { success: true, action: 'delete_selected', deleted, count: deleted.length };
@@ -3962,29 +3844,6 @@ ${mask ? `    app.imageTools.applyMask(raster, '${mask}');\n` : ''}    const ite
                 return `(function() { return { error: 'Unknown precomp action: ${input.action}' }; })();`;
         }
     }
-    generateView(input) {
-        switch (input.action) {
-            case 'fit': {
-                const mode = input.mode || 'content';
-                const padding = input.padding ?? 20;
-                return `
-// Fit view to ${mode}
-(function() {
-  app.fitView('${mode}', ${padding});
-  return { success: true, action: 'fit', mode: '${mode}', padding: ${padding} };
-})();`.trim();
-            }
-            case 'get_state':
-                return `
-// Get current view state
-(function() {
-  const state = app.getViewState();
-  return { success: true, action: 'get_state', ...state };
-})();`.trim();
-            default:
-                return `(function() { return { error: 'Unknown view action: ${input.action}' }; })();`;
-        }
-    }
     generateBackground(input) {
         switch (input.action) {
             case 'set': {
@@ -4028,8 +3887,9 @@ ${mask ? `    app.imageTools.applyMask(raster, '${mask}');\n` : ''}    const ite
                 return `
 // Get background info
 (function() {
-  const bg = app.getBackground();
-  return { success: true, action: 'get', ...bg };
+  // FxTool exposes getBackgroundMode() returning the mode string only.
+  const mode = app.getBackgroundMode ? app.getBackgroundMode() : null;
+  return { success: true, action: 'get', mode };
 })();`.trim();
             default:
                 return `(function() { return { error: 'Unknown background action: ${input.action}' }; })();`;
@@ -4094,6 +3954,541 @@ ${mask ? `    app.imageTools.applyMask(raster, '${mask}');\n` : ''}    const ite
                 return `(function() { return { error: 'Unknown query action: ${input.action}' }; })();`;
         }
     }
+    // ===========================================================================
+    // DEFORMATION
+    // ===========================================================================
+    generateDeform(input) {
+        const guard = `if (!app.deformPresets) return { error: 'DeformPresets not available' };`;
+        switch (input.action) {
+            case 'apply': {
+                if (!input.itemId)
+                    return `(function() { return { error: 'itemId is required for deform apply' }; })();`;
+                if (!input.preset)
+                    return `(function() { return { error: 'preset is required for deform apply' }; })();`;
+                const params = {};
+                if (input.frequency !== undefined)
+                    params.frequency = input.frequency;
+                if (input.amplitude !== undefined)
+                    params.amplitude = input.amplitude;
+                if (input.phase)
+                    params.phase = input.phase;
+                if (input.loop !== undefined)
+                    params.loop = input.loop;
+                if (input.axis)
+                    params.axis = input.axis;
+                if (input.turns !== undefined)
+                    params.turns = input.turns;
+                if (input.waves !== undefined)
+                    params.waves = input.waves;
+                if (input.maxDisplacement !== undefined)
+                    params.maxDisplacement = input.maxDisplacement;
+                if (input.speed !== undefined)
+                    params.speed = input.speed;
+                if (input.steps !== undefined)
+                    params.steps = input.steps;
+                const itemIdStr = JSON.stringify(input.itemId);
+                return `
+// Apply deformation preset
+(function() {
+  ${guard}
+  const entry = app.itemRegistry.get(${itemIdStr});
+  if (!entry || !entry.item) return { error: 'Item not found: ' + ${itemIdStr} };
+  app.deformPresets.apply(entry.item, '${input.preset}', ${JSON.stringify(params)});
+  return { success: true, action: 'apply', itemId: ${itemIdStr}, preset: '${input.preset}' };
+})();`.trim();
+            }
+            case 'trigger': {
+                if (!input.itemId)
+                    return `(function() { return { error: 'itemId is required for deform trigger' }; })();`;
+                if (!input.preset)
+                    return `(function() { return { error: 'preset is required for deform trigger' }; })();`;
+                const params = {};
+                if (input.amplitude !== undefined)
+                    params.amplitude = input.amplitude;
+                if (input.speed !== undefined)
+                    params.speed = input.speed;
+                const itemIdStr = JSON.stringify(input.itemId);
+                return `
+// Trigger one-shot deformation
+(function() {
+  ${guard}
+  const entry = app.itemRegistry.get(${itemIdStr});
+  if (!entry || !entry.item) return { error: 'Item not found: ' + ${itemIdStr} };
+  app.deformPresets.trigger(entry.item, '${input.preset}', ${JSON.stringify(params)});
+  return { success: true, action: 'trigger', itemId: ${itemIdStr}, preset: '${input.preset}' };
+})();`.trim();
+            }
+            case 'remove': {
+                if (!input.itemId)
+                    return `(function() { return { error: 'itemId is required for deform remove' }; })();`;
+                const itemIdStr = JSON.stringify(input.itemId);
+                return `
+// Remove deformation and restore geometry
+(function() {
+  ${guard}
+  const entry = app.itemRegistry.get(${itemIdStr});
+  if (!entry || !entry.item) return { error: 'Item not found: ' + ${itemIdStr} };
+  app.deformPresets.remove(entry.item);
+  return { success: true, action: 'remove', itemId: ${itemIdStr} };
+})();`.trim();
+            }
+            default:
+                return `(function() { return { error: 'Unknown deform action: ${input.action}' }; })();`;
+        }
+    }
+    // ===========================================================================
+    // SPRITE SHEETS
+    // ===========================================================================
+    generateSpriteSheet(input) {
+        const guard = `if (!app.spriteSheetSystem) return { error: 'SpriteSheetSystem not available' };`;
+        switch (input.action) {
+            case 'generate': {
+                const opts = {};
+                if (input.poses)
+                    opts.poses = input.poses;
+                if (input.transition)
+                    opts.transition = input.transition;
+                if (input.bakedAnimation)
+                    opts.bakedAnimation = input.bakedAnimation;
+                if (input.animations)
+                    opts.animations = input.animations;
+                if (input.padding !== undefined)
+                    opts.padding = input.padding;
+                if (input.name)
+                    opts.name = input.name;
+                return `
+// Generate sprite sheet from skeleton
+(async function() {
+  ${guard}
+  const sheet = await app.spriteSheetSystem.generateSpriteSheet(${JSON.stringify(input.skeletonId || '')}, ${JSON.stringify(opts)});
+  return { success: true, action: 'generate', spriteSheetId: sheet.id, name: sheet.name, width: sheet.atlasWidth, height: sheet.atlasHeight, frameCount: sheet.frames?.size ?? sheet.frames?.length ?? 0 };
+})();`.trim();
+            }
+            case 'play': {
+                const opts = {};
+                if (input.x !== undefined)
+                    opts.x = input.x;
+                if (input.y !== undefined)
+                    opts.y = input.y;
+                if (input.animation)
+                    opts.animation = input.animation;
+                if (input.fps !== undefined)
+                    opts.fps = input.fps;
+                if (input.scale !== undefined)
+                    opts.scale = input.scale;
+                return `
+// Play sprite sheet animation
+(async function() {
+  ${guard}
+  const player = await app.spriteSheetSystem.playSpriteSheet(${JSON.stringify(input.spriteSheetId || '')}, ${JSON.stringify(opts)});
+  return { success: true, action: 'play', playerId: player.id };
+})();`.trim();
+            }
+            case 'export':
+                return `
+// Export sprite sheet
+(async function() {
+  ${guard}
+  const result = await app.spriteSheetSystem.exportSpriteSheet(${JSON.stringify(input.spriteSheetId || '')}, { format: '${input.format || 'png'}', download: true, includeMetadata: true });
+  return { success: true, action: 'export', format: '${input.format || 'png'}' };
+})();`.trim();
+            default:
+                return `(function() { return { error: 'Unknown sprite sheet action: ${input.action}' }; })();`;
+        }
+    }
+    // ===========================================================================
+    // INTERACTION
+    // ===========================================================================
+    generateInteraction(input) {
+        const guard = `if (!app.interactionSystem) return { error: 'InteractionSystem not available' };`;
+        switch (input.action) {
+            case 'add_behavior': {
+                const itemIdStr = JSON.stringify(input.itemId || '');
+                const params = JSON.stringify(input.params || {});
+                return `
+// Add behavior to item
+(function() {
+  ${guard}
+  const entry = app.itemRegistry.get(${itemIdStr});
+  if (!entry || !entry.item) return { error: 'Item not found: ' + ${itemIdStr} };
+  const behaviorId = app.interactionSystem.addContinuousBehavior(entry.item, '${input.behaviorType}', ${params});
+  return { success: true, action: 'add_behavior', itemId: ${itemIdStr}, behaviorType: '${input.behaviorType}', behaviorId };
+})();`.trim();
+            }
+            case 'remove_behavior': {
+                const itemIdStr = JSON.stringify(input.itemId || '');
+                const behaviorIdStr = JSON.stringify(input.behaviorId || '');
+                return `
+// Remove behavior from item
+(function() {
+  ${guard}
+  const entry = app.itemRegistry.get(${itemIdStr});
+  if (!entry || !entry.item) return { error: 'Item not found: ' + ${itemIdStr} };
+  app.interactionSystem.removeContinuousBehavior(entry.item, ${behaviorIdStr});
+  return { success: true, action: 'remove_behavior', itemId: ${itemIdStr}, behaviorId: ${behaviorIdStr} };
+})();`.trim();
+            }
+            case 'trigger_action': {
+                const params = JSON.stringify(input.params || {});
+                return `
+// Trigger interaction action
+(function() {
+  ${guard}
+  app.interactionSystem.triggerAction('${input.actionType}', ${params});
+  return { success: true, action: 'trigger_action', actionType: '${input.actionType}' };
+})();`.trim();
+            }
+            case 'get_state':
+                return `
+// Get interaction state
+(function() {
+  ${guard}
+  const state = app.interactionSystem.getState ? app.interactionSystem.getState() : {};
+  return { success: true, action: 'get_state', ...state };
+})();`.trim();
+            default:
+                return `(function() { return { error: 'Unknown interaction action: ${input.action}' }; })();`;
+        }
+    }
+    // ===========================================================================
+    // WIDGET EXPORT
+    // ===========================================================================
+    generateExportWidget(input) {
+        const opts = {};
+        if (input.download !== undefined)
+            opts.download = input.download;
+        if (input.filename)
+            opts.filename = input.filename;
+        if (input.includeInteractions !== undefined)
+            opts.includeInteractions = input.includeInteractions;
+        if (input.minify !== undefined)
+            opts.minify = input.minify;
+        return `
+// Export widget (pp:PinePaper ontology JSON)
+(async function() {
+  if (!app.exportEngine || !app.exportEngine.exportWidget) return { error: 'Widget export not available' };
+  const result = await app.exportEngine.exportWidget(${JSON.stringify(opts)});
+  return { success: true, json: result.json, filename: result.filename, embedCode: result.embedCode, metadata: result.data?.metadata };
+})();`.trim();
+    }
+    generateExportWidgetHtml(input) {
+        const opts = {};
+        if (input.title)
+            opts.title = input.title;
+        if (input.download !== undefined)
+            opts.download = input.download;
+        return `
+// Export widget as self-contained HTML
+(async function() {
+  if (!app.exportEngine || !app.exportEngine.exportWidgetHTML) return { error: 'Widget HTML export not available' };
+  const result = await app.exportEngine.exportWidgetHTML(${JSON.stringify(opts)});
+  return { success: true, html: result.html, estimatedSize: result.estimatedSize, analysis: { itemTypes: [...result.analysis.itemTypes], relationTypes: [...result.analysis.relationTypes], hasSimpleAnimations: result.analysis.hasSimpleAnimations, hasKeyframeAnimations: result.analysis.hasKeyframeAnimations, hasMasks: result.analysis.hasMasks } };
+})();`.trim();
+    }
+    // ===========================================================================
+    // DATA VISUALIZATION (CHARTS)
+    // ===========================================================================
+    generateChart(input) {
+        const guard = `if (!app.chartSystem) return { error: 'ChartSystem not available' };`;
+        switch (input.action) {
+            case 'create': {
+                if (!input.chartType)
+                    return `(function() { return { error: 'chartType is required for create' }; })();`;
+                if (!input.data)
+                    return `(function() { return { error: 'data is required for create' }; })();`;
+                const dataStr = JSON.stringify(input.data);
+                const optsStr = JSON.stringify(input.options || {});
+                return `
+// Create chart
+(function() {
+  ${guard}
+  const group = app.createChart(${JSON.stringify(input.chartType)}, ${dataStr}, ${optsStr});
+  if (!group) return { error: 'Failed to create chart' };
+  const chartId = app.chartSystem.getLastChartId();
+  return { success: true, action: 'create', chartType: ${JSON.stringify(input.chartType)}, chartId, dataPoints: ${input.data.length} };
+})();`.trim();
+            }
+            case 'update': {
+                if (!input.chartId)
+                    return `(function() { return { error: 'chartId is required for update' }; })();`;
+                const chartIdStr = JSON.stringify(input.chartId);
+                const dataStr = JSON.stringify(input.data || []);
+                const optsStr = JSON.stringify(input.options || {});
+                return `
+// Update chart data
+(function() {
+  ${guard}
+  const chart = app.chartSystem.getChart(${chartIdStr});
+  if (!chart) return { error: 'Chart not found: ' + ${chartIdStr} };
+  app.chartSystem.update(${chartIdStr}, ${dataStr}, ${optsStr});
+  return { success: true, action: 'update', chartId: ${chartIdStr} };
+})();`.trim();
+            }
+            case 'reconfigure': {
+                if (!input.chartId)
+                    return `(function() { return { error: 'chartId is required for reconfigure' }; })();`;
+                const chartIdStr = JSON.stringify(input.chartId);
+                const optsStr = JSON.stringify(input.options || {});
+                return `
+// Reconfigure chart styling
+(function() {
+  ${guard}
+  const chart = app.chartSystem.getChart(${chartIdStr});
+  if (!chart) return { error: 'Chart not found: ' + ${chartIdStr} };
+  app.chartSystem.reconfigure(${chartIdStr}, ${optsStr});
+  return { success: true, action: 'reconfigure', chartId: ${chartIdStr} };
+})();`.trim();
+            }
+            case 'remove': {
+                if (!input.chartId)
+                    return `(function() { return { error: 'chartId is required for remove' }; })();`;
+                const chartIdStr = JSON.stringify(input.chartId);
+                return `
+// Remove chart
+(function() {
+  ${guard}
+  app.chartSystem.remove(${chartIdStr});
+  return { success: true, action: 'remove', chartId: ${chartIdStr} };
+})();`.trim();
+            }
+            default:
+                return `(function() { return { error: 'Unknown chart action: ${input.action}' }; })();`;
+        }
+    }
+    // ===========================================================================
+    // MAGIC SYSTEM
+    // ===========================================================================
+    generateMagic(input) {
+        const guard = `if (!app.magicSystem) return { error: 'MagicSystem not available' };`;
+        switch (input.action) {
+            case 'animate': {
+                const opts = {};
+                if (input.mood)
+                    opts.energy = input.mood;
+                if (input.selectionOnly !== undefined)
+                    opts.selectionOnly = input.selectionOnly;
+                return `
+// Magic auto-animate
+(async function() {
+  ${guard}
+  const result = await app.magicSystem.autoAnimate(${JSON.stringify(opts)});
+  return { success: true, action: 'animate', itemsAnimated: result.count, mood: result.energy, type: result.type };
+})();`.trim();
+            }
+            case 'remix': {
+                const opts = {};
+                if (input.selectionOnly !== undefined)
+                    opts.selectionOnly = input.selectionOnly;
+                return `
+// Magic style remix
+(async function() {
+  ${guard}
+  const result = await app.magicSystem.remixStyle(${JSON.stringify(opts)});
+  return { success: true, action: 'remix', itemsRemixed: result.count, palette: result.palette };
+})();`.trim();
+            }
+            default:
+                return `(function() { return { error: 'Unknown magic action: ${input.action}' }; })();`;
+        }
+    }
+    // ===========================================================================
+    // PHYSICS (RIGID BODY SIMULATION)
+    // ===========================================================================
+    generatePhysics(input) {
+        const guard = `if (!app.physicsWorld) return { error: 'PhysicsWorld not available' };`;
+        switch (input.action) {
+            case 'init': {
+                const gravity = JSON.stringify(input.gravity || { x: 0, y: 980 });
+                return `
+// Initialize physics world
+(function() {
+  ${guard}
+  app.physicsWorld.init({ gravity: ${gravity} });
+  return { success: true, action: 'init', gravity: ${gravity} };
+})();`.trim();
+            }
+            case 'add_body': {
+                if (!input.itemId)
+                    return `(function() { return { error: 'itemId is required for add_body' }; })();`;
+                const itemIdStr = JSON.stringify(input.itemId);
+                const config = {};
+                if (input.bodyType)
+                    config.type = input.bodyType;
+                if (input.mass !== undefined)
+                    config.mass = input.mass;
+                if (input.friction !== undefined)
+                    config.friction = input.friction;
+                if (input.restitution !== undefined)
+                    config.restitution = input.restitution;
+                if (input.fixedRotation !== undefined)
+                    config.fixedRotation = input.fixedRotation;
+                if (input.shape)
+                    config.shape = input.shape;
+                return `
+// Add physics body
+(function() {
+  ${guard}
+  const entry = app.itemRegistry.get(${itemIdStr});
+  if (!entry || !entry.item) return { error: 'Item not found: ' + ${itemIdStr} };
+  const ok = app.physicsWorld.addBody(${itemIdStr}, ${JSON.stringify(config)});
+  return { success: ok, action: 'add_body', itemId: ${itemIdStr}, bodyType: ${JSON.stringify(input.bodyType || 'dynamic')} };
+})();`.trim();
+            }
+            case 'remove_body': {
+                if (!input.itemId)
+                    return `(function() { return { error: 'itemId is required for remove_body' }; })();`;
+                const itemIdStr = JSON.stringify(input.itemId);
+                return `
+// Remove physics body
+(function() {
+  ${guard}
+  app.physicsWorld.removeBody(${itemIdStr});
+  return { success: true, action: 'remove_body', itemId: ${itemIdStr} };
+})();`.trim();
+            }
+            case 'apply_force': {
+                if (!input.itemId)
+                    return `(function() { return { error: 'itemId is required for apply_force' }; })();`;
+                if (!input.force)
+                    return `(function() { return { error: 'force is required for apply_force' }; })();`;
+                const itemIdStr = JSON.stringify(input.itemId);
+                return `
+// Apply continuous force
+(function() {
+  ${guard}
+  app.physicsWorld.applyForce(${itemIdStr}, ${JSON.stringify(input.force)});
+  return { success: true, action: 'apply_force', itemId: ${itemIdStr}, force: ${JSON.stringify(input.force)} };
+})();`.trim();
+            }
+            case 'apply_impulse': {
+                if (!input.itemId)
+                    return `(function() { return { error: 'itemId is required for apply_impulse' }; })();`;
+                if (!input.impulse)
+                    return `(function() { return { error: 'impulse is required for apply_impulse' }; })();`;
+                const itemIdStr = JSON.stringify(input.itemId);
+                return `
+// Apply instant impulse
+(function() {
+  ${guard}
+  app.physicsWorld.applyImpulse(${itemIdStr}, ${JSON.stringify(input.impulse)});
+  return { success: true, action: 'apply_impulse', itemId: ${itemIdStr}, impulse: ${JSON.stringify(input.impulse)} };
+})();`.trim();
+            }
+            case 'set_velocity': {
+                if (!input.itemId)
+                    return `(function() { return { error: 'itemId is required for set_velocity' }; })();`;
+                if (!input.velocity)
+                    return `(function() { return { error: 'velocity is required for set_velocity' }; })();`;
+                const itemIdStr = JSON.stringify(input.itemId);
+                return `
+// Set body velocity
+(function() {
+  ${guard}
+  app.physicsWorld.setVelocity(${itemIdStr}, ${JSON.stringify(input.velocity)});
+  return { success: true, action: 'set_velocity', itemId: ${itemIdStr}, velocity: ${JSON.stringify(input.velocity)} };
+})();`.trim();
+            }
+            case 'get_state': {
+                if (!input.itemId)
+                    return `(function() { return { error: 'itemId is required for get_state' }; })();`;
+                const itemIdStr = JSON.stringify(input.itemId);
+                return `
+// Get physics body state
+(function() {
+  ${guard}
+  const state = app.physicsWorld.getBodyState(${itemIdStr});
+  if (!state) return { error: 'No physics body for item: ' + ${itemIdStr} };
+  return { success: true, action: 'get_state', itemId: ${itemIdStr}, ...state };
+})();`.trim();
+            }
+            case 'create_ground': {
+                const y = input.y !== undefined ? input.y : 500;
+                const w = input.width !== undefined ? input.width : 2000;
+                return `
+// Create ground plane
+(function() {
+  ${guard}
+  const groundId = app.physicsWorld.createGround(${y}, ${w});
+  return { success: true, action: 'create_ground', groundId, y: ${y}, width: ${w} };
+})();`.trim();
+            }
+            case 'create_joint': {
+                if (!input.itemId)
+                    return `(function() { return { error: 'itemId is required for create_joint' }; })();`;
+                if (!input.targetItemId)
+                    return `(function() { return { error: 'targetItemId is required for create_joint' }; })();`;
+                if (!input.jointType)
+                    return `(function() { return { error: 'jointType is required for create_joint' }; })();`;
+                const itemIdStr = JSON.stringify(input.itemId);
+                const targetStr = JSON.stringify(input.targetItemId);
+                const params = JSON.stringify({ type: input.jointType, ...(input.jointParams || {}) });
+                return `
+// Create physics joint
+(function() {
+  ${guard}
+  const joint = app.physicsWorld.createJoint(${itemIdStr}, ${targetStr}, ${params});
+  if (!joint) return { error: 'Failed to create joint between ' + ${itemIdStr} + ' and ' + ${targetStr} };
+  return { success: true, action: 'create_joint', itemId: ${itemIdStr}, targetItemId: ${targetStr}, jointType: ${JSON.stringify(input.jointType)} };
+})();`.trim();
+            }
+            default:
+                return `(function() { return { error: 'Unknown physics action: ${input.action}' }; })();`;
+        }
+    }
+    // ===========================================================================
+    // MEASUREMENT SYSTEM
+    // ===========================================================================
+    generateMeasurement(input) {
+        const guard = `if (!app.measurementSystem) return { error: 'MeasurementSystem not available' };`;
+        switch (input.action) {
+            case 'set_rulers': {
+                const enabled = input.enabled !== false;
+                return `
+// Toggle rulers
+(function() {
+  ${guard}
+  app.measurementSystem.setRulersVisible(${enabled});
+  return { success: true, action: 'set_rulers', enabled: ${enabled} };
+})();`.trim();
+            }
+            case 'set_grid': {
+                const enabled = input.enabled !== false;
+                return `
+// Toggle grid
+(function() {
+  ${guard}
+  app.measurementSystem.setGridVisible(${enabled});
+  return { success: true, action: 'set_grid', enabled: ${enabled} };
+})();`.trim();
+            }
+            // No measurementSystem guard — reads from itemRegistry directly
+            case 'get_dimensions': {
+                if (!input.itemId)
+                    return `(function() { return { error: 'itemId is required for get_dimensions' }; })();`;
+                const itemIdStr = JSON.stringify(input.itemId);
+                return `
+// Get item dimensions
+(function() {
+  const entry = app.itemRegistry.get(${itemIdStr});
+  if (!entry || !entry.item) return { error: 'Item not found: ' + ${itemIdStr} };
+  const b = entry.item.bounds;
+  return { success: true, action: 'get_dimensions', itemId: ${itemIdStr}, x: b.x, y: b.y, width: b.width, height: b.height, rotation: entry.item.rotation || 0 };
+})();`.trim();
+            }
+            case 'set_snap': {
+                const enabled = input.enabled !== false;
+                return `
+// Toggle snap to grid
+(function() {
+  ${guard}
+  app.measurementSystem.setSnapToUnitEnabled(${enabled});
+  return { success: true, action: 'set_snap', enabled: ${enabled} };
+})();`.trim();
+            }
+            default:
+                return `(function() { return { error: 'Unknown measurement action: ${input.action}' }; })();`;
+        }
+    }
 }
 // Export singleton instance
 export const codeGenerator = new PinePaperCodeGenerator();