@efectoapp/mcp-server 0.1.23 → 0.1.26

package/dist/tools/state.js

@@ -14,13 +14,9 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stateTools = void 0;
-exports.ensurePoster = ensurePoster;
 exports.resetState = resetState;
 exports.getCurrentState = getCurrentState;
 exports.handleStateTool = handleStateTool;
-const os_1 = require("os");
-const fs_1 = require("fs");
-const path_1 = require("path");
 // Helper to clamp values to valid ranges
 function clamp(value, min, max, fallback) {
     const v = value ?? fallback;
@@ -124,6 +120,24 @@ function parseNormalizedFrameDimension(input) {
         return undefined;
     return clamp(value, 0.01, 2, value);
 }
+/**
+ * Auto-fit font size so the longest word fits on one line within frameWidthPx.
+ * Uses a conservative 0.72 average-char-width factor (bold uppercase in DM Sans
+ * averages ~0.68–0.72 of fontSize). The +0.5 accounts for text padding
+ * (TEXT_PADDING_FACTOR * 2 = 0.25 * 2).
+ */
+function autoFitFontSize(content, fontSize, letterSpacing, frameWidthPx) {
+    const words = content.split(/\s+/);
+    const longestWord = words.reduce((a, b) => Array.from(a).length >= Array.from(b).length ? a : b, '');
+    const charCount = Array.from(longestWord).length;
+    if (charCount === 0)
+        return fontSize;
+    const spacingPx = Math.max(0, charCount - 1) * Math.abs(letterSpacing);
+    const maxFontSize = (frameWidthPx - spacingPx) / (0.72 * charCount + 0.5);
+    if (fontSize <= maxFontSize)
+        return fontSize;
+    return Math.max(12, Math.floor(maxFontSize));
+}
 function textNormalizedToPx(normalized, artboardAspect, axis) {
     if (axis === 'height') {
         return normalized / TEXT_WORLD_SCALE_FACTOR;
@@ -399,75 +413,9 @@ function normalizeFontFamily(input) {
 }
 // Current poster state (single poster for now)
 let currentPoster = null;
-// --- File-based state persistence ---
-// Some MCP clients spawn a fresh process per tool call, losing in-memory state.
-// We persist to a temp file so state survives process restarts.
-const STATE_FILE_PATH = (0, path_1.join)((0, os_1.tmpdir)(), 'efecto-mcp-state.json');
-const STATE_MAX_AGE_MS = 60 * 60 * 1000; // 1 hour
-/** Write current poster state to the temp file (best-effort). */
-function persistState() {
-    if (!currentPoster)
-        return;
-    try {
-        const payload = JSON.stringify({ timestamp: Date.now(), state: currentPoster });
-        (0, fs_1.writeFileSync)(STATE_FILE_PATH, payload, 'utf-8');
-    }
-    catch {
-        // Silently ignore — falls back to in-memory only
-    }
-}
-/** Load persisted state from the temp file if valid and not stale. */
-function loadPersistedState() {
-    try {
-        const raw = (0, fs_1.readFileSync)(STATE_FILE_PATH, 'utf-8');
-        const parsed = JSON.parse(raw);
-        if (!parsed.state || !parsed.timestamp)
-            return null;
-        if (Date.now() - parsed.timestamp > STATE_MAX_AGE_MS)
-            return null;
-        return parsed.state;
-    }
-    catch {
-        return null;
-    }
-}
-/**
- * Ensure a poster exists. Restores from persisted file if needed,
- * or auto-creates a default poster as a last resort.
- */
-function ensurePoster() {
-    if (currentPoster)
-        return currentPoster;
-    // Try restoring from persisted state
-    const persisted = loadPersistedState();
-    if (persisted) {
-        currentPoster = persisted;
-        return currentPoster;
-    }
-    // Auto-create a default poster (same defaults as create_poster)
-    currentPoster = {
-        canvas: {
-            aspectRatio: '9:16',
-            backgroundColor: '#1a1a1a',
-            layoutMode: 'column',
-            alignItems: 'center',
-            justifyContent: 'start',
-            gap: 0.04,
-            padding: { top: 0.08, right: 0.08, bottom: 0.08, left: 0.08 },
-        },
-        layers: [createDefaultBackgroundLayer('#1a1a1a')],
-        postProcesses: [],
-    };
-    persistState();
-    return currentPoster;
-}
 // Reset state (useful for testing)
 function resetState() {
     currentPoster = null;
-    try {
-        (0, fs_1.unlinkSync)(STATE_FILE_PATH);
-    }
-    catch { /* ignore */ }
 }
 // Get current state
 function getCurrentState() {
@@ -800,113 +748,6 @@ function parseGradientStopsInput(input, fallbackStops) {
         .filter((stop) => stop !== null);
     return parsed.length >= MIN_GRADIENT_STOPS ? parsed : null;
 }
-/**
- * Build a Fill object from flat MCP tool params (fillType, gradientStops, etc.).
- * Returns null when no gradient params are present (caller should fall back to solid).
- */
-function buildFillFromParams(params) {
-    const fillType = params.fillType;
-    const hasGradientParams = fillType === 'linear' || fillType === 'radial' ||
-        params.gradientStyle !== undefined ||
-        params.gradientStops !== undefined ||
-        params.gradientStartColor !== undefined ||
-        params.gradientEndColor !== undefined;
-    if (!hasGradientParams)
-        return null;
-    const gradientStyle = fillType === 'radial' || params.gradientStyle === 'radial' ? 'radial' : 'linear';
-    const defaults = gradientStyle === 'radial'
-        ? DEFAULT_RADIAL_GRADIENT_FILL
-        : DEFAULT_LINEAR_GRADIENT_FILL;
-    const explicitStops = parseGradientStopsInput(params.gradientStops, defaults.stops);
-    const stops = explicitStops ?? [
-        {
-            color: params.gradientStartColor || defaults.stops[0].color,
-            opacity: defaults.stops[0].opacity,
-            position: defaults.stops[0].position,
-        },
-        {
-            color: params.gradientEndColor || defaults.stops[1].color,
-            opacity: defaults.stops[1].opacity,
-            position: defaults.stops[1].position,
-        },
-    ];
-    if (gradientStyle === 'radial') {
-        return normalizeRadialGradientFill({
-            type: 'radial',
-            center: {
-                x: Number.isFinite(params.gradientCenterX)
-                    ? params.gradientCenterX
-                    : DEFAULT_RADIAL_GRADIENT_FILL.center.x,
-                y: Number.isFinite(params.gradientCenterY)
-                    ? params.gradientCenterY
-                    : DEFAULT_RADIAL_GRADIENT_FILL.center.y,
-            },
-            radius: Number.isFinite(params.gradientRadius)
-                ? params.gradientRadius
-                : DEFAULT_RADIAL_GRADIENT_FILL.radius,
-            stops,
-        });
-    }
-    return normalizeLinearGradientFill({
-        type: 'linear',
-        angle: Number.isFinite(params.gradientAngle)
-            ? params.gradientAngle
-            : DEFAULT_LINEAR_GRADIENT_FILL.angle,
-        stops,
-    });
-}
-/** Reusable schema properties for gradient fill params — spread into tool schemas. */
-const GRADIENT_FILL_SCHEMA_PROPS = {
-    fillType: {
-        type: 'string',
-        enum: ['solid', 'linear', 'radial'],
-        description: 'Fill type: "solid" (default), "linear" gradient, or "radial" gradient',
-    },
-    gradientStops: {
-        type: 'array',
-        description: 'Gradient color stops (2-8). Overrides start/end colors when provided.',
-        items: {
-            type: 'object',
-            properties: {
-                color: { type: 'string', description: 'Stop color in hex' },
-                opacity: { type: 'number', description: 'Stop opacity (0-1)' },
-                position: { type: 'number', description: 'Stop position (0-1)' },
-            },
-            required: ['color', 'position'],
-        },
-        minItems: 2,
-        maxItems: 8,
-    },
-    gradientAngle: {
-        type: 'number',
-        description: 'Linear gradient angle in degrees (default 135)',
-    },
-    gradientStartColor: {
-        type: 'string',
-        description: 'Gradient start color in hex (shortcut for 2-stop gradient)',
-    },
-    gradientEndColor: {
-        type: 'string',
-        description: 'Gradient end color in hex (shortcut for 2-stop gradient)',
-    },
-    gradientStyle: {
-        type: 'string',
-        enum: ['linear', 'radial'],
-        description: 'Gradient style (alternative to fillType for setting gradient type)',
-    },
-    gradientCenterX: {
-        type: 'number',
-        description: 'Radial gradient center X (0-1)',
-    },
-    gradientCenterY: {
-        type: 'number',
-        description: 'Radial gradient center Y (0-1)',
-    },
-    gradientRadius: {
-        type: 'number',
-        description: 'Radial gradient radius (0.05-2)',
-    },
-};
 // Tool definitions
 exports.stateTools = [
     {
@@ -1115,7 +956,6 @@ exports.stateTools = [
                 // Shape style properties (rectangle/ellipse/polygon/star/line)
                 fillColor: { type: 'string', description: 'Shape fill color in hex (e.g. #ffffff)' },
                 fillOpacity: { type: 'number', description: 'Shape fill opacity (0-1)' },
-                ...GRADIENT_FILL_SCHEMA_PROPS,
                 strokeColor: { type: 'string', description: 'Shape stroke color in hex' },
                 strokeWidth: { type: 'number', description: 'Shape stroke width (normalized; e.g. 0.005-0.02)' },
                 strokeOpacity: { type: 'number', description: 'Shape stroke opacity (0-1)' },
@@ -1324,7 +1164,6 @@ exports.stateTools = [
                             // Shape style
                             fillColor: { type: 'string', description: 'Shape fill color (hex)' },
                             fillOpacity: { type: 'number', description: 'Shape fill opacity (0-1)' },
-                            ...GRADIENT_FILL_SCHEMA_PROPS,
                             strokeColor: { type: 'string', description: 'Shape stroke color (hex)' },
                             strokeWidth: { type: 'number', description: 'Shape stroke width (normalized; e.g. 0.005-0.02)' },
                             strokeOpacity: { type: 'number', description: 'Shape stroke opacity (0-1)' },
@@ -1496,7 +1335,6 @@ exports.stateTools = [
                 paddingLeft: { type: 'number', description: 'Padding left as % of canvas' },
                 fillColor: { type: 'string', description: 'Fill color (group background OR shape fill)' },
                 fillOpacity: { type: 'number', description: 'Fill opacity (group background OR shape fill)' },
-                ...GRADIENT_FILL_SCHEMA_PROPS,
                 cornerRadius: { type: 'number', description: 'Corner radius (group OR shape)' },
                 // Shadow properties (all layer types)
                 shadowOffsetX: { type: 'number', description: 'Shadow horizontal offset in CSS px' },
@@ -1769,7 +1607,6 @@ async function handleStateTool(name, args) {
                 layers: [createDefaultBackgroundLayer(backgroundColor)],
                 postProcesses: [],
             };
-            persistState();
             return {
                 content: [
                     {
@@ -1785,7 +1622,11 @@ async function handleStateTool(name, args) {
             };
         }
         case 'clear_poster': {
-            ensurePoster();
+            if (!currentPoster) {
+                return {
+                    content: [{ type: 'text', text: 'Error: No poster created. Use create_poster first.' }],
+                };
+            }
             const bgLayer = currentPoster.layers.find((l) => l.type === 'background');
             const defaultBg = createDefaultBackgroundLayer(currentPoster.canvas.backgroundColor || '#1a1a1a');
             currentPoster = {
@@ -1793,7 +1634,6 @@ async function handleStateTool(name, args) {
                 layers: bgLayer ? [bgLayer] : [defaultBg],
                 postProcesses: [],
             };
-            persistState();
             return {
                 content: [{
                         type: 'text',
@@ -1805,7 +1645,11 @@ async function handleStateTool(name, args) {
             };
         }
         case 'set_page_layout': {
-            ensurePoster();
+            if (!currentPoster) {
+                return {
+                    content: [{ type: 'text', text: 'Error: No poster created. Use create_poster first.' }],
+                };
+            }
             const layoutMode = params.layoutMode;
             if (layoutMode !== undefined) {
                 if (layoutMode !== 'absolute' && layoutMode !== 'row' && layoutMode !== 'column') {
@@ -1843,7 +1687,6 @@ async function handleStateTool(name, args) {
                 };
                 currentPoster.canvas.padding = nextPadding;
             }
-            persistState();
             return {
                 content: [
                     {
@@ -1858,7 +1701,11 @@ async function handleStateTool(name, args) {
             };
         }
         case 'modify_canvas': {
-            ensurePoster();
+            if (!currentPoster) {
+                return {
+                    content: [{ type: 'text', text: 'Error: No poster created. Use create_poster first.' }],
+                };
+            }
             const canvas = currentPoster.canvas;
             if (params.aspectRatio)
                 canvas.aspectRatio = params.aspectRatio;
@@ -1868,7 +1715,6 @@ async function handleStateTool(name, args) {
                 canvas.canvasColor = params.canvasColor;
             if (params.overflow !== undefined)
                 canvas.overflow = params.overflow;
-            persistState();
             return {
                 content: [
                     {
@@ -1887,7 +1733,11 @@ async function handleStateTool(name, args) {
             };
         }
         case 'set_background': {
-            ensurePoster();
+            if (!currentPoster) {
+                return {
+                    content: [{ type: 'text', text: 'Error: No poster created. Use create_poster first.' }],
+                };
+            }
             // Background is always at index 0
             const bgLayer = currentPoster.layers[0];
             if (bgLayer.type !== 'background') {
@@ -1899,8 +1749,53 @@ async function handleStateTool(name, args) {
             const contentType = requestedType === 'gradient' ? 'solid' : requestedType;
             bgLayer.contentType = contentType;
             if (requestedType === 'gradient') {
-                const gradient = buildFillFromParams(params)
-                    ?? normalizeLinearGradientFill(DEFAULT_LINEAR_GRADIENT_FILL);
+                const gradientStyle = params.gradientStyle === 'radial' ? 'radial' : 'linear';
+                const explicitStops = parseGradientStopsInput(params.gradientStops, gradientStyle === 'radial' ? DEFAULT_RADIAL_GRADIENT_FILL.stops : DEFAULT_LINEAR_GRADIENT_FILL.stops);
+                const gradient = gradientStyle === 'radial'
+                    ? normalizeRadialGradientFill({
+                        type: 'radial',
+                        center: {
+                            x: Number.isFinite(params.gradientCenterX)
+                                ? params.gradientCenterX
+                                : DEFAULT_RADIAL_GRADIENT_FILL.center.x,
+                            y: Number.isFinite(params.gradientCenterY)
+                                ? params.gradientCenterY
+                                : DEFAULT_RADIAL_GRADIENT_FILL.center.y,
+                        },
+                        radius: Number.isFinite(params.gradientRadius)
+                            ? params.gradientRadius
+                            : DEFAULT_RADIAL_GRADIENT_FILL.radius,
+                        stops: explicitStops ?? [
+                            {
+                                color: params.gradientStartColor || DEFAULT_RADIAL_GRADIENT_FILL.stops[0].color,
+                                opacity: DEFAULT_RADIAL_GRADIENT_FILL.stops[0].opacity,
+                                position: DEFAULT_RADIAL_GRADIENT_FILL.stops[0].position,
+                            },
+                            {
+                                color: params.gradientEndColor || DEFAULT_RADIAL_GRADIENT_FILL.stops[1].color,
+                                opacity: DEFAULT_RADIAL_GRADIENT_FILL.stops[1].opacity,
+                                position: DEFAULT_RADIAL_GRADIENT_FILL.stops[1].position,
+                            },
+                        ],
+                    })
+                    : normalizeLinearGradientFill({
+                        type: 'linear',
+                        angle: Number.isFinite(params.gradientAngle)
+                            ? params.gradientAngle
+                            : DEFAULT_LINEAR_GRADIENT_FILL.angle,
+                        stops: explicitStops ?? [
+                            {
+                                color: params.gradientStartColor || DEFAULT_LINEAR_GRADIENT_FILL.stops[0].color,
+                                opacity: DEFAULT_LINEAR_GRADIENT_FILL.stops[0].opacity,
+                                position: DEFAULT_LINEAR_GRADIENT_FILL.stops[0].position,
+                            },
+                            {
+                                color: params.gradientEndColor || DEFAULT_LINEAR_GRADIENT_FILL.stops[1].color,
+                                opacity: DEFAULT_LINEAR_GRADIENT_FILL.stops[1].opacity,
+                                position: DEFAULT_LINEAR_GRADIENT_FILL.stops[1].position,
+                            },
+                        ],
+                    });
                 bgLayer.fill = gradient;
                 bgLayer.solidColor = gradient.stops[0].color;
                 currentPoster.canvas.backgroundColor = gradient.stops[0].color;
@@ -1945,7 +1840,6 @@ async function handleStateTool(name, args) {
                     objectFit: params.objectFit || 'cover',
                 };
             }
-            persistState();
             return {
                 content: [
                     {
@@ -1960,7 +1854,11 @@ async function handleStateTool(name, args) {
             };
         }
         case 'add_layer': {
-            ensurePoster();
+            if (!currentPoster) {
+                return {
+                    content: [{ type: 'text', text: 'Error: No poster created. Use create_poster first.' }],
+                };
+            }
             const layerType = params.type;
             if (!layerType) {
                 return {
@@ -2018,16 +1916,25 @@ async function handleStateTool(name, args) {
                     : undefined;
                 const autoSize = requestedAutoSize ?? 'height';
                 if (frameWidthPx == null && textBoxWidth == null) {
-                    const defaultFrameWidthNormalized = fontSize >= 72 ? 0.88 : 0.78;
+                    // Account for canvas padding so the frame width matches what the
+                    // layout engine will actually give us after shrink-to-fit.
+                    const canvasPad = currentPoster.canvas.padding || { top: 0, right: 0, bottom: 0, left: 0 };
+                    const canvasContentW = 1.0 - (canvasPad.left || 0) - (canvasPad.right || 0);
+                    const defaultFrameWidthNormalized = Math.min(fontSize >= 72 ? 0.88 : 0.78, canvasContentW * 0.95);
                     frameWidthPx = textNormalizedToPx(defaultFrameWidthNormalized, artboardAspect, 'width');
                 }
+                // Auto-fit: shrink font if the longest word can't fit on one line
+                const letterSpacing = params.letterSpacing ?? 0;
+                const fittedFontSize = frameWidthPx != null
+                    ? autoFitFontSize(content, fontSize, letterSpacing, frameWidthPx)
+                    : fontSize;
                 layer = {
                     ...baseLayer,
                     type: 'text',
                     content,
                     textType: 'frame',
                     fontFamily: normalizeFontFamily(params.fontFamily),
-                    fontSize,
+                    fontSize: fittedFontSize,
                     fontWeight: normalizeFontWeight(params.fontWeight),
                     color: params.color || '#ffffff',
                     textAlign: params.textAlign || 'center',
@@ -2080,17 +1987,14 @@ async function handleStateTool(name, args) {
             }
             else if (layerType === 'rectangle') {
                 const fillColor = normalizeHexColor(params.fillColor) || '#3b82f6';
-                const fillOpacity = normalizeOpacity(params.fillOpacity, 1);
                 const strokeColor = normalizeHexColor(params.strokeColor) || '#000000';
-                const gradientFill = buildFillFromParams(params);
                 layer = {
                     ...baseLayer,
                     type: 'rectangle',
                     style: {
-                        fill: gradientFill ?? { type: 'solid', color: fillColor, opacity: fillOpacity },
                         fillType: 'solid',
                         fillColor,
-                        fillOpacity,
+                        fillOpacity: normalizeOpacity(params.fillOpacity, 1),
                         strokeColor,
                         strokeWidth: normalizeStrokeWidth(params.strokeWidth, 0),
                         strokeOpacity: normalizeOpacity(params.strokeOpacity, 1),
@@ -2105,19 +2009,16 @@ async function handleStateTool(name, args) {
             }
             else if (layerType === 'ellipse') {
                 const fillColor = normalizeHexColor(params.fillColor) || '#3b82f6';
-                const fillOpacity = normalizeOpacity(params.fillOpacity, 1);
                 const strokeColor = normalizeHexColor(params.strokeColor) || '#000000';
                 const w = cssPercentToSize(params.width, 20);
                 const h = cssPercentToSize(params.height, 20);
-                const gradientFill = buildFillFromParams(params);
                 layer = {
                     ...baseLayer,
                     type: 'ellipse',
                     style: {
-                        fill: gradientFill ?? { type: 'solid', color: fillColor, opacity: fillOpacity },
                         fillType: 'solid',
                         fillColor,
-                        fillOpacity,
+                        fillOpacity: normalizeOpacity(params.fillOpacity, 1),
                         strokeColor,
                         strokeWidth: normalizeStrokeWidth(params.strokeWidth, 0),
                         strokeOpacity: normalizeOpacity(params.strokeOpacity, 1),
@@ -2130,19 +2031,16 @@ async function handleStateTool(name, args) {
             }
             else if (layerType === 'polygon') {
                 const fillColor = normalizeHexColor(params.fillColor) || '#3b82f6';
-                const fillOpacity = normalizeOpacity(params.fillOpacity, 1);
                 const strokeColor = normalizeHexColor(params.strokeColor) || '#000000';
                 const w = cssPercentToSize(params.width, 20);
                 const h = cssPercentToSize(params.height, 20);
-                const gradientFill = buildFillFromParams(params);
                 layer = {
                     ...baseLayer,
                     type: 'polygon',
                     style: {
-                        fill: gradientFill ?? { type: 'solid', color: fillColor, opacity: fillOpacity },
                         fillType: 'solid',
                         fillColor,
-                        fillOpacity,
+                        fillOpacity: normalizeOpacity(params.fillOpacity, 1),
                         strokeColor,
                         strokeWidth: normalizeStrokeWidth(params.strokeWidth, 0),
                         strokeOpacity: normalizeOpacity(params.strokeOpacity, 1),
@@ -2156,19 +2054,16 @@ async function handleStateTool(name, args) {
             }
             else if (layerType === 'star') {
                 const fillColor = normalizeHexColor(params.fillColor) || '#3b82f6';
-                const fillOpacity = normalizeOpacity(params.fillOpacity, 1);
                 const strokeColor = normalizeHexColor(params.strokeColor) || '#000000';
                 const w = cssPercentToSize(params.width, 20);
                 const h = cssPercentToSize(params.height, 20);
-                const gradientFill = buildFillFromParams(params);
                 layer = {
                     ...baseLayer,
                     type: 'star',
                     style: {
-                        fill: gradientFill ?? { type: 'solid', color: fillColor, opacity: fillOpacity },
                         fillType: 'solid',
                         fillColor,
-                        fillOpacity,
+                        fillOpacity: normalizeOpacity(params.fillOpacity, 1),
                         strokeColor,
                         strokeWidth: normalizeStrokeWidth(params.strokeWidth, 0),
                         strokeOpacity: normalizeOpacity(params.strokeOpacity, 1),
@@ -2211,7 +2106,6 @@ async function handleStateTool(name, args) {
                 layer = baseLayer;
             }
             currentPoster.layers.push(layer);
-            persistState();
             return {
                 content: [
                     {
@@ -2227,7 +2121,11 @@ async function handleStateTool(name, args) {
             };
         }
         case 'add_group': {
-            ensurePoster();
+            if (!currentPoster) {
+                return {
+                    content: [{ type: 'text', text: 'Error: No poster created. Use create_poster first.' }],
+                };
+            }
             const children = params.children;
             if (!children || !Array.isArray(children) || children.length === 0) {
                 return {
@@ -2276,29 +2174,46 @@ async function handleStateTool(name, args) {
                     const frameHeightPx = typeof childParams.frameHeightPx === 'number' ? childParams.frameHeightPx : frameHeightPxFromNormalized;
                     const textBoxWidth = typeof childParams.textBoxWidth === 'number' ? childParams.textBoxWidth : undefined;
                     const childFontSize = childParams.fontSize || 72;
-                    // Default frameWidthPx for group text children (same as add_layer)
+                    // Default frameWidthPx — account for canvas + group padding so the
+                    // frame width matches the actual available space after layout shrink-to-fit.
                     if (frameWidthPx == null && textBoxWidth == null) {
-                        const defaultFrameWidthNormalized = childFontSize >= 72 ? 0.88 : 0.78;
+                        const canvasPad = currentPoster.canvas.padding || { top: 0, right: 0, bottom: 0, left: 0 };
+                        const canvasContentW = 1.0 - (canvasPad.left || 0) - (canvasPad.right || 0);
+                        const grpPadPct = params.padding ?? 0;
+                        const grpPadNorm = cssPercentToSize(grpPadPct, 0);
+                        const grpPadLR = (cssPercentToSize(params.paddingLeft ?? grpPadPct, 0)) +
+                            (cssPercentToSize(params.paddingRight ?? grpPadPct, 0));
+                        const effectiveContentW = canvasContentW - grpPadLR;
+                        const defaultFrameWidthNormalized = Math.min(childFontSize >= 72 ? 0.88 : 0.78, effectiveContentW * 0.98);
                         frameWidthPx = textNormalizedToPx(defaultFrameWidthNormalized, artboardAspect, 'width');
                     }
+                    const childContent = childParams.content || 'Text';
+                    const childLetterSpacing = childParams.letterSpacing ?? 0;
+                    const childAutoSize = childParams.autoSize
+                        ? childParams.autoSize
+                        : 'height';
+                    // Auto-fit: shrink font if the longest word can't fit on one line
+                    const fittedChildFontSize = frameWidthPx != null
+                        ? autoFitFontSize(childContent, childFontSize, childLetterSpacing, frameWidthPx)
+                        : childFontSize;
                     childLayers.push({
                         ...childBase,
                         type: 'text',
-                        content: childParams.content || 'Text',
+                        content: childContent,
                         textType: 'frame',
                         fontFamily: normalizeFontFamily(childParams.fontFamily),
-                        fontSize: childFontSize,
+                        fontSize: fittedChildFontSize,
                         fontWeight: normalizeFontWeight(childParams.fontWeight),
                         color: childParams.color || '#ffffff',
                         textAlign: childParams.textAlign || 'center',
                         ...(childParams.verticalAlign ? { verticalAlign: childParams.verticalAlign } : {}),
-                        letterSpacing: childParams.letterSpacing ?? 0,
+                        letterSpacing: childLetterSpacing,
                         lineHeight: childParams.lineHeight ?? 1.2,
                         textTransformMode: 'box',
                         ...(textBoxWidth != null ? { textBoxWidth } : {}),
-                        frameWidthPx,
+                        ...(frameWidthPx != null ? { frameWidthPx } : {}),
                         ...(typeof frameHeightPx === 'number' ? { frameHeightPx } : {}),
-                        ...(childParams.autoSize ? { autoSize: childParams.autoSize } : { autoSize: 'height' }),
+                        autoSize: childAutoSize,
                         ...(parseTextTransform(childParams) ? { textTransform: parseTextTransform(childParams) } : {}),
                         ...parseTextDecoration(childParams),
                     });
@@ -2333,17 +2248,14 @@ async function handleStateTool(name, args) {
                 }
                 else if (childType === 'rectangle') {
                     const fillColor = normalizeHexColor(childParams.fillColor) || '#3b82f6';
-                    const fillOpacity = normalizeOpacity(childParams.fillOpacity, 1);
                     const strokeColor = normalizeHexColor(childParams.strokeColor) || '#000000';
-                    const gradientFill = buildFillFromParams(childParams);
                     childLayers.push({
                         ...childBase,
                         type: 'rectangle',
                         style: {
-                            fill: gradientFill ?? { type: 'solid', color: fillColor, opacity: fillOpacity },
                             fillType: 'solid',
                             fillColor,
-                            fillOpacity,
+                            fillOpacity: normalizeOpacity(childParams.fillOpacity, 1),
                             strokeColor,
                             strokeWidth: normalizeStrokeWidth(childParams.strokeWidth, 0),
                             strokeOpacity: normalizeOpacity(childParams.strokeOpacity, 1),
@@ -2358,19 +2270,16 @@ async function handleStateTool(name, args) {
                 }
                 else if (childType === 'ellipse') {
                     const fillColor = normalizeHexColor(childParams.fillColor) || '#3b82f6';
-                    const fillOpacity = normalizeOpacity(childParams.fillOpacity, 1);
                     const strokeColor = normalizeHexColor(childParams.strokeColor) || '#000000';
                     const w = cssPercentToSize(childParams.width, 20);
                     const h = cssPercentToSize(childParams.height, 20);
-                    const gradientFill = buildFillFromParams(childParams);
                     childLayers.push({
                         ...childBase,
                         type: 'ellipse',
                         style: {
-                            fill: gradientFill ?? { type: 'solid', color: fillColor, opacity: fillOpacity },
                             fillType: 'solid',
                             fillColor,
-                            fillOpacity,
+                            fillOpacity: normalizeOpacity(childParams.fillOpacity, 1),
                             strokeColor,
                             strokeWidth: normalizeStrokeWidth(childParams.strokeWidth, 0),
                             strokeOpacity: normalizeOpacity(childParams.strokeOpacity, 1),
@@ -2383,19 +2292,16 @@ async function handleStateTool(name, args) {
                 }
                 else if (childType === 'polygon') {
                     const fillColor = normalizeHexColor(childParams.fillColor) || '#3b82f6';
-                    const fillOpacity = normalizeOpacity(childParams.fillOpacity, 1);
                     const strokeColor = normalizeHexColor(childParams.strokeColor) || '#000000';
                     const w = cssPercentToSize(childParams.width, 20);
                     const h = cssPercentToSize(childParams.height, 20);
-                    const gradientFill = buildFillFromParams(childParams);
                     childLayers.push({
                         ...childBase,
                         type: 'polygon',
                         style: {
-                            fill: gradientFill ?? { type: 'solid', color: fillColor, opacity: fillOpacity },
                             fillType: 'solid',
                             fillColor,
-                            fillOpacity,
+                            fillOpacity: normalizeOpacity(childParams.fillOpacity, 1),
                             strokeColor,
                             strokeWidth: normalizeStrokeWidth(childParams.strokeWidth, 0),
                             strokeOpacity: normalizeOpacity(childParams.strokeOpacity, 1),
@@ -2409,19 +2315,16 @@ async function handleStateTool(name, args) {
                 }
                 else if (childType === 'star') {
                     const fillColor = normalizeHexColor(childParams.fillColor) || '#3b82f6';
-                    const fillOpacity = normalizeOpacity(childParams.fillOpacity, 1);
                     const strokeColor = normalizeHexColor(childParams.strokeColor) || '#000000';
                     const w = cssPercentToSize(childParams.width, 20);
                     const h = cssPercentToSize(childParams.height, 20);
-                    const gradientFill = buildFillFromParams(childParams);
                     childLayers.push({
                         ...childBase,
                         type: 'star',
                         style: {
-                            fill: gradientFill ?? { type: 'solid', color: fillColor, opacity: fillOpacity },
                             fillType: 'solid',
                             fillColor,
-                            fillOpacity,
+                            fillOpacity: normalizeOpacity(childParams.fillOpacity, 1),
                             strokeColor,
                             strokeWidth: normalizeStrokeWidth(childParams.strokeWidth, 0),
                             strokeOpacity: normalizeOpacity(childParams.strokeOpacity, 1),
@@ -2511,7 +2414,6 @@ async function handleStateTool(name, args) {
                 ...(params.cornerRadius !== undefined ? { cornerRadius: params.cornerRadius } : {}),
             };
             currentPoster.layers.push(groupLayer);
-            persistState();
             return {
                 content: [
                     {
@@ -2527,7 +2429,11 @@ async function handleStateTool(name, args) {
             };
         }
         case 'modify_layer': {
-            ensurePoster();
+            if (!currentPoster) {
+                return {
+                    content: [{ type: 'text', text: 'Error: No poster created. Use create_poster first.' }],
+                };
+            }
             const layerId = params.layerId;
             if (!layerId) {
                 return {
@@ -2875,19 +2781,6 @@ async function handleStateTool(name, args) {
                     const existing = asFiniteNumber(anyLayer.style.strokeOpacity, 1);
                     anyLayer.style.strokeOpacity = normalizeOpacity(params.strokeOpacity, existing);
                 }
-                // Gradient fill update
-                const modifyGradientFill = buildFillFromParams(params);
-                if (modifyGradientFill) {
-                    anyLayer.style.fill = modifyGradientFill;
-                    anyLayer.style.fillType = 'solid';
-                }
-                else if (params.fillColor !== undefined || params.fillOpacity !== undefined) {
-                    // Sync style.fill as solid when only color/opacity changed
-                    const currentFillColor = typeof anyLayer.style.fillColor === 'string' ? anyLayer.style.fillColor : '#3b82f6';
-                    const currentFillOpacity = asFiniteNumber(anyLayer.style.fillOpacity, 1);
-                    anyLayer.style.fill = { type: 'solid', color: currentFillColor, opacity: currentFillOpacity };
-                    anyLayer.style.fillType = 'solid';
-                }
                 if (anyLayer.style.fillType === undefined && layer.type !== 'line')
                     anyLayer.style.fillType = 'solid';
                 if (anyLayer.style.strokeCap === undefined)
@@ -2967,7 +2860,6 @@ async function handleStateTool(name, args) {
                     layer.transform.height = 1;
                 }
             }
-            persistState();
             return {
                 content: [
                     {
@@ -2982,7 +2874,11 @@ async function handleStateTool(name, args) {
             };
         }
         case 'apply_effect': {
-            ensurePoster();
+            if (!currentPoster) {
+                return {
+                    content: [{ type: 'text', text: 'Error: No poster created. Use create_poster first.' }],
+                };
+            }
             const effectId = params.effectId;
             if (!effectId) {
                 return {
@@ -2991,7 +2887,6 @@ async function handleStateTool(name, args) {
             }
             if (effectId === 'none') {
                 delete currentPoster.effect;
-                persistState();
                 return {
                     content: [
                         {
@@ -3239,7 +3134,6 @@ async function handleStateTool(name, args) {
                 };
             }
             currentPoster.effect = effect;
-            persistState();
             return {
                 content: [
                     {
@@ -3254,7 +3148,11 @@ async function handleStateTool(name, args) {
             };
         }
         case 'add_postprocess': {
-            ensurePoster();
+            if (!currentPoster) {
+                return {
+                    content: [{ type: 'text', text: 'Error: No poster created. Use create_poster first.' }],
+                };
+            }
             const ppType = params.type;
             if (!ppType) {
                 return {
@@ -3336,7 +3234,6 @@ async function handleStateTool(name, args) {
                 settings,
             };
             currentPoster.postProcesses.push(postProcess);
-            persistState();
             // Build response with warning if dither is active
             const response = {
                 success: true,
@@ -3359,7 +3256,11 @@ async function handleStateTool(name, args) {
             };
         }
         case 'remove_layer': {
-            ensurePoster();
+            if (!currentPoster) {
+                return {
+                    content: [{ type: 'text', text: 'Error: No poster created. Use create_poster first.' }],
+                };
+            }
             const layerId = params.layerId;
             if (!layerId) {
                 return {
@@ -3378,7 +3279,6 @@ async function handleStateTool(name, args) {
                 };
             }
             currentPoster.layers.splice(layerIndex, 1);
-            persistState();
             return {
                 content: [
                     {
@@ -3393,7 +3293,11 @@ async function handleStateTool(name, args) {
             };
         }
         case 'move_layer': {
-            ensurePoster();
+            if (!currentPoster) {
+                return {
+                    content: [{ type: 'text', text: 'Error: No poster created. Use create_poster first.' }],
+                };
+            }
             const poster = currentPoster;
             const layerId = params.layerId;
             const direction = params.direction;
@@ -3436,7 +3340,6 @@ async function handleStateTool(name, args) {
                     content: [{ type: 'text', text: 'Error: direction must be one of: up, down, top, bottom' }],
                 };
             }
-            persistState();
             return {
                 content: [
                     {
@@ -3452,7 +3355,11 @@ async function handleStateTool(name, args) {
             };
         }
         case 'get_state': {
-            ensurePoster();
+            if (!currentPoster) {
+                return {
+                    content: [{ type: 'text', text: 'No poster created yet. Use create_poster first.' }],
+                };
+            }
             return {
                 content: [
                     {