fix: Enable proper editing of layout text objects

Mark layout text objects as modified when content or properties change:
- Text content changes now set isModified flag (Canvas.tsx:660)
- Font family changes mark as modified (App.tsx:1132)
- Bold/font weight changes mark as modified (App.tsx:1181)
- Italic changes mark as modified (App.tsx:1238)

This prevents layout text from being unexpectedly replaced during
layout switches and fixes MCP create_thumbnail text customization.

Fixes #text-editing-bug

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <[email protected]>

src/App.tsx

@@ -1128,6 +1128,9 @@ function App() {
             onFontFamilyChange={(font) => {
               const updatedObjects = objects.map((o: CanvasObject) => {
                   if (o.type === 'text' && selectedTextObjects.some(selected => selected.id === o.id)) {
+                    // Mark layout objects as modified when font family changes
+                    const isModified = o.isFromLayout ? true : o.isModified;
+
                     // Recalculate text dimensions with new font
                     try {
                       const tempText = new Konva.Text({
@@ -1141,10 +1144,10 @@ function App() {
                       const newHeight = Math.max(40, tempText.height() + 10);
 
                       tempText.destroy();
-                      return { ...o, fontFamily: font, width: newWidth, height: newHeight };
+                      return { ...o, fontFamily: font, width: newWidth, height: newHeight, isModified };
                     } catch (error) {
                       console.error('Error recalculating text size:', error);
-                      return { ...o, fontFamily: font };
+                      return { ...o, fontFamily: font, isModified };
                     }
                   }
                   return o;
@@ -1174,6 +1177,9 @@ function App() {
             onBoldToggle={() => {
               const updatedObjects = objects.map((o: CanvasObject) => {
                   if (o.type === 'text' && selectedTextObjects.some(selected => selected.id === o.id)) {
+                    // Mark layout objects as modified when bold changes
+                    const isModified = o.isFromLayout ? true : o.isModified;
+
                     // Check if font supports BLACK weight
                     const supportsBlack = o.fontFamily === 'Source Sans 3';
                     const currentWeight = o.fontWeight || 'normal';
@@ -1215,10 +1221,10 @@ function App() {
                       const newHeight = Math.max(40, tempText.height() + 10);
 
                       tempText.destroy();
-                      return { ...o, bold: newBold, fontWeight: newWeight, width: newWidth, height: newHeight };
+                      return { ...o, bold: newBold, fontWeight: newWeight, width: newWidth, height: newHeight, isModified };
                     } catch (error) {
                       console.error('Error recalculating text size:', error);
-                      return { ...o, bold: newBold, fontWeight: newWeight };
+                      return { ...o, bold: newBold, fontWeight: newWeight, isModified };
                     }
                   }
                   return o;
@@ -1228,6 +1234,9 @@ function App() {
             onItalicToggle={() => {
               const updatedObjects = objects.map((o: CanvasObject) => {
                   if (o.type === 'text' && selectedTextObjects.some(selected => selected.id === o.id)) {
+                    // Mark layout objects as modified when italic changes
+                    const isModified = o.isFromLayout ? true : o.isModified;
+
                     const newItalic = !o.italic;
                     // Recalculate text dimensions with new italic state
                     try {
@@ -1242,10 +1251,10 @@ function App() {
                       const newHeight = Math.max(40, tempText.height() + 10);
 
                       tempText.destroy();
-                      return { ...o, italic: newItalic, width: newWidth, height: newHeight };
+                      return { ...o, italic: newItalic, width: newWidth, height: newHeight, isModified };
                     } catch (error) {
                       console.error('Error recalculating text size:', error);
-                      return { ...o, italic: newItalic };
+                      return { ...o, italic: newItalic, isModified };
                     }
                   }
                   return o;

src/components/Canvas/Canvas.tsx

@@ -656,9 +656,12 @@ export default function Canvas({
   const handleTextChange = (id: string, text: string, width: number, height: number) => {
     const updatedObjects = objects.map(obj => {
       if (obj.id === id && obj.type === 'text') {
-        // Check if dimensions changed - if so, mark as modified
+        // Mark as modified if: text changed OR dimensions changed (for layout objects)
+        const textChanged = obj.text !== text;
         const dimensionsChanged = obj.width !== width || obj.height !== height;
-        const isModified = dimensionsChanged && obj.isFromLayout ? true : obj.isModified;
+        const isModified = obj.isFromLayout && (textChanged || dimensionsChanged)
+          ? true
+          : obj.isModified;
 
         return { ...obj, text, width, height, isModified };
       }