@wix/ditto-codegen-public 1.0.49 → 1.0.50

package/dist/out.js

@@ -120276,19 +120276,19 @@ var require_utils14 = __commonJS({
       return mod2 && mod2.__esModule ? mod2 : { "default": mod2 };
     };
     Object.defineProperty(exports2, "__esModule", { value: true });
-    exports2.getErrorMessage = exports2.buildUserPromptForCodeGenerationAgent = exports2.getHttpClient = exports2.withCaching = exports2.FileSchema = void 0;
+    exports2.getErrorMessage = exports2.buildUserPromptForCodeGenerationAgent = exports2.getHttpClient = exports2.withCaching = exports2.FileSchema = exports2.FileItemSchema = void 0;
     exports2.loadRelevantFilesAsString = loadRelevantFilesAsString;
     var zod_1 = require_zod();
     var http_client_1 = require_index_node();
     var fs_1 = __importDefault2(require("fs"));
     var path_1 = __importDefault2(require("path"));
-    var FileItemSchema = zod_1.z.object({
+    exports2.FileItemSchema = zod_1.z.object({
       operation: zod_1.z.enum(["insert", "update", "delete"]).describe("File operation: insert (new file), update (modify existing), delete (remove file)").default("insert"),
       path: zod_1.z.string().describe("Relative file path from project root").optional(),
       content: zod_1.z.string().describe("Complete file content as a string (for JSON files, stringify the object). Required for insert and update operations.").optional()
     });
     exports2.FileSchema = zod_1.z.object({
-      files: zod_1.z.array(FileItemSchema).default([])
+      files: zod_1.z.array(exports2.FileItemSchema).default([])
     });
     var withCaching = (ttl = "5m") => {
       return {
@@ -120384,6 +120384,11 @@ ${JSON.stringify(planAndResources.createdCollections, null, 2)}`);
         contextSections.push(`
 ## API SPEC
 ${JSON.stringify(planAndResources.apiSpec, null, 2)}`);
+      }
+      if (planAndResources?.embeddedScriptParameters) {
+        contextSections.push(`
+## EMBEDDED SCRIPT PARAMETERS
+${JSON.stringify(planAndResources.embeddedScriptParameters, null, 2)}`);
       }
       const userMessage = `${primaryAction}:
 ${contextSections.join("\n")}`;
@@ -120502,6 +120507,7 @@ var require_load_examples = __commonJS({
             "site-popup/src/components/site-popup-settings.tsx",
             "site-popup/src/components/activation-configuration.tsx",
             "site-popup/src/components/close-button.tsx",
+            "site-popup/src/components/close-button.css",
             "site-popup/src/components/date-range-picker.tsx",
             "site-popup/src/components/image-picker.tsx",
             "site-popup/src/components/popup/index.tsx",
@@ -120512,7 +120518,11 @@ var require_load_examples = __commonJS({
             "site-popup/src/site/embedded-scripts/site-popup/embedded.html",
             "site-popup/src/site/embedded-scripts/site-popup/popup-overlay/index.tsx",
             "site-popup/src/site/embedded-scripts/site-popup/popup-overlay/index.css",
-            "site-popup/src/types.ts"
+            "site-popup/src/types.ts",
+            "site-popup/src/components/popup/index.tsx",
+            "site-popup/src/components/popup/index.css",
+            "site-popup/src/components/close-button.tsx",
+            "site-popup/src/components/close-button.css"
           ]
         }
       },
@@ -120555,12 +120565,30 @@ var require_load_examples = __commonJS({
         files: {
           [types.DashboardPage]: ["survey-manager/src/dashboard/pages/page.tsx"]
         }
+      },
+      EventCountdown: {
+        path: "event-countdown",
+        description: "A dashboard app that allows administrators to create and manage countdown timers for events",
+        files: {
+          [types.DashboardPage]: [
+            "event-countdown/src/dashboard/pages/countdown-timer-settings/page.tsx",
+            "event-countdown/src/components/countdown-timer-settings.tsx",
+            "event-countdown/src/components/countdown-preview.tsx",
+            "event-countdown/src/types.ts",
+            "event-countdown/src/dashboard/withProviders.tsx"
+          ],
+          [types.EmbeddedScript]: [
+            "event-countdown/src/site/embedded-scripts/countdown-timer/embedded.html"
+          ]
+        }
       }
     };
     exports2.examples = {
       [types.APIExtension]: [appsExamples.AIChatbot],
       [types.DashboardPage]: [
         appsExamples.SurveyManager,
+        appsExamples.EventCountdown,
+        appsExamples.SitePopup,
         appsExamples.AIChatbot,
         appsExamples.CustomProductsCatalog,
         appsExamples.MixPanelAnalystic,
@@ -120571,7 +120599,8 @@ var require_load_examples = __commonJS({
       ],
       [types.EmbeddedScript]: [
         appsExamples.MixPanelAnalystic,
-        appsExamples.SitePopup
+        appsExamples.SitePopup,
+        appsExamples.EventCountdown
       ],
       [types.ServicePluginExtension]: [appsExamples.SPISExample],
       [types.CustomElementPlugin]: [appsExamples.InventoryCountdown],
@@ -120866,9 +120895,7 @@ Your output must be strictly JSON that conforms to the provided schema (no markd
 Expected plan (abbreviated):
 
 \`\`\`
-${JSON.stringify({
-      apiSpec: todoExample
-    }, null, 2)}
+${JSON.stringify(todoExample, null, 2)}
 \`\`\`
 </example_output>
 
@@ -120914,6 +120941,7 @@ Your output must be strictly JSON that conforms to the provided schema (no markd
 - Do NOT create audit, transaction, log, history, or analytics collections unless the blueprint explicitly requests them.
 - If the blueprint does not request persistent data, do not create any collections.
 - For static or hardcoded behaviors, at most create one minimal read-only configuration collection only when strictly necessary.
+- NEVER create CMS collections to store embedded script configuration parameters. Embedded script parameters (colors, messages, positions, display settings, etc.) are ALREADY persisted via the embeddedScripts API and are managed through embeddedScriptParameters. Creating duplicate CMS collections for this data is redundant and incorrect.
 </constraints>
 
 <typing_rules>
@@ -120963,6 +120991,11 @@ For the collections field, return:
 2) Propose collections only when the blueprint clearly requires persistent data. Define only the fields that are strictly required to fulfill the blueprint's functionality.
 3) For any field that references products, categories, or orders: ALWAYS use REFERENCE type with proper typeMetadata.
 4) Pick clear collection ids derived from the domain, lower-kebab or lower_underscore; avoid spaces.
+5) Avoid Duplicate Data Storage:
+   - Embedded script parameters (defined in embeddedScriptParameters) are ALREADY saved and persisted via the embeddedScripts API
+   - NEVER create CMS collections that duplicate these parameters (colors, messages, positions, display settings, etc.)
+   - CMS collections should ONLY be created for additional business data that is NOT covered by embeddedScriptParameters
+   - Only create CMS collections if there's genuinely new data needed beyond what's in embeddedScriptParameters (e.g., user-generated content, analytics, logs if explicitly requested)
 </approach>
 
 </CMS_PLANNER_SYSTEM_PROMPT>
@@ -120971,6 +121004,183 @@ For the collections field, return:
   }
 });
 
+// dist/system-prompts/planner/dynamicParameters.js
+var require_dynamicParameters = __commonJS({
+  "dist/system-prompts/planner/dynamicParameters.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.dynamicParametersPrompt = void 0;
+    var dynamicParametersPrompt = () => `
+<DYNAMIC_PARAMETERS_PLANNER_SYSTEM_PROMPT>
+
+<role>
+You are a Wix CLI planner expert specialized in determining dynamic parameters for embedded scripts. Given a blueprint with EMBEDDED_SCRIPT extensions, you must decide if the embedded script needs dynamic parameters that can be configured via the dashboard, and if so, define them.
+</role>
+
+<description>
+Dynamic parameters allow embedded scripts to be configurable through a dashboard interface. They are template variables ({{variableName}}) that get replaced with actual values set by the site owner in the dashboard.
+
+Common use cases:
+- Configuration values (API keys, script settings, display options)
+- Content that changes (headlines, messages, display text)
+- Visual customization (colors, sizes, images)
+- Timing and scheduling (dates, durations, intervals)
+- Feature toggles (enable/disable functionality)
+</description>
+
+<when_to_use_dynamic_parameters>
+Use dynamic parameters when:
+- The embedded script needs configurable values that site owners should be able to change
+- The script's behavior or appearance should be customizable without code changes
+- Different instances or configurations are needed for different sites
+- Content, styling, or functionality needs to be adjusted through a UI
+
+Do NOT use dynamic parameters when:
+- The script is fully static and requires no configuration
+- All values are hardcoded and never need to change
+</when_to_use_dynamic_parameters>
+
+<output_structure>
+Your output must include an array of embeddedScriptParameters. This array can be:
+- Empty array [] if there are no EMBEDDED_SCRIPT extensions in the blueprint or no dynamic parameters are needed
+- Array of embedded script parameter objects if there are EMBEDDED_SCRIPT extensions
+
+Each embedded script parameter object contains:
+- extensionId (string): The name of the embedded script extension these parameters belong to (use the extension.name field)
+- parameters (array): Array of dynamic parameter definitions
+
+Each dynamic parameter must include:
+- key (string, lowerCamelCase): The template variable name used as {{key}} in the embedded script
+- displayName (string): Human-readable label for the dashboard UI
+- type (ParameterType): The data type of the parameter
+- description (string, optional): Help text explaining the parameter's purpose
+- required (boolean): Whether the parameter must have a value
+- defaultValue (string, optional): Default value if not set by the user
+- options (array of strings, optional): For SELECT type parameters, the available options
+
+Example output structures:
+
+No embedded script extensions:
+ []
+
+With embedded script extensions:
+  [
+    {
+      "extensionId": "site-popup",
+      "parameters": [
+        { "key": "headline", "displayName": "Headline", "type": "TEXT", "required": true },
+        { "key": "text", "displayName": "Text", "type": "TEXTAREA", "required": true }
+      ]
+    }
+  ]
+
+Supported parameter types:
+- TEXT: Single-line text input
+- TEXTAREA: Multi-line text input
+- NUMBER: Numeric input
+- BOOLEAN: Checkbox or toggle
+- IMAGE: Image picker
+- DATE: Date picker
+- DATETIME: Date and time picker
+- URL: URL input with validation
+- SELECT: Dropdown with predefined options (must include options array)
+- COLOR: Color picker
+</output_structure>
+
+<examples>
+
+Example 1 - Site Popup (dynamic parameters needed):
+Blueprint: A popup that appears on the site with configurable message and timing
+Extension Name: "site-popup"
+Output:
+  [
+    {
+      "extensionId": "site-popup",
+      "parameters": [
+        {
+          "key": "headline",
+          "displayName": "Headline",
+          "type": "TEXT",
+          "description": "The main headline shown in the popup",
+          "required": true,
+          "defaultValue": "Sale 20% Off"
+        },
+        {
+          "key": "text",
+          "displayName": "Text",
+          "type": "TEXTAREA",
+          "description": "The message content of the popup",
+          "required": true,
+          "defaultValue": "Sign up and get 20% off on our Winter Sale"
+        },
+        {
+          "key": "imageUrl",
+          "displayName": "Image",
+          "type": "IMAGE",
+          "description": "The image displayed in the popup",
+          "required": false
+        },
+        {
+          "key": "imageTitle",
+          "displayName": "Image Title",
+          "type": "TEXT",
+          "description": "Alt text for the popup image",
+          "required": false
+        },
+        {
+          "key": "activationMode",
+          "displayName": "Activation Mode",
+          "type": "SELECT",
+          "description": "When the popup should be active",
+          "required": true,
+          "defaultValue": "active",
+          "options": ["active", "timed", "disabled"]
+        },
+        {
+          "key": "startDate",
+          "displayName": "Start Date",
+          "type": "DATE",
+          "description": "Start date for timed activation",
+          "required": false
+        },
+        {
+          "key": "endDate",
+          "displayName": "End Date",
+          "type": "DATE",
+          "description": "End date for timed activation",
+          "required": false
+        }
+      ]
+    }
+  ]
+
+Example 2 - Static Pixel (no dynamic parameters needed):
+Blueprint: Add a Facebook Pixel with a hardcoded pixel ID
+Extension Name: "facebook-pixel"
+Output: []
+
+</examples>
+
+<guidelines>
+- If there are NO EMBEDDED_SCRIPT extensions in the blueprint, return an empty array: "embeddedScriptParameters": []
+- If there are EMBEDDED_SCRIPT extensions, ONLY include them if they truly need configurable parameters
+- The extensionId MUST match the exact name of the embedded script extension from the blueprint
+- Only define parameters that truly need to be configurable by the site owner
+- Keep parameter keys descriptive and in lowerCamelCase
+- Provide clear displayName and description for each parameter
+- Set appropriate required flags based on functionality needs
+- Choose the most appropriate type for the data
+- For SELECT types, MUST include the options array with all possible values
+- Consider grouping related parameters (e.g., activation settings, appearance settings)
+- Default values should be sensible and demonstrate the expected format
+</guidelines>
+
+</DYNAMIC_PARAMETERS_PLANNER_SYSTEM_PROMPT>
+`;
+    exports2.dynamicParametersPrompt = dynamicParametersPrompt;
+  }
+});
+
 // dist/system-prompts/planner/planner.js
 var require_planner = __commonJS({
   "dist/system-prompts/planner/planner.js"(exports2) {
@@ -120979,13 +121189,18 @@ var require_planner = __commonJS({
     exports2.plannerPrompt = void 0;
     var apiSpec_1 = require_apiSpec();
     var data_1 = require_data2();
-    var plannerPrompt = () => `
+    var dynamicParameters_1 = require_dynamicParameters();
+    var plannerPrompt = (hasEmbeddedScriptExtensions, hasBackendApiExtensions) => {
+      return `
 <WIXCLI_PLANNER_SYSTEM_PROMPT>
 ${(0, data_1.cmsPlannerPrompt)()}
 
-${(0, apiSpec_1.apiSpecPrompt)()}
+${hasBackendApiExtensions ? (0, apiSpec_1.apiSpecPrompt)() : "No backend API extensions in the blueprint, return an empty object: {}"}
+
+${hasEmbeddedScriptExtensions ? (0, dynamicParameters_1.dynamicParametersPrompt)() : 'No embeddedScriptParameters needed, no embedded scripts in the blueprint, return an empty array: "embeddedScriptParameters": []'}
 </WIXCLI_PLANNER_SYSTEM_PROMPT>
 `;
+    };
     exports2.plannerPrompt = plannerPrompt;
   }
 });
@@ -122933,12 +123148,48 @@ var require_ApiSpecSchema = __commonJS({
   }
 });
 
+// dist/EmbeddedScriptSchema.js
+var require_EmbeddedScriptSchema = __commonJS({
+  "dist/EmbeddedScriptSchema.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.EmbeddedScriptParametersSchema = exports2.DynamicParameterSchema = void 0;
+    var zod_1 = require_zod();
+    var ParameterTypeEnum = zod_1.z.enum([
+      "TEXT",
+      "TEXTAREA",
+      "NUMBER",
+      "BOOLEAN",
+      "IMAGE",
+      "DATE",
+      "DATETIME",
+      "URL",
+      "SELECT",
+      "COLOR"
+    ]).describe("The data type of a dynamic parameter for embedded scripts");
+    exports2.DynamicParameterSchema = zod_1.z.object({
+      key: zod_1.z.string().describe("The template variable name used as {{key}} in the embedded script (lowerCamelCase)"),
+      displayName: zod_1.z.string().describe("Human-readable label for the dashboard UI"),
+      type: ParameterTypeEnum.describe("The data type of the parameter"),
+      description: zod_1.z.string().optional().describe("Help text explaining the parameter's purpose"),
+      required: zod_1.z.boolean().describe("Whether the parameter must have a value"),
+      defaultValue: zod_1.z.string().optional().describe("Default value if not set by the user"),
+      options: zod_1.z.array(zod_1.z.string()).optional().describe("For SELECT type parameters, the available options")
+    }).describe("A dynamic parameter definition for embedded script configuration");
+    exports2.EmbeddedScriptParametersSchema = zod_1.z.object({
+      extensionId: zod_1.z.string().describe("The name of the embedded script extension these parameters belong to"),
+      parameters: zod_1.z.array(exports2.DynamicParameterSchema).default([]).describe("Array of dynamic parameter definitions for this embedded script")
+    }).describe("Dynamic parameters configuration for a specific embedded script extension");
+  }
+});
+
 // dist/agents/PlannerAgent.js
 var require_PlannerAgent = __commonJS({
   "dist/agents/PlannerAgent.js"(exports2) {
     "use strict";
     Object.defineProperty(exports2, "__esModule", { value: true });
     exports2.PlannerAgent = exports2.PlannerOutputSchema = void 0;
+    var types_1 = require_types_impl();
     var anthropic_1 = require_dist5();
     var ai_1 = require_dist9();
     var zod_1 = require_zod();
@@ -122946,27 +123197,31 @@ var require_PlannerAgent = __commonJS({
     var CMSAgent_1 = require_CMSAgent();
     var utils_1 = require_utils14();
     var ApiSpecSchema_1 = require_ApiSpecSchema();
+    var EmbeddedScriptSchema_1 = require_EmbeddedScriptSchema();
     exports2.PlannerOutputSchema = zod_1.z.object({
-      collections: zod_1.z.array(CMSAgent_1.CmsCollectionSchema).default([]),
-      apiSpec: ApiSpecSchema_1.ApiSpecSchema.optional()
+      collections: zod_1.z.array(CMSAgent_1.CmsCollectionSchema).default([]).describe("CMS collections to be created for the app"),
+      embeddedScriptParameters: zod_1.z.array(EmbeddedScriptSchema_1.EmbeddedScriptParametersSchema).default([]).describe("Dynamic parameters for embedded script extensions (empty array if no embedded scripts)"),
+      apiSpec: ApiSpecSchema_1.ApiSpecSchema.optional().describe("API specification for the app")
     });
     var PlannerAgent = class {
       constructor(apiKey) {
         this.apiKey = apiKey;
         this.name = "PlannerAgent";
       }
-      buildSystemPrompt() {
-        return (0, planner_1.plannerPrompt)();
+      buildSystemPrompt(hasEmbeddedScriptExtensions, hasBackendApiExtensions) {
+        return (0, planner_1.plannerPrompt)(hasEmbeddedScriptExtensions, hasBackendApiExtensions);
       }
       async generate(blueprint) {
         const model = (0, anthropic_1.createAnthropic)({ apiKey: this.apiKey })("claude-3-5-haiku-latest");
+        const hasEmbeddedScriptExtensions = blueprint?.extensions?.some((ext) => ext.type === types_1.ExtensionType.EMBEDDED_SCRIPT) ?? false;
+        const hasBackendApiExtensions = blueprint?.extensions?.some((ext) => ext.type === types_1.ExtensionType.BACKEND_API) ?? false;
         const result = await (0, ai_1.generateObject)({
           model,
           schema: exports2.PlannerOutputSchema,
           messages: [
             {
               role: "system",
-              content: this.buildSystemPrompt(),
+              content: this.buildSystemPrompt(hasEmbeddedScriptExtensions, hasBackendApiExtensions),
               providerOptions: (0, utils_1.withCaching)("1h")
             },
             {
@@ -124305,7 +124560,8 @@ var require_shared = __commonJS({
     exports2.FIELD_TYPES_REFERENCE = `- TEXT: String values
 - NUMBER: Numeric values
 - BOOLEAN: true/false
-- DATE: ISO date strings (e.g., "2024-01-15T10:30:00.000Z")
+- DATE: Date-only strings in YYYY-MM-DD format (e.g., "2024-01-15")
+- DATETIME: ISO 8601 datetime strings (e.g., "2024-01-15T10:30:00.000Z")
 - RICH_TEXT: HTML formatted strings
 - IMAGE: Image URLs or empty strings
 - REFERENCE: Object references - NEVER use null, undefined, or generate sample data. Return empty dataItems array [] for collections with REFERENCE fields
@@ -126346,6 +126602,273 @@ async function updateTodo(id: string, todo: Partial<Todo>): Promise<Todo> {
   }
 });
 
+// dist/system-prompts/dashboardPage/dynamicParameters.js
+var require_dynamicParameters2 = __commonJS({
+  "dist/system-prompts/dashboardPage/dynamicParameters.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.dynamicParametersManagementPrompt = void 0;
+    var dynamicParametersManagementPrompt = () => {
+      return `
+<DYNAMIC_PARAMETERS_MANAGEMENT>
+
+<description>
+This dashboard page manages dynamic parameters for an embedded script. The parameters are configurable values that site owners can set through this dashboard interface, and they will be passed to the embedded script as template variables.
+
+IMPORTANT: Only implement UI for parameters that are relevant to your current use case. Ignore parameters that don't apply to the functionality you're building. It's perfectly fine to not use all parameters if they're not applicable.
+</description>
+
+<implementation_requirements>
+
+1. Import embeddedScripts:
+   - Import embeddedScripts directly from '@wix/app-management'
+   - Use embeddedScripts.getEmbeddedScript() to load parameters
+   - Use embeddedScripts.embedScript({ parameters }) to save parameters
+   - Example:
+     import { embeddedScripts } from '@wix/app-management';
+
+2. Type Definition:
+   - Create a TypeScript type/interface that includes all the dynamic parameters
+   - Example:
+     export type MyScriptOptions = {
+       headline: string;
+       text: string;
+       imageUrl: string;
+       activationMode: 'active' | 'timed' | 'disabled';
+       startDate?: string;
+       endDate?: string;
+     };
+
+3. State Management:
+   - Use React useState to manage the parameter values locally
+   - Initialize with default values for all parameters
+   - Add separate state for isLoading and isSaving
+   - Use useEffect to load parameters on mount
+   - IMPORTANT: Parameters are returned as strings from the API, so you must handle type conversions:
+     * BOOLEAN parameters: Convert from string 'true'/'false' to boolean
+     * NUMBER parameters: Convert from string to number using Number()
+     * Other types: Use as-is
+   - Example:
+     const [options, setOptions] = useState<MyScriptOptions>(defaultOptions);
+     const [isLoading, setIsLoading] = useState(true);
+     const [isSaving, setIsSaving] = useState(false);
+
+     useEffect(() => {
+       const loadSettings = async () => {
+         try {
+           const embeddedScript = await embeddedScripts.getEmbeddedScript();
+           const data = embeddedScript.parameters as Partial<Record<keyof MyScriptOptions, string>> || {};
+
+           setOptions((prev) => ({
+             ...prev,
+             textField: data?.textField || prev.textField,
+             booleanField: data?.booleanField === 'true' ? true : data?.booleanField === 'false' ? false : prev.booleanField,
+             numberField: Number(data?.numberField) || prev.numberField,
+           }));
+         } catch (error) {
+           console.error('Failed to load settings:', error);
+         } finally {
+           setIsLoading(false);
+         }
+       };
+
+       loadSettings();
+     }, []);
+
+4. Loading State:
+   - Show a Loader component while isLoading is true
+   - Example:
+     {isLoading ? (
+       <Box align="center" verticalAlign="middle" height="50vh">
+         <Loader text="Loading..." />
+       </Box>
+     ) : (
+       // ... form content
+     )}
+
+5. Form Components:
+   - IMPORTANT: Only create form fields for parameters relevant to your use case
+   - Skip parameters that don't apply to the functionality being built
+   - Create appropriate WDS form fields based on parameter types:
+     * TEXT \u2192 Input component with FormField
+     * TEXTAREA \u2192 InputArea component with FormField
+     * NUMBER \u2192 Input component with type="number"
+     * BOOLEAN \u2192 Checkbox or ToggleSwitch
+     * IMAGE \u2192 Custom ImagePicker component (see components/image-picker.tsx)
+     * DATE \u2192 DatePicker component
+     * SELECT \u2192 Dropdown component with options
+     * URL \u2192 Input with URL validation
+   - Use FormField wrapper for labels and validation messages
+   - Set required validation based on parameter.required flag
+   - Show validation errors using FormField status and statusMessage props
+
+6. Save Functionality:
+   - Add a Save button in the Page.Header actionsBar
+   - Make handleSave an async function
+   - CRITICAL: All parameters must be passed as STRING values because they are used as template variables in the embedded script
+   - Convert all values to strings before saving:
+     * BOOLEAN: Use String(value) or value.toString()
+     * NUMBER: Use String(value) or value.toString()
+     * Other types: Already strings, use as-is
+   - Disable the Save button if required fields are missing or while saving
+   - Add proper error handling
+
+7. Form Validation:
+   - Implement validation for required fields
+   - Show error states on FormField components
+   - Display clear error messages
+
+8. Layout and Organization:
+   - Use Card components to group related fields
+   - Use Box with direction="vertical" for form layout
+   - Add appropriate spacing with gap props
+   - Include helpful descriptions using Card subtitle or FormField infoContent
+   - Consider creating a separate settings component for complex forms
+
+9. Preview Component (Optional but Recommended):
+   - If applicable, create a preview component that shows how the configuration will look
+   - Display the preview alongside the settings form using Layout and Cell components
+   - The preview should react to parameter changes in real-time
+
+</implementation_requirements>
+
+<parameter_type_mapping>
+
+<example_implementation>
+See the generated site-popup example for a complete reference implementation:
+- src/dashboard/withProviders.tsx - Provider wrapper with WDS
+- src/dashboard/pages/page.tsx - Dashboard page with parameter management (wrapped with withProviders)
+- src/components/site-popup-settings.tsx - Settings form component
+- src/types.ts - Type definitions
+
+Key implementation patterns from the example:
+1. withProviders.tsx wraps the component with WixDesignSystemProvider
+2. page.tsx exports the component wrapped: export default withProviders(MyComponent)
+3. Parameters are saved as individual string fields, not as JSON
+4. Parameters are loaded with proper type conversion (string to boolean, string to number, etc.)
+5. Use embeddedScripts directly from '@wix/app-management'
+</example_implementation>
+
+<file_generation_requirements>
+When dynamic parameters are present, you MUST generate these files:
+1. src/dashboard/withProviders.tsx - Provider wrapper (REQUIRED for WDS)
+2. src/dashboard/pages/page.tsx - The main dashboard page component
+3. src/types.ts - Type definitions for the parameters (if needed)
+4. Any additional component files (settings forms, previews, etc.)
+
+The withProviders.tsx is NOT optional - it must always be generated when there are dynamic parameters.
+</file_generation_requirements>
+
+<provider_wrapper_implementation>
+You MUST generate the following file: src/dashboard/withProviders.tsx
+
+This file is REQUIRED to wrap dashboard components with the Wix Design System provider.
+
+import React from 'react';
+import { WixDesignSystemProvider } from '@wix/design-system';
+import { i18n } from '@wix/essentials';
+
+export default function withProviders<P extends {} = {}>(Component: React.FC<P>) {
+  return function DashboardProviders(props: P) {
+    const locale = i18n.getLocale();
+    return (
+      <WixDesignSystemProvider locale={locale} features={{ newColorsBranding: true }}>
+        <Component {...props} />
+      </WixDesignSystemProvider>
+    );
+  };
+}
+
+// Also export as named export for backwards compatibility
+export { withProviders };
+
+This file must be included in your generated files output.
+</provider_wrapper_implementation>
+
+<using_provider_wrapper>
+In your dashboard page component (page.tsx):
+1. Import the withProviders wrapper: import withProviders from '../../withProviders';
+2. Import embeddedScripts from '@wix/app-management'
+3. DO NOT wrap your component with WixDesignSystemProvider - the provider wrapper does this
+4. Export the component wrapped with withProviders: export default withProviders(MyComponent);
+5. Your component should only contain the Page component and its content, not providers
+
+Example structure:
+import { useEffect, useState, type FC } from 'react';
+import { dashboard } from '@wix/dashboard';
+import { embeddedScripts } from '@wix/app-management';
+import { Page, Card, Button, ... } from '@wix/design-system';
+import '@wix/design-system/styles.global.css';
+import withProviders from '../../withProviders';
+
+const MyDashboardPage: FC = () => {
+  const [options, setOptions] = useState<MyScriptOptions>(defaultOptions);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    const loadSettings = async () => {
+      try {
+        const embeddedScript = await embeddedScripts.getEmbeddedScript();
+        const data = embeddedScript.parameters || {};
+        // ... update options with data
+      } catch (error) {
+        console.error('Failed to load settings:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadSettings();
+  }, []);
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      await embeddedScripts.embedScript({ parameters: { /* ... */ } });
+      dashboard.showToast({ message: 'Saved!', type: 'success' });
+    } catch (error) {
+      console.error('Failed to save:', error);
+      dashboard.showToast({ message: 'Failed to save', type: 'error' });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <Page height="100vh">
+      {/* Page content - NO WixDesignSystemProvider here */}
+    </Page>
+  );
+};
+
+export default withProviders(MyDashboardPage);
+</using_provider_wrapper>
+
+<critical_notes>
+- Only implement UI for parameters that are relevant to your specific use case - ignore parameters that don't apply
+- ALWAYS generate withProviders.tsx when there are dynamic parameters
+- ALWAYS wrap the dashboard page export with withProviders()
+- DO NOT use WixDesignSystemProvider directly in the dashboard page component - use withProviders instead
+- ALWAYS use embeddedScripts directly from '@wix/app-management'
+- ALWAYS convert parameter values to strings when saving (embeddedScripts.embedScript must receive all string values in the parameters object)
+- ALWAYS convert string parameters back to proper types when loading (e.g., 'true' -> true for booleans, string to number for numbers)
+- ALWAYS handle the loading state with isLoading state variable
+- ALWAYS handle the saving state with isSaving state variable
+- ALWAYS add try/catch blocks for async operations (loading and saving)
+- ALWAYS use async/await for embeddedScripts operations
+- ALWAYS merge parameter values correctly in useEffect with proper type conversions
+- ALWAYS validate required fields and show appropriate error states
+- The parameter keys MUST match exactly what is expected in the embedded script template variables
+- Each parameter is saved as a separate field, NOT as a JSON string
+</critical_notes>
+
+</DYNAMIC_PARAMETERS_MANAGEMENT>
+`;
+    };
+    exports2.dynamicParametersManagementPrompt = dynamicParametersManagementPrompt;
+  }
+});
+
 // dist/system-prompts/dashboardPage/dashboardPagePrompt.js
 var require_dashboardPagePrompt = __commonJS({
   "dist/system-prompts/dashboardPage/dashboardPagePrompt.js"(exports2) {
@@ -126357,6 +126880,7 @@ var require_dashboardPagePrompt = __commonJS({
     var wdsPackage_1 = require_wdsPackage();
     var data_1 = require_data3();
     var apiSpecPrompt_1 = require_apiSpecPrompt();
+    var dynamicParameters_1 = require_dynamicParameters2();
     var wdsPackage_2 = require_wdsPackage();
     Object.defineProperty(exports2, "buildWdsSystemPrompt", { enumerable: true, get: function() {
       return wdsPackage_2.buildWdsSystemPrompt;
@@ -126386,7 +126910,7 @@ var require_dashboardPagePrompt = __commonJS({
       "ToggleSwitch",
       "InfoIcon"
     ];
-    var dashboardPagePrompt = async ({ useData, useApiSpec }) => {
+    var dashboardPagePrompt = async ({ useData, useApiSpec, useDynamicParameters }) => {
       const wdsPrompt = await (0, wdsPackage_1.buildWdsSystemPrompt)(listOfWdsComponents);
       return `
 <WIXCLI_DASHBOARD_PAGE_SYSTEM_PROMPT>
@@ -126469,6 +126993,8 @@ ${wdsPrompt}
 ${useData ? data_1.dataPrompt : ""}
 
 ${useApiSpec ? apiSpecPrompt_1.apiSpecPrompt : ""}
+
+${useDynamicParameters ? (0, dynamicParameters_1.dynamicParametersManagementPrompt)() : ""}
 </WIXCLI_DASHBOARD_PAGE_SYSTEM_PROMPT>
 `;
     };
@@ -126500,7 +127026,8 @@ var require_DashboardPageAgent = __commonJS({
         const examples = (0, load_examples_1.loadExamples)([load_examples_1.types.DashboardPage]);
         const useData = Boolean(planAndResources?.createdCollections?.length);
         const useApiSpec = Boolean(planAndResources?.apiSpec);
-        const systemPrompt = `${await this.buildSystemPrompt({ useData, useApiSpec })}
+        const useDynamicParameters = Boolean(planAndResources?.embeddedScriptParameters?.length);
+        const systemPrompt = `${await this.buildSystemPrompt({ useData, useApiSpec, useDynamicParameters })}
 ${examples}
 `;
         console.log(`Dashboard Agent System Prompt length: ${systemPrompt.length} (is that what you expect?)`);
@@ -126659,6 +127186,7 @@ Auto-patterns is suitable for:
 
 <custom-code-needed-for>
 Custom code is required for:
+- Embedded script parameter management
 - Custom business logic or calculations
 - Complex workflows or state management
 - External API integrations or webhooks
@@ -126672,12 +127200,36 @@ Custom code is required for:
 </custom-code-needed-for>
 
 <task>
-1. Analyze the dashboard page description and the available collections
-2. Decide whether auto-patterns is sufficient or if custom code is needed
-3. If auto-patterns is suitable, generate the complete schema for the SINGLE most relevant collection
+1. Analyze the dashboard page description and determine what functionality is actually needed
+2. Consider only the collections and embedded script parameters that are RELEVANT to this specific dashboard page
+3. Decide whether auto-patterns is sufficient or if custom code is needed
+4. If auto-patterns is suitable, generate the complete schema for the SINGLE most relevant collection
 
-IMPORTANT:
+IMPORTANT: Focus only on what's relevant to the current use case. Not all collections or parameters need to be used.
+
+CRITICAL: EMBEDDED SCRIPT SETTINGS/CONFIGURATION PAGES
+You will receive information about embedded script parameters in the <embedded-script-parameters> section.
+
+IMPORTANT: Only consider embedded script parameters that are RELEVANT to the current dashboard page use case.
+- Some embedded script parameters may exist but not be relevant to this specific dashboard page
+- Only return useAutoPatterns: false if the dashboard page is actually meant to configure those parameters
+- Ignore embedded script parameters that don't apply to the current functionality
+
+Return useAutoPatterns: false if:
+1. The dashboard page description specifically mentions configuring/managing embedded script settings
+2. The dashboard page is clearly meant to configure widgets, scripts, or embedded functionality
+3. The embedded script parameters are directly relevant to what this dashboard page should do
+
+Do NOT return useAutoPatterns: false just because parameters exist - only if they're relevant to this page.
+
+IMPORTANT: MULTIPLE COLLECTIONS
 Auto-patterns ONLY supports displaying/managing data from a SINGLE collection.
+
+RELEVANCE MATTERS: You may receive information about multiple collections, but only consider collections that are RELEVANT to the current dashboard page use case.
+- Not every collection needs to be displayed or managed in this dashboard page
+- Only focus on collections that are directly related to what the user wants to accomplish
+- Ignore collections that don't apply to the current functionality
+
 Return useAutoPatterns: false if the dashboard page requires:
 - Joining or combining data from multiple collections
 - Displaying fields from different collections together
@@ -126692,10 +127244,12 @@ Examples requiring MULTIPLE collections (return useAutoPatterns: false):
 - "Show inventory items with supplier details" (inventory + suppliers)
 
 ONLY return useAutoPatterns: true if the page description can be fully satisfied by:
-- Reading/displaying items from ONE collection only
-- Creating/editing items in ONE collection only
-- Deleting items from ONE collection only
-- Filtering/sorting items in ONE collection only
+- Reading/displaying items from ONE relevant collection only
+- Creating/editing items in ONE relevant collection only
+- Deleting items from ONE relevant collection only
+- Filtering/sorting items in ONE relevant collection only
+- NO embedded script configuration or settings management
+- The collection is actually relevant to what the user wants to accomplish
 
 Return your response in the following format:
 - If useAutoPatterns is false: return only useAutoPatterns
@@ -126779,40 +127333,17 @@ var require_DashboardDecisionAgent = __commonJS({
       buildSystemPrompt() {
         return (0, autoPatternPrompt_1.autoPatternDecisionPrompt)();
       }
-      buildUserPrompt(blueprint, extension, collectionsInfo) {
-        return `<user-request>
-App Summary: ${blueprint?.summary || "Not provided"}
-</user-request>
-
-<dashboard-page-description>
-Dashboard Page Name: ${extension.name}
-Dashboard Page Description: ${extension.description}
-</dashboard-page-description>
-
-<available-collections>
-${collectionsInfo}
-</available-collections>`;
-      }
-      async generate({ blueprint, extension, planAndResources }) {
-        if (!planAndResources.createdCollections?.length) {
+      async generate(params) {
+        const { planAndResources } = params;
+        if (!planAndResources?.createdCollections?.length) {
           return {
             useAutoPatterns: false
           };
         }
-        const { createdCollections } = planAndResources;
         const model = (0, anthropic_1.createAnthropic)({ apiKey: this.apiKey })("claude-3-5-haiku-latest");
-        const collectionsInfo = createdCollections.map((collection, index) => {
-          const userFields = collection.fields?.filter((field) => !field.key?.startsWith("_")) || [];
-          const fieldsDetail = userFields.map((f) => `  - ${f.key} (${f.type}): ${f.displayName}`).join("\n");
-          return `
-Collection ${index + 1}:
-  ID: ${collection.id}
-  Display Name: ${collection.displayName}
-  Fields (${userFields.length}):
-${fieldsDetail}`;
-        }).join("\n");
         const systemPrompt = this.buildSystemPrompt();
-        const userPrompt = this.buildUserPrompt(blueprint, extension, collectionsInfo);
+        const primaryAction = "Decide whether to use auto patterns for the dashboard page";
+        const userPrompt = (0, utils_1.buildUserPromptForCodeGenerationAgent)(params, primaryAction);
         const result = await (0, ai_1.generateObject)({
           model,
           schema: autoPatternsLlmConfig,
@@ -127403,6 +127934,305 @@ export default withDashboard(CollectionPage);
   }
 });
 
+// dist/system-prompts/embeddedScript/embededScript.js
+var require_embededScript = __commonJS({
+  "dist/system-prompts/embeddedScript/embededScript.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.embeddedScriptPrompt = void 0;
+    var embeddedScriptPrompt = (hasDynamicParameters) => {
+      return `
+<WIXCLI_EMBEDDED_SCRIPT_SYSTEM_PROMPT>
+
+<role>
+You are a senior Wix CLI App Developer Expert specialized in creating embedded scripts for Wix applications. You have deep knowledge of embedded script best practices, HTML/JavaScript injection patterns, and third-party integrations.
+
+You are tasked with generating a complete Wix CLI embedded script implementation based on the user's requirements.
+</role>
+
+<embedded_script_extension_files_and_code>
+<description>
+Embedded scripts are HTML code fragments that get injected into the DOM of Wix sites. They enable integration with third-party services, analytics tracking, advertising, and custom JavaScript functionality.
+
+Each embedded script lives in its own folder under src/site/embedded-scripts/ and you generate the embedded.html file containing the HTML/JavaScript code to be injected.
+</description>
+
+<metadata_fields>
+You will also specify metadata that determines how the script is injected:
+- scriptType: ESSENTIAL | FUNCTIONAL | ANALYTICS | ADVERTISING
+- placement: HEAD | BODY_START | BODY_END
+
+These are returned separately from the HTML file.
+</metadata_fields>
+
+<script_types>
+An enum used by consent management apps to determine whether site visitors consent to having your script run during their visit. Possible values are:
+- ESSENTIAL: Enables site visitors to move around the site and use essential features like secure and private areas crucial to the functioning of the site.
+- FUNCTIONAL: Remembers choices site visitors make to improve their experience, such as language.
+- ANALYTICS: Provides statistics to the site owner on how visitors use the site, such as which pages they visit. This helps improve the site by identifying errors and performance issues.
+- ADVERTISING: Provides visitor information to the site owner to help market their products, such as data on the impact of marketing campaigns, re-targeted advertising, and so on.
+An embedded script must have a type. If your script falls into more than one type, choose the option closest to the bottom of the list above. For example, if your script has Advertising and Analytics aspects, choose Advertising as its type. It's unlikely that you'll need to mark it as Essential.
+</script_types>
+
+<placement_options>
+An enum indicating where in the page's DOM the HTML code will be injected. Possible values are:
+- HEAD: Injects the code between the page's <head> and </head> tags.
+- BODY_START: Injects the code immediately after the page's opening <body> tag.
+- BODY_END: Injects the code immediately before the page's closing </body> tag.
+</placement_options>
+
+<template_variables>
+Embedded scripts support parameterization using template variable syntax {{variableName}}.
+- Correct: <div data-value="{{myVariable}}"></div>
+- Common use cases: API keys, configuration values, user-specific data
+</template_variables>
+
+</embedded_script_extension_files_and_code>
+
+<core_principles>
+- Do NOT invent or assume new types, modules, functions, or imports not available in standard browser APIs or explicitly imported libraries
+- NEVER use mocks, placeholders, or TODOs in any code
+- ALWAYS implement complete, production-ready functionality
+- Handle errors gracefully and fail silently when appropriate for embedded scripts
+- Minimize performance impact - embedded scripts should be lightweight and non-blocking
+- Follow web security best practices (avoid inline event handlers, validate data, escape user input)
+</core_principles>
+
+<generation_requirements>
+1. Generate the embedded.html file with complete HTML/JavaScript implementation
+2. Specify appropriate scriptType based on the use case:
+   - Analytics tools \u2192 ANALYTICS
+   - Ad networks, marketing pixels \u2192 ADVERTISING
+   - Core functionality \u2192 ESSENTIAL
+   - Enhanced features \u2192 FUNCTIONAL
+3. Choose optimal placement:
+   - Analytics/tracking \u2192 HEAD (initialize early)
+   - Advertising \u2192 BODY_END (non-blocking)
+   - Critical functionality \u2192 HEAD or BODY_START
+   - Non-critical features \u2192 BODY_END (performance)
+4. Implement complete business logic with proper error handling
+5. Use template variables {{variableName}} for configurable values (API keys, settings, etc.)
+6. Include proper TypeScript imports when using external modules
+</generation_requirements>
+
+<implementation_guidelines>
+
+${hasDynamicParameters ? `
+<dynamic_parameters_usage>
+
+<description>
+This embedded script uses dynamic parameters that are configured through the dashboard. These parameters are passed as template variables and should be used in your HTML/JavaScript code.
+</description>
+
+<usage_instructions>
+
+1. Template Variable Syntax:
+   - Use {{parameterKey}} syntax to insert parameter values into your HTML
+   - Template variables work in HTML attributes
+   - They will be replaced with actual values when the script is injected
+
+2. HTML Attributes (REQUIRED):
+   - Store ALL parameter values in data attributes on a configuration element
+   - Template variables can ONLY be used here, not directly in JavaScript
+   - Example: <div id="config" data-headline="{{headline}}" data-text="{{text}}"></div>
+
+3. JavaScript Access:
+   - JavaScript must read parameter values from the data attributes
+   - Use getAttribute() or the dataset property
+   - Examples:
+     const config = document.getElementById('config');
+     const headline = config?.getAttribute('data-headline');
+     // OR using dataset:
+     const { headline, text } = config.dataset;
+
+4. Type Safety:
+   - Be aware of parameter types when using them in JavaScript
+   - NUMBER types: convert with Number() or parseInt()
+   - BOOLEAN types: compare with 'true' or 'false' strings
+   - DATE/DATETIME: parse with new Date()
+
+5. Required vs Optional:
+   - Required parameters will always have values
+   - Optional parameters may be empty - handle gracefully
+   - Provide fallback values for optional parameters
+
+6. Relevant Parameter Usage:
+   - Only use dynamic parameters that are relevant to your current use case
+   - Ignore parameters that don't apply to the functionality you're implementing
+   - Each parameter you use should serve a clear purpose in the script's functionality
+   - It's perfectly fine to not use all parameters if they're not applicable
+
+</usage_instructions>
+
+<example_patterns>
+
+Pattern 1 - Configuration in Data Attributes:
+<div
+  id="script-config"
+  data-api-key="{{apiKey}}"
+  data-enabled="{{enabled}}"
+  data-color="{{primaryColor}}"
+></div>
+<script>
+  const config = document.getElementById('script-config');
+  const apiKey = config.getAttribute('data-api-key');
+  const enabled = config.getAttribute('data-enabled') === 'true';
+  const color = config.getAttribute('data-color');
+
+  if (enabled && apiKey) {
+    // Initialize with configuration
+  }
+</script>
+
+Pattern 2 - Using dataset Property:
+<div
+  id="script-config"
+  data-headline="{{headline}}"
+  data-message="{{message}}"
+  data-image-url="{{imageUrl}}"
+></div>
+<script>
+  const config = document.getElementById('script-config');
+  const { headline, message, imageUrl } = config.dataset;
+
+  // Use the variables in your script logic
+  if (headline) {
+    document.querySelector('#headline').textContent = headline;
+  }
+</script>
+
+Pattern 3 - Conditional Logic:
+<div
+  id="config"
+  data-mode="{{activationMode}}"
+  data-start="{{startDate}}"
+  data-end="{{endDate}}"
+></div>
+<script>
+  const config = document.getElementById('config');
+  const mode = config.getAttribute('data-mode');
+
+  if (mode === 'timed') {
+    const startDate = new Date(config.getAttribute('data-start'));
+    const endDate = new Date(config.getAttribute('data-end'));
+    const now = new Date();
+
+    if (now >= startDate && now <= endDate) {
+      // Show content
+    }
+  } else if (mode === 'active') {
+    // Show content immediately
+  }
+</script>
+
+</example_patterns>
+
+<validation_requirements>
+- Only use dynamic parameters that are relevant to your specific use case
+- Ignore parameters that don't apply to the functionality being implemented
+- Template variables {{parameterKey}} must match the exact key names from the parameter definitions
+- Handle both required and optional parameters appropriately
+- Provide sensible default behavior when optional parameters are not set
+- Ensure type-appropriate usage (don't use NUMBER parameters as strings without conversion)
+</validation_requirements>
+
+</dynamic_parameters_usage>
+` : ""}
+
+</WIXCLI_EMBEDDED_SCRIPT_SYSTEM_PROMPT>
+  `;
+    };
+    exports2.embeddedScriptPrompt = embeddedScriptPrompt;
+  }
+});
+
+// dist/agents/EmbeddedScriptAgent.js
+var require_EmbeddedScriptAgent = __commonJS({
+  "dist/agents/EmbeddedScriptAgent.js"(exports2) {
+    "use strict";
+    var __importDefault2 = exports2 && exports2.__importDefault || function(mod2) {
+      return mod2 && mod2.__esModule ? mod2 : { "default": mod2 };
+    };
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.EmbeddedScriptAgent = exports2.EmbeddedScriptSchema = exports2.EmbeddedScriptType = exports2.EmbeddedScriptPlacement = void 0;
+    var anthropic_1 = require_dist5();
+    var ai_1 = require_dist9();
+    var utils_1 = require_utils14();
+    var load_examples_1 = require_load_examples();
+    var zod_1 = __importDefault2(require_zod());
+    var embededScript_1 = require_embededScript();
+    var EmbeddedScriptPlacement;
+    (function(EmbeddedScriptPlacement2) {
+      EmbeddedScriptPlacement2["HEAD"] = "HEAD";
+      EmbeddedScriptPlacement2["BODY_START"] = "BODY_START";
+      EmbeddedScriptPlacement2["BODY_END"] = "BODY_END";
+    })(EmbeddedScriptPlacement || (exports2.EmbeddedScriptPlacement = EmbeddedScriptPlacement = {}));
+    var EmbeddedScriptType;
+    (function(EmbeddedScriptType2) {
+      EmbeddedScriptType2["ESSENTIAL"] = "ESSENTIAL";
+      EmbeddedScriptType2["FUNCTIONAL"] = "FUNCTIONAL";
+      EmbeddedScriptType2["ANALYTICS"] = "ANALYTICS";
+      EmbeddedScriptType2["ADVERTISING"] = "ADVERTISING";
+    })(EmbeddedScriptType || (exports2.EmbeddedScriptType = EmbeddedScriptType = {}));
+    exports2.EmbeddedScriptSchema = zod_1.default.object({
+      files: zod_1.default.array(utils_1.FileItemSchema).default([]),
+      scriptType: zod_1.default.enum(Object.values(EmbeddedScriptType)),
+      placement: zod_1.default.enum(Object.values(EmbeddedScriptPlacement))
+    });
+    var EmbeddedScriptAgent = class {
+      constructor(apiKey) {
+        this.apiKey = apiKey;
+        this.name = "EmbeddedScriptAgent";
+      }
+      async buildSystemPrompt(hasDynamicParameters) {
+        return (0, embededScript_1.embeddedScriptPrompt)(hasDynamicParameters);
+      }
+      async generate(params) {
+        const { blueprint, planAndResources } = params;
+        const examples = (0, load_examples_1.loadExamples)([load_examples_1.types.EmbeddedScript]);
+        const hasDynamicParameters = Boolean(planAndResources?.embeddedScriptParameters && planAndResources.embeddedScriptParameters.length > 0);
+        const systemPrompt = `${await this.buildSystemPrompt(hasDynamicParameters)}
+${examples}
+`;
+        console.log(`Embedded Script Agent System Prompt length: ${systemPrompt.length} (is that what you expect?)`);
+        const appName = blueprint?.appName ? `'${blueprint.appName}'` : "";
+        const primaryAction = `Customize the Wix CLI embedded script scaffolding for the app ${appName}`;
+        const userMessage = (0, utils_1.buildUserPromptForCodeGenerationAgent)(params, primaryAction);
+        const model = (0, anthropic_1.createAnthropic)({ apiKey: this.apiKey })("claude-sonnet-4-20250514");
+        const result = await (0, ai_1.generateObject)({
+          model,
+          schema: exports2.EmbeddedScriptSchema,
+          messages: [
+            {
+              role: "system",
+              content: systemPrompt,
+              providerOptions: (0, utils_1.withCaching)("1h")
+            },
+            {
+              role: "user",
+              content: userMessage
+            }
+          ],
+          experimental_telemetry: {
+            isEnabled: true,
+            functionId: this.name
+          },
+          maxOutputTokens: 1e4,
+          maxRetries: 3,
+          temperature: 0
+        });
+        return {
+          files: result.object.files,
+          scriptType: result.object.scriptType,
+          placement: result.object.placement
+        };
+      }
+    };
+    exports2.EmbeddedScriptAgent = EmbeddedScriptAgent;
+    exports2.default = EmbeddedScriptAgent;
+  }
+});
+
 // dist/agents/AgentsFactory.js
 var require_AgentsFactory = __commonJS({
   "dist/agents/AgentsFactory.js"(exports2) {
@@ -127424,6 +128254,7 @@ var require_AgentsFactory = __commonJS({
     var DashboardPageAgent_1 = __importDefault2(require_DashboardPageAgent());
     var DashboardDecisionAgent_1 = require_DashboardDecisionAgent();
     var AutoPatternsGenerator_1 = require_AutoPatternsGenerator();
+    var EmbeddedScriptAgent_1 = __importDefault2(require_EmbeddedScriptAgent());
     var AgentsFactory = class {
       constructor(apiKey) {
         this.apiKey = apiKey;
@@ -127452,6 +128283,8 @@ var require_AgentsFactory = __commonJS({
             return new CustomElementAgent_1.default(this.apiKey);
           case types_1.ExtensionType.BACKEND_API:
             return new BackendApiAgent_1.BackendApiAgent(this.apiKey);
+          case "EMBEDDED_SCRIPT":
+            return new EmbeddedScriptAgent_1.default(this.apiKey);
           default:
             throw new Error(`Unsupported extension type for AI customization: ${extension.type}`);
         }
@@ -130025,8 +130858,9 @@ var require_extensionGenerators = __commonJS({
     var ditto_scaffolding_1 = require_dist13();
     var types_1 = require_types_impl();
     var ditto_scaffolding_2 = require_dist13();
+    var EmbeddedScriptAgent_1 = require_EmbeddedScriptAgent();
     var ExtensionFactory = class {
-      static generateExtension(extension, outputPath, scaffoldPath) {
+      static generateExtension({ extension, outputPath, scaffoldPath, generatedConfig }) {
         const scaffoldDir = path_1.default.dirname(scaffoldPath);
         const id = (0, crypto_1.randomUUID)();
         switch (extension.type) {
@@ -130084,6 +130918,23 @@ var require_extensionGenerators = __commonJS({
             });
             break;
           }
+          case types_1.ExtensionType.EMBEDDED_SCRIPT: {
+            const name = extension.name || "My Embedded Script";
+            const { placement, scriptType } = generatedConfig?.type === types_1.ExtensionType.EMBEDDED_SCRIPT ? generatedConfig : {
+              placement: EmbeddedScriptAgent_1.EmbeddedScriptPlacement.HEAD,
+              scriptType: EmbeddedScriptAgent_1.EmbeddedScriptType.ESSENTIAL
+            };
+            const extensionConfig = this.createEmbeddedScriptData(id, name, scaffoldDir, placement, scriptType);
+            writeExtensionFile({
+              outputPath,
+              name,
+              builderMethodName: "embeddedScript",
+              extensionConfig,
+              extensionType: extension.type,
+              scaffoldDir
+            });
+            break;
+          }
           default:
             console.log(`Skipping extension type: ${extension.type}. It doesn't need presence in the extensions.ts file (e.g. Backend API is astro only)`);
             return;
@@ -130165,6 +131016,16 @@ var require_extensionGenerators = __commonJS({
           }
         };
       }
+      static createEmbeddedScriptData(id, name, scaffoldDir, placement, scriptType) {
+        const source = "./" + path_1.default.join(scaffoldDir, "embedded.html").replace(/^src\//, "");
+        return {
+          id,
+          name,
+          source,
+          placement,
+          scriptType
+        };
+      }
     };
     exports2.ExtensionFactory = ExtensionFactory;
     ExtensionFactory.servicePluginBuilderMap = {
@@ -136893,6 +137754,7 @@ var require_orchestrator = __commonJS({
         this.emitEvent("planner:start", {});
         const planner = this.agentsFactory.getAgent({ type: "PLANNER" });
         const plan = await planner.generate(blueprint);
+        console.log("Plan", JSON.stringify(plan));
         this.emitEvent("planner:done", {});
         const createdCollections = [];
         if (plan?.collections?.length > 0) {
@@ -136918,6 +137780,9 @@ var require_orchestrator = __commonJS({
         if (plan?.apiSpec) {
           result.apiSpec = plan.apiSpec;
         }
+        if (plan?.embeddedScriptParameters) {
+          result.embeddedScriptParameters = plan.embeddedScriptParameters;
+        }
         return result;
       }
       async runIterationPlanningAndAugmentExtensions(outputPath, chatHistory) {
@@ -136945,6 +137810,13 @@ var require_orchestrator = __commonJS({
               outputPath,
               planAndResources
             });
+          case types_1.ExtensionType.EMBEDDED_SCRIPT:
+            return this.processEmbeddedScript({
+              extension,
+              blueprint,
+              outputPath,
+              planAndResources
+            });
           default:
             return this.processStandardExtension({
               extension,
@@ -136954,11 +137826,60 @@ var require_orchestrator = __commonJS({
             });
         }
       }
+      async processEmbeddedScript(opts) {
+        const { extension, blueprint, outputPath, planAndResources } = opts;
+        this.emitEvent("scaffold:start", { extension });
+        const scaffolds = await (0, ditto_scaffolding_1.copyScaffoldingTemplate)(extension, outputPath);
+        if (!scaffolds || scaffolds.length === 0) {
+          throw new Error(`\u274C Failed to scaffold ${extension.type}`);
+        }
+        const scaffold = scaffolds[0];
+        this.emitEvent("scaffold:done", {
+          extension,
+          scaffoldPath: scaffolds.map((s) => s.path).join(", ")
+        });
+        const embeddedScriptAgent = this.agentsFactory.getAgent({
+          type: "EMBEDDED_SCRIPT"
+        });
+        this.emitEvent("agent:start", {
+          extension,
+          name: embeddedScriptAgent.name
+        });
+        const { files, scriptType, placement } = await embeddedScriptAgent.generate({
+          extension,
+          blueprint,
+          scaffold,
+          basePath: outputPath,
+          planAndResources
+        });
+        this.writeFile(files, outputPath);
+        extensionGenerators_1.ExtensionFactory.generateExtension({
+          extension,
+          outputPath,
+          scaffoldPath: scaffold.path,
+          generatedConfig: {
+            type: types_1.ExtensionType.EMBEDDED_SCRIPT,
+            scriptType,
+            placement
+          }
+        });
+        this.emitEvent("agent:done", {
+          extension,
+          name: embeddedScriptAgent.name,
+          files
+        });
+      }
       async processDashboardPage(opts) {
+        const { extension, blueprint, outputPath, planAndResources } = opts;
         const decisionAgent = this.agentsFactory.getAgent({
           type: "DASHBOARD_DECISION"
         });
-        const decision = await decisionAgent.generate(opts);
+        const decision = await decisionAgent.generate({
+          extension,
+          blueprint,
+          planAndResources,
+          basePath: outputPath
+        });
         const useAutoPatterns = decision.useAutoPatterns && decision.schema && decision.relevantCollectionId;
         if (!useAutoPatterns) {
           console.log("\u{1F3A8} Using custom code generation for dashboard");
@@ -136966,8 +137887,7 @@ var require_orchestrator = __commonJS({
           return;
         }
         console.log("\u{1F3AF} Using auto-patterns for dashboard generation");
-        const { extension, outputPath, planAndResources: { createdCollections = [] } = {} } = opts;
-        const relevantCollection = createdCollections.find((c) => c.id === decision.relevantCollectionId);
+        const relevantCollection = planAndResources.createdCollections?.find((c) => c.id === decision.relevantCollectionId);
         if (!relevantCollection) {
           throw new Error(`\u274C Collection with ID ${decision.relevantCollectionId} not found in created collections`);
         }
@@ -136985,7 +137905,11 @@ var require_orchestrator = __commonJS({
         });
         this.writeFile(files, outputPath);
         const pagePath = files[0].path || "";
-        extensionGenerators_1.ExtensionFactory.generateExtension(extension, outputPath, pagePath);
+        extensionGenerators_1.ExtensionFactory.generateExtension({
+          extension,
+          outputPath,
+          scaffoldPath: pagePath
+        });
         this.emitEvent("agent:done", {
           extension,
           name: "AutoPatternsGenerator",
@@ -137022,7 +137946,11 @@ var require_orchestrator = __commonJS({
           basePath: outputPath
         });
         this.writeFile(files, outputPath);
-        extensionGenerators_1.ExtensionFactory.generateExtension(extension, outputPath, scaffold.path);
+        extensionGenerators_1.ExtensionFactory.generateExtension({
+          extension,
+          outputPath,
+          scaffoldPath: scaffold.path
+        });
         this.emitEvent("agent:done", { extension, name: agent.name, files });
       }
       async processStandardExtension({ extension, blueprint, outputPath, planAndResources }) {
@@ -137046,7 +137974,11 @@ var require_orchestrator = __commonJS({
           basePath: outputPath
         });
         this.writeFile(files, outputPath);
-        extensionGenerators_1.ExtensionFactory.generateExtension(extension, outputPath, scaffold.path);
+        extensionGenerators_1.ExtensionFactory.generateExtension({
+          extension,
+          outputPath,
+          scaffoldPath: scaffold.path
+        });
         this.emitEvent("agent:done", { extension, name: agent.name, files });
       }
       async processMultipleServicePluginScaffolds({ extension, blueprint, outputPath, planAndResources, scaffolds }) {
@@ -137075,7 +138007,11 @@ var require_orchestrator = __commonJS({
             basePath: outputPath
           });
           this.writeFile(files, outputPath);
-          extensionGenerators_1.ExtensionFactory.generateExtension(spiExtension, outputPath, scaffold.path);
+          extensionGenerators_1.ExtensionFactory.generateExtension({
+            extension: spiExtension,
+            outputPath,
+            scaffoldPath: scaffold.path
+          });
           this.emitEvent("agent:done", {
             extension: spiExtension,
             name: agent.name,
@@ -137117,7 +138053,11 @@ var require_orchestrator = __commonJS({
             basePath: outputPath
           });
           this.writeFile(files, outputPath);
-          extensionGenerators_1.ExtensionFactory.generateExtension(extension, outputPath, scaffold.path);
+          extensionGenerators_1.ExtensionFactory.generateExtension({
+            extension,
+            outputPath,
+            scaffoldPath: scaffold.path
+          });
           this.emitEvent("agent:done", {
             extension,
             name: agent.name,