@wix/ditto-codegen-public 1.0.233 → 1.0.235

package/dist/examples-apps/react-builder/manifest.json

@@ -1,4 +1,16 @@
 {
+  "installation": {
+    "staticContainer": "HOMEPAGE",
+    "initialSize": {
+      "width": {
+        "sizingType": "pixels",
+        "pixels": 400
+      },
+      "height": {
+        "sizingType": "stretched"
+      }
+    }
+  },
   "editorElement": {
     "selector": ".perfect-example",
     "displayName": "Perfect Example",

package/dist/out.js

@@ -92401,8 +92401,45 @@ All animations: pure CSS, smooth, purposeful.
 - Emojis or decorative shapes \u2192 Avoid unless core to request
 - Looping animations \u2192 Only for loading states
 - Center-aligned multi-line body text \u2192 Hard to read`;
+    var installationDocumentation = `The installation property defines how the component is initially placed and sized when added to a page.
+
+### Installation Fields
+- **staticContainer**: Specifies automatic installation location. Use "HOMEPAGE" to auto-install on homepage
+- **initialSize**: Defines the initial dimensions when the component is added
+  - **width**: Width configuration (InitialSizeSetting)
+    - sizingType: "content" | "stretched" | "pixels"
+    - pixels: number (only usable when sizingType is "pixels")
+  - **height**: Height configuration (InitialSizeSetting)
+    - sizingType: "content" | "stretched" | "pixels"
+    - pixels: number (only usable when sizingType is "pixels")
+
+### SizingType Values
+- **content**: Component auto-sizes based on its content
+- **stretched**: Component stretches to fill available space
+- **pixels**: Component has a fixed pixel dimension (requires pixels property)
+
+### Examples:
+\`\`\`json
+// Fixed width, content-based height
+{
+  "installation": {
+    "staticContainer": "HOMEPAGE",
+    "initialSize": {
+      "width": { "sizingType": "pixels", "pixels": 300 },
+      "height": { "sizingType": "content" }
+    }
+  }
+}
+\`\`\`
+
+**Guidelines**:
+- Always include "staticContainer": "HOMEPAGE" for automatic installation on Harmony editor
+- Use "content" for height when the component should auto-size based on its content
+- Use "stretched" when the component should fill available space
+- Use "pixels" for fixed dimensions (buttons: 120-200px, cards: 300-400px)`;
     var responseFormat = `Output as JSON with files array containing:
 1. **manifest.json** - Component manifest (JSON) containing:
+   - installation: initial size and placement configuration
    - editorElement: full editor element configuration (selector, displayName, archetype, layout, cssProperties, data, elements, behaviors)
 2. **component.tsx** - React component implementation
 3. **style.css** - CSS styles
@@ -92413,6 +92450,13 @@ Each file: { path: string, content: string, operation: "insert" }
 ### manifest.json Structure Example:
 \`\`\`json
 {
+  "installation": {
+    "staticContainer": "HOMEPAGE",
+    "initialSize": {
+      "width": { "sizingType": "pixels", "pixels": 300 },
+      "height": { "sizingType": "content" }
+    }
+  },
   "editorElement": {
     "selector": ".component-name",
     "displayName": "Component Name",
@@ -92466,6 +92510,7 @@ import { heroImage } from './assets/defaultImages'
       props: propsDocumentation,
       componentElementsGuidelines,
       manifestGuidelines: componentManifestGuidelines,
+      installation: installationDocumentation,
       reactGuidelines: componentReactGuidelines,
       cssGuidelines: componentCssGuidelines,
       designGuidelines,
@@ -92492,7 +92537,7 @@ var require_site_component_prompt = __commonJS({
         apiDocumentation,
         useData,
         useIteration
-      }).withRole(site_component_instructions_1.siteComponentInstructions.role).withSection("core_documentation", site_component_instructions_1.siteComponentInstructions.coreDocumentation).withSection("data_types", site_component_instructions_1.siteComponentInstructions.dataTypes).withSection("css_properties", site_component_instructions_1.siteComponentInstructions.cssProperties).withSection("editor_element", site_component_instructions_1.siteComponentInstructions.editorElement).withSection("layout", site_component_instructions_1.siteComponentInstructions.layout).withSection("elements", site_component_instructions_1.siteComponentInstructions.elements).withSection("props", site_component_instructions_1.siteComponentInstructions.props).withSection("component_elements_guidelines", site_component_instructions_1.siteComponentInstructions.componentElementsGuidelines).withSection("manifest_guidelines", site_component_instructions_1.siteComponentInstructions.manifestGuidelines).withSection("react_guidelines", site_component_instructions_1.siteComponentInstructions.reactGuidelines).withSection("css_guidelines", site_component_instructions_1.siteComponentInstructions.cssGuidelines).withSection("design_guidelines", site_component_instructions_1.siteComponentInstructions.designGuidelines).withSection("asset_guidelines", site_component_instructions_1.siteComponentInstructions.assetGuidelines).withSection("response_format", site_component_instructions_1.siteComponentInstructions.responseFormat).withSection("hard_constraints", site_component_instructions_1.siteComponentInstructions.hardConstraints).withImplementationGuidelines(site_component_instructions_1.siteComponentInstructions.typescriptQualityGuidelines);
+      }).withRole(site_component_instructions_1.siteComponentInstructions.role).withSection("core_documentation", site_component_instructions_1.siteComponentInstructions.coreDocumentation).withSection("data_types", site_component_instructions_1.siteComponentInstructions.dataTypes).withSection("css_properties", site_component_instructions_1.siteComponentInstructions.cssProperties).withSection("editor_element", site_component_instructions_1.siteComponentInstructions.editorElement).withSection("layout", site_component_instructions_1.siteComponentInstructions.layout).withSection("elements", site_component_instructions_1.siteComponentInstructions.elements).withSection("props", site_component_instructions_1.siteComponentInstructions.props).withSection("component_elements_guidelines", site_component_instructions_1.siteComponentInstructions.componentElementsGuidelines).withSection("manifest_guidelines", site_component_instructions_1.siteComponentInstructions.manifestGuidelines).withSection("installation", site_component_instructions_1.siteComponentInstructions.installation).withSection("react_guidelines", site_component_instructions_1.siteComponentInstructions.reactGuidelines).withSection("css_guidelines", site_component_instructions_1.siteComponentInstructions.cssGuidelines).withSection("design_guidelines", site_component_instructions_1.siteComponentInstructions.designGuidelines).withSection("asset_guidelines", site_component_instructions_1.siteComponentInstructions.assetGuidelines).withSection("response_format", site_component_instructions_1.siteComponentInstructions.responseFormat).withSection("hard_constraints", site_component_instructions_1.siteComponentInstructions.hardConstraints).withImplementationGuidelines(site_component_instructions_1.siteComponentInstructions.typescriptQualityGuidelines);
     };
     var siteComponentCorePrompt = () => {
       return createCoreBuilder({
@@ -101719,12 +101764,101 @@ var require_submitPlanIteration = __commonJS({
   }
 });
 
+// dist/tools/bash.js
+var require_bash = __commonJS({
+  "dist/tools/bash.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.createBashTool = createBashTool;
+    var child_process_1 = require("child_process");
+    var zod_1 = require_zod();
+    var ALLOWED_BASH_PATTERNS = [
+      /^npm install(\s+[\w@./-]+)*$/
+      // npm install, npm install @wix/stores @wix/ecom
+    ];
+    var bashSchema = zod_1.z.object({
+      command: zod_1.z.string().describe("The shell command to execute")
+    });
+    function isCommandAllowed(command) {
+      return ALLOWED_BASH_PATTERNS.some((pattern) => pattern.test(command.trim()));
+    }
+    function createBashTool(basePath, options) {
+      const { onActivity } = options ?? {};
+      return {
+        description: `Execute allowed shell commands in the project directory.
+Currently allowed commands:
+- npm install [packages] - Install npm packages
+
+Example: bash({ command: "npm install @wix/stores @wix/ecom" })`,
+        inputSchema: bashSchema,
+        execute: async ({ command }) => {
+          const trimmedCommand = command.trim();
+          if (!isCommandAllowed(trimmedCommand)) {
+            return {
+              success: false,
+              error: `Command not allowed: "${trimmedCommand}". Allowed patterns: npm install [packages]`
+            };
+          }
+          await onActivity?.({ type: "bash:start", command: trimmedCommand });
+          const result = (0, child_process_1.spawnSync)("sh", ["-c", trimmedCommand], {
+            cwd: basePath,
+            stdio: "pipe",
+            env: process.env
+          });
+          const stdout = result.stdout?.toString().trim() || "";
+          const stderr = result.stderr?.toString().trim() || "";
+          const success2 = result.status === 0;
+          await onActivity?.({
+            type: "bash:done",
+            command: trimmedCommand,
+            success: success2
+          });
+          if (success2) {
+            console.log(`\u{1F527} Executed: ${trimmedCommand}`);
+            return { success: true, stdout, stderr };
+          }
+          return {
+            success: false,
+            stdout,
+            stderr,
+            error: `Command failed with exit code ${result.status}`
+          };
+        }
+      };
+    }
+  }
+});
+
+// dist/tools/submitFix.js
+var require_submitFix = __commonJS({
+  "dist/tools/submitFix.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.SUBMIT_FIX_TOOL_NAME = exports2.FixSchema = void 0;
+    exports2.createSubmitFixTool = createSubmitFixTool;
+    var zod_1 = require_zod();
+    exports2.FixSchema = zod_1.z.object({
+      filePath: zod_1.z.string().describe("Relative path to the file that was fixed"),
+      fixedContent: zod_1.z.string().describe("The complete fixed file content with all errors resolved"),
+      summary: zod_1.z.string().describe("Brief summary of what was fixed")
+    });
+    exports2.SUBMIT_FIX_TOOL_NAME = "submit_fix";
+    function createSubmitFixTool() {
+      return {
+        description: "Submit the fix after resolving all errors. Call this ONLY after you have successfully fixed all errors in the file.",
+        inputSchema: exports2.FixSchema,
+        execute: async (input) => input
+      };
+    }
+  }
+});
+
 // dist/tools/index.js
 var require_tools2 = __commonJS({
   "dist/tools/index.js"(exports2) {
     "use strict";
     Object.defineProperty(exports2, "__esModule", { value: true });
-    exports2.TOOL_NAMES = exports2.createSubmitPlanTool = exports2.createListDirTool = exports2.createDeleteFileTool = exports2.createEditFileTool = exports2.createCreateFileTool = exports2.createGlobTool = exports2.createGrepTool = exports2.createReadFileTool = void 0;
+    exports2.TOOL_NAMES = exports2.SUBMIT_FIX_TOOL_NAME = exports2.FixSchema = exports2.createSubmitFixTool = exports2.createBashTool = exports2.createSubmitPlanTool = exports2.createListDirTool = exports2.createDeleteFileTool = exports2.createEditFileTool = exports2.createCreateFileTool = exports2.createGlobTool = exports2.createGrepTool = exports2.createReadFileTool = void 0;
     var readFile_1 = require_readFile();
     Object.defineProperty(exports2, "createReadFileTool", { enumerable: true, get: function() {
       return readFile_1.createReadFileTool;
@@ -101757,6 +101891,20 @@ var require_tools2 = __commonJS({
     Object.defineProperty(exports2, "createSubmitPlanTool", { enumerable: true, get: function() {
       return submitPlanIteration_1.createSubmitIterationPlanTool;
     } });
+    var bash_1 = require_bash();
+    Object.defineProperty(exports2, "createBashTool", { enumerable: true, get: function() {
+      return bash_1.createBashTool;
+    } });
+    var submitFix_1 = require_submitFix();
+    Object.defineProperty(exports2, "createSubmitFixTool", { enumerable: true, get: function() {
+      return submitFix_1.createSubmitFixTool;
+    } });
+    Object.defineProperty(exports2, "FixSchema", { enumerable: true, get: function() {
+      return submitFix_1.FixSchema;
+    } });
+    Object.defineProperty(exports2, "SUBMIT_FIX_TOOL_NAME", { enumerable: true, get: function() {
+      return submitFix_1.SUBMIT_FIX_TOOL_NAME;
+    } });
     var TOOL_NAMES;
     (function(TOOL_NAMES2) {
       TOOL_NAMES2["READ_FILE"] = "read_file";
@@ -101766,6 +101914,7 @@ var require_tools2 = __commonJS({
       TOOL_NAMES2["LIST_DIR"] = "list_dir";
       TOOL_NAMES2["GREP"] = "grep";
       TOOL_NAMES2["GLOB"] = "glob";
+      TOOL_NAMES2["BASH"] = "bash";
     })(TOOL_NAMES || (exports2.TOOL_NAMES = TOOL_NAMES = {}));
   }
 });
@@ -120940,18 +121089,15 @@ var require_NaiveFixerAgent = __commonJS({
     };
     Object.defineProperty(exports2, "__esModule", { value: true });
     exports2.NaiveFixerAgent = void 0;
-    var zod_1 = require_zod();
     var ditto_codegen_types_12 = require_dist4();
+    var codegen_common_logic_1 = require_dist12();
     var dedent_1 = __importDefault2(require_dedent());
-    var codeGenerationService_12 = require_codeGenerationService();
     var constants_1 = require_constants2();
-    var BatchFixSchema = zod_1.z.object({
-      fixedContent: zod_1.z.string().describe("The complete fixed file content with all errors resolved"),
-      summary: zod_1.z.string().describe("Brief summary of what was fixed in the file")
-    });
+    var customAnthropicProvider_1 = require_customAnthropicProvider();
+    var tools_1 = require_tools2();
     var NaiveFixerAgent = class {
       constructor() {
-        this.name = "BatchFixAgent";
+        this.name = "NaiveFixerAgent";
       }
       formatErrors(errors) {
         return errors.map((error48, index) => `${index + 1}. Line ${error48.line}, Column ${error48.column}${error48.errorCode ? ` (${error48.errorCode})` : ""}: ${error48.message}`).join("\n");
@@ -120960,52 +121106,97 @@ var require_NaiveFixerAgent = __commonJS({
         if (!previousErrors || previousErrors.length === 0) {
           return "";
         }
-        return `The following errors persisted after your last fix attempt.
-Please try a DIFFERENT approach to solve them:
-${previousErrors.map((err) => `- ${err}`).join("\n")}`;
+        return (0, dedent_1.default)`
+      The following errors persisted after your last fix attempt.
+      Please try a DIFFERENT approach to solve them:
+      ${previousErrors.map((err) => `- ${err}`).join("\n")}
+    `;
       }
-      async fixFileWithMultipleErrors(input) {
-        const systemPrompt = (0, dedent_1.default)`You are an expert TypeScript/JavaScript developer. Your task is to fix ALL compilation errors in a file by providing the complete corrected file content.
+      buildSystemPrompt() {
+        return (0, dedent_1.default)`You are an expert TypeScript/JavaScript developer. Your task is to fix ALL compilation errors in a file.
 
 Key principles:
 1. Fix ALL errors listed in the input
 2. Make minimal changes - only fix what's broken
 3. Preserve code style and formatting as much as possible
 4. Return the COMPLETE file content, not just diffs
-5. Use block replacements instead of line-by-line changes
-6. Think like Cursor - analyze the context and make intelligent fixes
+5. Think like Cursor - analyze the context and make intelligent fixes
+
+HANDLING TS2307 "Cannot find module" ERRORS:
+- When you see error code TS2307 with message "Cannot find module 'X'":
+  1. FIRST, use the bash tool to run: npm install <package-name>
+  2. Example: For "Cannot find module '@wix/stores'", run: npm install @wix/stores
+  3. After installing, the error should be resolved
+  4. If the package name is unclear, extract it from the import statement
+- DO NOT try to fix TS2307 by changing import paths - install the package instead!
+
+WORKFLOW:
+1. Analyze the errors to understand what needs fixing
+2. For TS2307 errors: Use bash tool to npm install the missing package(s)
+3. For other errors: Read the file if needed, then determine the fix
+4. Submit your fix using the submit_fix tool
+
+Common TypeScript errors and fixes:
+- TS2307 (Cannot find module): Use npm install
+- Type mismatches: Fix the type annotation or value
+- Missing imports: Add the import statement
+- Undefined variables: Declare or import the variable
+- Syntax errors: Fix the syntax
 
-Focus on common TypeScript errors:
-- Missing imports
-- Type mismatches
-- Undefined variables
-- Syntax errors
-- Missing semicolons or brackets
-- Incorrect component props`;
+IMPORTANT:
+- ALWAYS call submit_fix when done, even if you only ran npm install
+- If npm install was the only action needed, return the original file content unchanged
+- Be efficient - don't read files unnecessarily if you have the content`;
+      }
+      async fixFileWithMultipleErrors(input) {
         const errorsList = this.formatErrors(input.errors);
         const previousErrorsSection = this.formatPreviousErrors(input.previousErrors);
-        const userMessage = `File: ${input.filePath}
-Language: ${input.language}
+        const userMessage = (0, dedent_1.default)`
+      File: ${input.filePath}
+      Language: ${input.language}
 
-ERRORS TO FIX:
-${errorsList}
+      ERRORS TO FIX:
+      ${errorsList}
 
-CURRENT FILE CONTENT:
-${input.content}
+      CURRENT FILE CONTENT:
+      ${input.content}
 
-${previousErrorsSection}
+      ${previousErrorsSection}
 
-Please provide the complete fixed file content that resolves ALL the errors listed above.`;
+      Instructions:
+      1. Analyze the errors above
+      2. For TS2307 errors, use npm install via the bash tool
+      3. For other errors, fix the code
+      4. Call submit_fix with the complete fixed file content
+    `;
         try {
-          const result = await codeGenerationService_12.codegenAIProxyService.generateCodegenObject({
-            userMessage,
-            systemPrompt,
-            provider: constants_1.LLM_PROVIDERS.ANTHROPIC,
-            model: constants_1.LLM_MODELS.CLAUDE_SONNET_4_5_20250929,
-            schema: BatchFixSchema,
+          console.log(`\u{1F527} NaiveFixerAgent starting fix for ${input.filePath}...`);
+          const model = (0, customAnthropicProvider_1.createCustomTextModel)()(constants_1.LLM_MODELS.CLAUDE_SONNET_4_5_20250929, {
             agentName: this.name
           });
-          return result.object;
+          const result = await (0, codegen_common_logic_1.generateAgentText)({
+            agentName: this.name,
+            model,
+            tools: {
+              [tools_1.TOOL_NAMES.READ_FILE]: (0, tools_1.createReadFileTool)(input.projectDir),
+              [tools_1.TOOL_NAMES.EDIT_FILE]: (0, tools_1.createEditFileTool)(input.projectDir),
+              [tools_1.TOOL_NAMES.BASH]: (0, tools_1.createBashTool)(input.projectDir),
+              [tools_1.SUBMIT_FIX_TOOL_NAME]: (0, tools_1.createSubmitFixTool)()
+            },
+            systemPrompt: this.buildSystemPrompt(),
+            userMessage,
+            stopWhen: (0, codegen_common_logic_1.stopOnToolCall)(tools_1.SUBMIT_FIX_TOOL_NAME)
+          });
+          const fixResult = (0, codegen_common_logic_1.extractToolResult)(result.toolCalls, tools_1.SUBMIT_FIX_TOOL_NAME);
+          if (!fixResult) {
+            const toolCallsMade = result.toolCalls.map((tc) => tc.toolName).join(", ");
+            throw new Error(`NaiveFixerAgent did not submit a fix. Tool calls made: ${toolCallsMade || "none"}. Agent response: ${result.text?.slice(0, 200) || "no response"}`);
+          }
+          console.log(`\u{1F527} NaiveFixerAgent fix submitted for: ${fixResult.filePath}`);
+          return {
+            fixedContent: fixResult.fixedContent,
+            summary: fixResult.summary
+          };
         } catch (error48) {
           const isTokenLimitError = error48.response?.body?.stop_reason === "max_tokens" || error48.finishReason === "length" || error48.cause?.response?.body?.stop_reason === "max_tokens";
           if (isTokenLimitError) {
@@ -121193,6 +121384,7 @@ var require_NaiveErrorFixer = __commonJS({
         const fixerAgent = new NaiveFixerAgent_1.NaiveFixerAgent();
         try {
           const batchResult = await fixerAgent.fixFileWithMultipleErrors({
+            projectDir,
             filePath,
             content: originalContent,
             errors: errors.map((error48) => ({

package/dist/wix-cli-templates/src/site/components/my-component/manifest.json

@@ -1,4 +1,16 @@
 {
+  "installation": {
+    "staticContainer": "HOMEPAGE",
+    "initialSize": {
+      "width": {
+        "sizingType": "pixels",
+        "pixels": 300
+      },
+      "height": {
+        "sizingType": "content"
+      }
+    }
+  },
   "editorElement": {
     "data": {
       "text": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/ditto-codegen-public",
-  "version": "1.0.233",
+  "version": "1.0.235",
   "description": "AI-powered Wix CLI app generator - standalone executable",
   "scripts": {
     "build": "node build.mjs",
@@ -28,5 +28,5 @@
     "@wix/ditto-codegen": "1.0.0",
     "esbuild": "^0.27.2"
   },
-  "falconPackageHash": "f39f618fd9cbd9d550710b93c0c320e698a4f765b6ab9811a5770761"
+  "falconPackageHash": "6b7a1cb4911d370c9363bfcfe9d315a2e67475c115ea6ecae8c33fcf"
 }