code.js

import addOnSandboxSdk from "add-on-sdk-document-sandbox";
import { editor, colorUtils, constants } from "express-document-sdk";

const { runtime } = addOnSandboxSdk.instance;

function start() {
    console.log("Brand Kit Extractor sandbox initialized");
    
    runtime.exposeApi({
        async applyBrandKit(brandKit) {
            try {
                console.log("Applying brand kit to document:", brandKit);
                
                const results = [];
                
                // Apply brand colors to selected elements
                if (brandKit.colors) {
                    const colorResult = await applyBrandColors(brandKit.colors);
                    if (colorResult) results.push("Applied brand colors");
                }
                
                // Apply brand fonts to selected text elements
                if (brandKit.fonts) {
                    const fontResult = await applyBrandFonts(brandKit.fonts);
                    if (fontResult) results.push("Applied brand fonts");
                }
                
                // Insert brand logo
                if (brandKit.logo) {
                    const logoResult = await insertBrandLogo(brandKit.logo);
                    if (logoResult) results.push("Inserted brand logo");
                }
                
                // Add design description as a text element if available
                if (brandKit.designDescription) {
                    const descResult = await insertDesignDescription(brandKit.designDescription);
                    if (descResult) results.push("Added design philosophy");
                }
                
                console.log("Brand kit application results:", results);
                return { 
                    success: true, 
                    message: `Applied brand kit: ${results.join(', ')}`,
                    results 
                };
                
            } catch (error) {
                console.error("Error applying brand kit:", error);
                return { success: false, error: error.message };
            }
        },
        
        async applyBrandColors(colors) {
            try {
                const selection = editor.context.selection;
                
                if (selection.length === 0) {
                    // Create demo elements if nothing selected
                    await createDemoElements(colors);
                    return true;
                }
                
                // Apply colors to selected elements
                let appliedCount = 0;
                const colorArray = Object.values(colors);
                
                for (const element of selection) {
                    if (canHaveFill(element)) {
                        const colorIndex = appliedCount % colorArray.length;
                        const colorFill = editor.makeColorFill(colorUtils.fromHex(colorArray[colorIndex]));
                        element.fill = colorFill;
                        appliedCount++;
                    }
                }
                
                return appliedCount > 0;
                
            } catch (error) {
                console.error("Error applying brand colors:", error);
                return false;
            }
        },
        
        async applyBrandFonts(fonts) {
            try {
                const selection = editor.context.selection;
                
                if (selection.length === 0) {
                    // Create demo text if nothing selected
                    await createDemoText(fonts);
                    return true;
                }
                
                // Apply fonts to selected text elements
                let appliedCount = 0;
                const fontArray = Object.values(fonts);
                
                for (const element of selection) {
                    if (element.type === constants.SceneNodeType.text && element.fullContent) {
                        const content = element.fullContent;
                        const fontIndex = appliedCount % fontArray.length;
                        
                        content.characterStyleRanges = [{
                            length: content.text.length,
                            fontFamily: fontArray[fontIndex]
                        }];
                        
                        appliedCount++;
                    }
                }
                
                return appliedCount > 0;
                
            } catch (error) {
                console.error("Error applying brand fonts:", error);
                return false;
            }
        },
        
        async insertBrandLogo(logoUrl) {
            try {
                const artboard = editor.documentRoot.pages.first.artboards.first;
                if (!artboard) return false;
                
                // Create a placeholder for the logo (since we can't load external images in sandbox)
                const logoPlaceholder = editor.createRectangle();
                logoPlaceholder.width = 120;
                logoPlaceholder.height = 60;
                logoPlaceholder.translation = { x: 30, y: 30 };
                
                // Use a brand color for the placeholder
                const logoFill = editor.makeColorFill(colorUtils.fromHex("#2C3E50"));
                logoPlaceholder.fill = logoFill;
                
                // Add logo text
                const logoText = editor.createText("LOGO");
                logoText.translation = { x: 60, y: 55 };
                
                if (logoText.fullContent) {
                    const content = logoText.fullContent;
                    content.characterStyleRanges = [{
                        length: content.text.length,
                        fontFamily: "Arial",
                        fontSize: 16,
                        fontWeight: "bold"
                    }];
                }
                
                // Add to document
                artboard.children.append(logoPlaceholder);
                artboard.children.append(logoText);
                
                console.log("Inserted brand logo placeholder");
                return true;
                
            } catch (error) {
                console.error("Error inserting brand logo:", error);
                return false;
            }
        },
        
        async insertDesignDescription(description) {
            try {
                const artboard = editor.documentRoot.pages.first.artboards.first;
                if (!artboard) return false;
                
                // Create title text
                const titleText = editor.createText("Design Philosophy");
                titleText.translation = { x: 30, y: 120 };
                
                if (titleText.fullContent) {
                    const content = titleText.fullContent;
                    content.characterStyleRanges = [{
                        length: content.text.length,
                        fontFamily: "Arial",
                        fontSize: 18,
                        fontWeight: "bold"
                    }];
                }
                
                // Create description text (truncated for display)
                const shortDesc = description.length > 200 ? description.substring(0, 200) + "..." : description;
                const descText = editor.createText(shortDesc);
                descText.translation = { x: 30, y: 150 };
                
                if (descText.fullContent) {
                    const content = descText.fullContent;
                    content.characterStyleRanges = [{
                        length: content.text.length,
                        fontFamily: "Arial",
                        fontSize: 12,
                        fontWeight: "normal"
                    }];
                }
                
                // Add to document
                artboard.children.append(titleText);
                artboard.children.append(descText);
                
                console.log("Inserted design description");
                return true;
                
            } catch (error) {
                console.error("Error inserting design description:", error);
                return false;
            }
        }
    });
}

async function createDemoElements(colors) {
    try {
        const artboard = editor.documentRoot.pages.first.artboards.first;
        if (!artboard) return;
        
        const colorArray = Object.values(colors);
        
        // Create demo rectangles with brand colors
        colorArray.forEach((color, index) => {
            const rect = editor.createRectangle();
            rect.width = 80;
            rect.height = 80;
            rect.translation = { x: 50 + (index * 100), y: 100 };
            
            const colorFill = editor.makeColorFill(colorUtils.fromHex(color));
            rect.fill = colorFill;
            
            artboard.children.append(rect);
        });
        
        console.log("Created demo elements with brand colors");
        
    } catch (error) {
        console.error("Error creating demo elements:", error);
    }
}

async function createDemoText(fonts) {
    try {
        const artboard = editor.documentRoot.pages.first.artboards.first;
        if (!artboard) return;
        
        const fontArray = Object.values(fonts);
        
        // Create demo text with brand fonts
        fontArray.forEach((font, index) => {
            const text = editor.createText(`Brand Text ${index + 1}`);
            text.translation = { x: 50, y: 200 + (index * 50) };
            
            if (text.fullContent) {
                const content = text.fullContent;
                content.characterStyleRanges = [{
                    length: content.text.length,
                    fontFamily: font,
                    fontSize: 18
                }];
            }
            
            artboard.children.append(text);
        });
        
        console.log("Created demo text with brand fonts");
        
    } catch (error) {
        console.error("Error creating demo text:", error);
    }
}

function canHaveFill(element) {
    return element.type === constants.SceneNodeType.rectangle ||
           element.type === constants.SceneNodeType.ellipse ||
           element.type === constants.SceneNodeType.complexShape ||
           element.type === constants.SceneNodeType.solidColorShape;
}

start();