@wix/ditto-codegen-public 1.0.181 → 1.0.183

package/dist/out.js

@@ -36825,6 +36825,7 @@ var require_SystemPromptBuilder = __commonJS({
     var CommonSections;
     (function(CommonSections2) {
       CommonSections2["ROLE"] = "role";
+      CommonSections2["OUTPUT_CONSTRAINTS"] = "output_constraints";
       CommonSections2["CONTEXT_EXPLANATION"] = "context_explanation";
       CommonSections2["CORE_PRINCIPLES"] = "core_principles";
       CommonSections2["CORE_KNOWLEDGE"] = "core_knowledge";
@@ -36838,12 +36839,13 @@ var require_SystemPromptBuilder = __commonJS({
       [CommonSections.ROLE]: 1,
       [CommonSections.CONTEXT_EXPLANATION]: 2,
       [CommonSections.CORE_PRINCIPLES]: 3,
-      [CommonSections.CORE_KNOWLEDGE]: 4,
-      [CommonSections.IMPLEMENTATION_PATTERNS]: 5,
-      [CommonSections.IMPLEMENTATION_GUIDELINES]: 6,
-      [CommonSections.AUTHENTICATION_ELEVATION_REQUIREMENT]: 7,
-      [CommonSections.API_DOCS]: 8,
-      [CommonSections.EXAMPLES]: 9
+      [CommonSections.OUTPUT_CONSTRAINTS]: 4,
+      [CommonSections.CORE_KNOWLEDGE]: 5,
+      [CommonSections.IMPLEMENTATION_PATTERNS]: 6,
+      [CommonSections.IMPLEMENTATION_GUIDELINES]: 7,
+      [CommonSections.AUTHENTICATION_ELEVATION_REQUIREMENT]: 8,
+      [CommonSections.API_DOCS]: 9,
+      [CommonSections.EXAMPLES]: 10
     };
     var GeneralAgentType;
     (function(GeneralAgentType2) {
@@ -37455,7 +37457,23 @@ When the blueprint includes EMBEDDED_SCRIPT extensions:
   * User-generated content (reviews, comments, submissions)
   * Event logs (if explicitly requested for analytics/tracking purposes)
   * Multi-record relational data that is NOT configuration
-- If in doubt whether something is "configuration" or "data": If it controls HOW the embedded script works or looks, it's configuration \u2192 use embedded script parameters`;
+- If in doubt whether something is "configuration" or "data": If it controls HOW the embedded script works or looks, it's configuration \u2192 use embedded script parameters
+
+CRITICAL - SITE WIDGET SETTINGS vs CMS COLLECTIONS:
+When the blueprint includes SITE_WIDGET extensions:
+- SITE_WIDGET has a built-in settings panel (panel.tsx) that handles ALL widget configuration - dates, titles, colors, numbers, toggles, text, etc.
+- For SITE_WIDGET-ONLY blueprints (no DASHBOARD_PAGE or other extensions): return collections: [] - the widget panel handles everything
+- NEVER create collections to store widget configuration data - this is ALWAYS handled by the widget's settings panel
+- Only create collections for SITE_WIDGET when ALL of these conditions are met:
+  * The blueprint ALSO includes a DASHBOARD_PAGE extension that needs to manage data the widget displays
+  * OR the widget explicitly needs to display MULTIPLE records of user-generated/business data (not configuration)
+  * AND the data is NOT configuration (dates, colors, settings, display options are ALWAYS configuration)
+- Examples of what is CONFIGURATION (use widget panel, NOT collections):
+  * Target date/time for countdown \u2192 widget panel
+  * Display colors, fonts, sizes \u2192 widget panel
+  * Headlines, labels, messages \u2192 widget panel
+  * Feature toggles, show/hide options \u2192 widget panel
+  * Numeric settings (delays, intervals, thresholds) \u2192 widget panel`;
     var cmsPlannerExample = `Blueprint indicates a handling fees system for products.
 
 For the collections field, return:
@@ -37476,6 +37494,12 @@ For the collections field, return:
    - Example (WRONG):
      * Creating both embeddedScriptParameters AND a "popup-configurations" CMS collection - this is duplicate storage
    - Only create CMS collections if there's genuinely new data needed beyond what's in embeddedScriptParameters (e.g., user-generated content, event logs if explicitly requested, business entities)
+
+   Avoid Duplicate Data Storage - SITE WIDGET CONFIGURATION:
+   - Site widgets have a built-in settings panel (panel.tsx) - ALL widget configuration goes there
+   - For SITE_WIDGET-ONLY blueprints: ALWAYS return collections: [] (empty array)
+   - The widget panel handles: dates, times, colors, text, numbers, toggles, display settings, countdown targets, etc.
+   - ONLY create collections for site widgets when there's a DASHBOARD_PAGE that manages multi-record data the widget displays
 5) Initial Data Assessment:
    - After defining the collection schema, evaluate if initial/seed data can be implied from the blueprint
    - Consider if the blueprint describes example data, default configurations, sample content, or starter records that would help demonstrate the app's functionality
@@ -64455,6 +64479,7 @@ var require_dashboard_page_instructions = __commonJS({
       "Page.Section",
       "RichTextInputArea",
       "SectionHeader",
+      "SidePanel",
       "Table",
       "TableActionCell",
       "TableListHeader",
@@ -64604,7 +64629,14 @@ var require_load_examples = __commonJS({
         description: "A Custom Element that displays a countdown timer",
         files: {
           [types_1.ExtensionType.SITE_WIDGET]: [
-            "custom-element/src/widgets/custom-elements/countdown-timer/widget.tsx"
+            "custom-element/countdown-widget/components/ColorPickerField.tsx",
+            "custom-element/countdown-widget/components/FontPickerField.tsx",
+            "custom-element/countdown-widget/components/Separator.tsx",
+            "custom-element/countdown-widget/components/TimeBlock.tsx",
+            "custom-element/countdown-widget/panel.tsx",
+            "custom-element/countdown-widget/styles.ts",
+            "custom-element/countdown-widget/utils.ts",
+            "custom-element/countdown-widget/widget.tsx"
           ]
         }
       },
@@ -65264,6 +65296,50 @@ var require_core_principles = __commonJS({
   }
 });
 
+// dist/system-prompts/system-prompt-builders/utils/output-constraints.js
+var require_output_constraints = __commonJS({
+  "dist/system-prompts/system-prompt-builders/utils/output-constraints.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.outputConstraints = void 0;
+    var outputConstraints = () => `<token_limits>
+CRITICAL: Your max output is ~10,000 tokens. You MUST plan your response to stay well under this limit.
+- If making a large file (>300 lines), split it into multiple smaller files with imports.
+- If editing a large section (>100 lines), break it into multiple smaller edit operations.
+- Count your output before responding - if it seems too long, reduce scope and prioritize.
+</token_limits>
+
+<brevity_rules>
+IMPORTANT: Minimize output tokens while maintaining quality and correctness.
+- Do NOT add README.md, documentation files, or markdown files unless explicitly requested.
+- Do NOT add excessive comments in code - only add comments where truly necessary for clarity.
+- Do NOT re-output unchanged files or duplicate existing code.
+- Do NOT generate placeholder code like "// TODO: implement" - provide working implementations.
+- Only output files that are directly required for the task.
+</brevity_rules>
+
+<modular_code_strategy>
+When generating substantial code, split into multiple smaller files with imports:
+- Extract utilities/helpers into separate files
+- Separate types/interfaces into dedicated type files
+- Keep each component/function focused (~50-100 lines max)
+
+Example structure instead of one large file:
+  components/MyFeature/MyFeature.tsx (main component)
+  components/MyFeature/types.ts (interfaces/types)
+  components/MyFeature/utils.ts (helper functions)
+</modular_code_strategy>
+
+<iteration_efficiency>
+When iterating on existing code:
+- Only include files that actually need changes.
+- Prefer 'edit' operation with precise oldString/newString replacements.
+- If response would exceed limits, complete the most critical part first.
+</iteration_efficiency>`;
+    exports2.outputConstraints = outputConstraints;
+  }
+});
+
 // dist/system-prompts/system-prompt-builders/CodeGenerationSystemPromptBuilder.js
 var require_CodeGenerationSystemPromptBuilder = __commonJS({
   "dist/system-prompts/system-prompt-builders/CodeGenerationSystemPromptBuilder.js"(exports2) {
@@ -65277,6 +65353,7 @@ var require_CodeGenerationSystemPromptBuilder = __commonJS({
     var apiDocLoader_1 = require_apiDocLoader();
     var use_elevate_1 = require_use_elevate();
     var core_principles_1 = require_core_principles();
+    var output_constraints_1 = require_output_constraints();
     var CodeGenerationSystemPromptBuilder = class extends SystemPromptBuilder_1.SystemPromptBuilder {
       constructor(params) {
         super(params);
@@ -65298,6 +65375,10 @@ ${(0, error_handling_1.errorHandling)()}`;
         this.withSection(SystemPromptBuilder_1.CommonSections.CORE_PRINCIPLES, content);
         return this;
       }
+      withOutputConstraints() {
+        this.withSection(SystemPromptBuilder_1.CommonSections.OUTPUT_CONSTRAINTS, (0, output_constraints_1.outputConstraints)());
+        return this;
+      }
       withApiDocs() {
         if (this.apiNames.length === 0 && !this.useData && !this.useIteration) {
           return this;
@@ -65334,7 +65415,7 @@ var require_dashboard_page_prompt = __commonJS({
         apiNames,
         useData,
         useIteration
-      }).withRole(dashboard_page_instructions_1.dashboardPageInstructions.role).withSection("dashboard_page_extension_files_and_code", dashboard_page_instructions_1.dashboardPageInstructions.filesAndCode).withSection("wds_provider_usage", dashboard_page_instructions_1.dashboardPageInstructions.wdsProviderUsage).withSection("hard_constraints", dashboard_page_instructions_1.dashboardPageInstructions.hardConstraints).withSection("api_references", dashboard_page_instructions_1.dashboardPageInstructions.apiReferences).withSection("wds_reference", dashboard_page_instructions_1.dashboardPageInstructions.wdsReference()).withContextExplanation().withApiDocs().withCorePrinciples().withImplementationGuidelines(dashboard_page_instructions_1.dashboardPageInstructions.typescriptQualityGuidelines).withExamples();
+      }).withRole(dashboard_page_instructions_1.dashboardPageInstructions.role).withSection("dashboard_page_extension_files_and_code", dashboard_page_instructions_1.dashboardPageInstructions.filesAndCode).withSection("wds_provider_usage", dashboard_page_instructions_1.dashboardPageInstructions.wdsProviderUsage).withSection("hard_constraints", dashboard_page_instructions_1.dashboardPageInstructions.hardConstraints).withSection("api_references", dashboard_page_instructions_1.dashboardPageInstructions.apiReferences).withSection("wds_reference", dashboard_page_instructions_1.dashboardPageInstructions.wdsReference()).withContextExplanation().withApiDocs().withCorePrinciples().withOutputConstraints().withImplementationGuidelines(dashboard_page_instructions_1.dashboardPageInstructions.typescriptQualityGuidelines).withExamples();
       if (useData) {
         systemPrompt.withSection("data_prompt", dashboard_page_instructions_1.dashboardPageInstructions.dataPrompt);
       }
@@ -65736,7 +65817,7 @@ var require_site_component_prompt = __commonJS({
         apiNames,
         useData,
         useIteration
-      }).withRole(site_component_instructions_1.siteComponentInstructions.role).withContextExplanation().withCorePrinciples().withImplementationGuidelines(site_component_instructions_1.siteComponentInstructions.implementationGuidelines).withApiDocs().withExamples();
+      }).withRole(site_component_instructions_1.siteComponentInstructions.role).withContextExplanation().withCorePrinciples().withOutputConstraints().withImplementationGuidelines(site_component_instructions_1.siteComponentInstructions.implementationGuidelines).withApiDocs().withExamples();
       return siteComponentPromptBuilder.compose();
     };
     exports2.siteComponentPrompt = siteComponentPrompt;
@@ -65797,18 +65878,39 @@ var require_custom_element_instructions = __commonJS({
     Object.defineProperty(exports2, "__esModule", { value: true });
     exports2.customElementInstructions = void 0;
     var typescript_quality_guidelines_1 = require_typescript_quality_guidelines();
+    var wdsPackage_1 = require_wdsPackage();
+    var dashboard_page_instructions_1 = require_dashboard_page_instructions();
     var customElementRole = `You are a senior Wix CLI App Developer. Your job is to produce a beautiful, production\u2011quality site component quickly and correctly.`;
     var customElementImplementationGuidelines = `<rules>
     - Return ONLY a JSON object matching the schema { path, content, type } (no prose, no markdown)
     - type must be "typescript"; content must be the COMPLETE file source
-    - Do NOT add dependencies; do NOT use @wix/design-system or @wix/wix-ui-icons-common
     - Do NOT invent types/modules/props; use only what exists in the scaffold and standard libs
     </rules>
 
+    <architecture>
+    Site widgets consist of two files:
+
+    1. **widget.tsx** - React component converted to Web Component
+       - Import React, ReactDOM, and react-to-webcomponent
+       - Define a Props interface for configurable properties (camelCase)
+       - Create a React FC that renders the widget UI
+       - Convert to web component using reactToWebComponent with props mapping
+       - Props in reactToWebComponent config use camelCase keys with 'string' type
+       - Use inline styles for styling
+
+    2. **panel.tsx** - Settings panel shown in the Wix Editor
+       - Import React hooks, @wix/editor widget API, and @wix/design-system components
+       - Import '@wix/design-system/styles.global.css' for design system styles
+       - Use useState for each configurable property
+       - Use useEffect to load initial values via widget.getProp('kebab-case-name')
+       - Create onChange handlers that update local state AND call widget.setProp('kebab-case-name', value)
+       - Wrap content in WixDesignSystemProvider > SidePanel > SidePanel.Content
+       - Use ONLY WDS components listed in the <wds_reference> section
+    </architecture>
+
     <engineering_guidelines>
     - Implement a TypeScript custom element with proper typing and clear interfaces
-    - Keep the component small, pure, and readable; remove dead code/unused imports
-    - Name things clearly; avoid magic numbers; extract tiny helpers if it improves clarity
+    - Ensure prop names are consistent between widget.tsx (camelCase) and panel.tsx (kebab-case)
     </engineering_guidelines>
 
     ${typescript_quality_guidelines_1.typescriptQualityGuidelines}
@@ -65843,7 +65945,8 @@ var require_custom_element_instructions = __commonJS({
     exports2.customElementInstructions = {
       role: customElementRole,
       implementationGuidelines: customElementImplementationGuidelines,
-      implementationRequirements: customElementImplementationRequirements
+      implementationRequirements: customElementImplementationRequirements,
+      wdsReference: () => (0, wdsPackage_1.buildWdsSystemPrompt)(dashboard_page_instructions_1.supportedWDSComponents)
     };
   }
 });
@@ -65863,7 +65966,7 @@ var require_custom_element_prompt = __commonJS({
         apiNames,
         useData,
         useIteration
-      }).withRole(custom_element_instructions_1.customElementInstructions.role).withContextExplanation().withCorePrinciples().withImplementationGuidelines(custom_element_instructions_1.customElementInstructions.implementationGuidelines).withApiDocs().withExamples();
+      }).withRole(custom_element_instructions_1.customElementInstructions.role).withContextExplanation().withCorePrinciples().withOutputConstraints().withImplementationGuidelines(custom_element_instructions_1.customElementInstructions.implementationGuidelines).withSection("wds_reference", custom_element_instructions_1.customElementInstructions.wdsReference()).withApiDocs().withExamples();
       if (useData) {
         systemPrompt.withSection("implementation_requirements", custom_element_instructions_1.customElementInstructions.implementationRequirements);
       }
@@ -66097,7 +66200,7 @@ var require_service_plugin_prompt = __commonJS({
         apiNames,
         useData,
         useIteration
-      }).withRole(service_plugin_instructions_1.servicePluginInstructions.role).withContextExplanation().withImplementationPatterns(service_plugin_instructions_1.servicePluginInstructions.implementationPatterns).withImplementationGuidelines(service_plugin_instructions_1.servicePluginInstructions.implementationGuidelines).withCorePrinciples().withAuthenticationElevationRequirement().withApiDocs().withExamples().withSection("available_service_plugins", servicePluginDocs);
+      }).withRole(service_plugin_instructions_1.servicePluginInstructions.role).withContextExplanation().withImplementationPatterns(service_plugin_instructions_1.servicePluginInstructions.implementationPatterns).withImplementationGuidelines(service_plugin_instructions_1.servicePluginInstructions.implementationGuidelines).withCorePrinciples().withOutputConstraints().withAuthenticationElevationRequirement().withApiDocs().withExamples().withSection("available_service_plugins", servicePluginDocs);
       if (servicePluginDocs) {
         servicePluginPromptBuilder.withSection("available_service_plugins", servicePluginDocs);
       }
@@ -66216,7 +66319,7 @@ var require_backend_event_prompt = __commonJS({
         apiNames,
         useData,
         useIteration
-      }).withRole(backend_event_instructions_1.backendEventInstructions.role).withContextExplanation().withCorePrinciples().withImplementationPatterns(backend_event_instructions_1.backendEventInstructions.implementationPatterns).withImplementationGuidelines(backend_event_instructions_1.backendEventInstructions.implementationGuidelines).withAuthenticationElevationRequirement().withApiDocs().withExamples();
+      }).withRole(backend_event_instructions_1.backendEventInstructions.role).withContextExplanation().withCorePrinciples().withOutputConstraints().withImplementationPatterns(backend_event_instructions_1.backendEventInstructions.implementationPatterns).withImplementationGuidelines(backend_event_instructions_1.backendEventInstructions.implementationGuidelines).withAuthenticationElevationRequirement().withApiDocs().withExamples();
       return backendEventPromptBuilder.compose();
     };
     exports2.backendEventPrompt = backendEventPrompt;
@@ -66373,7 +66476,7 @@ var require_backend_api_prompt = __commonJS({
         apiNames,
         useData,
         useIteration
-      }).withRole(backend_api_instructions_1.backendApiInstructions.role).withContextExplanation().withCorePrinciples().withImplementationGuidelines(backend_api_instructions_1.backendApiInstructions.implementationGuidelines).withCoreKnowledge(backend_api_instructions_1.backendApiInstructions.coreKnowledge).withApiDocs().withExamples();
+      }).withRole(backend_api_instructions_1.backendApiInstructions.role).withContextExplanation().withCorePrinciples().withOutputConstraints().withImplementationGuidelines(backend_api_instructions_1.backendApiInstructions.implementationGuidelines).withCoreKnowledge(backend_api_instructions_1.backendApiInstructions.coreKnowledge).withApiDocs().withExamples();
       return systemPrompt.compose();
     };
     exports2.backendApiPrompt = backendApiPrompt;
@@ -66647,7 +66750,7 @@ ${(0, dynamicParameters_1.dynamicParametersPrompt)()}` : embedded_script_instruc
         apiNames,
         useData,
         useIteration
-      }).withRole(embedded_script_instructions_1.embeddedScriptInstructions.role).withContextExplanation().withSection("embedded_script_extension_files_and_code", embedded_script_instructions_1.embeddedScriptInstructions.embeddedScriptFilesAndCode).withImplementationGuidelines(embeddedScriptImplementationGuidelines).withImplementationPatterns(embedded_script_instructions_1.embeddedScriptInstructions.embeddedScriptImplementationPatterns).withCorePrinciples().withApiDocs().withExamples();
+      }).withRole(embedded_script_instructions_1.embeddedScriptInstructions.role).withContextExplanation().withSection("embedded_script_extension_files_and_code", embedded_script_instructions_1.embeddedScriptInstructions.embeddedScriptFilesAndCode).withImplementationGuidelines(embeddedScriptImplementationGuidelines).withImplementationPatterns(embedded_script_instructions_1.embeddedScriptInstructions.embeddedScriptImplementationPatterns).withCorePrinciples().withOutputConstraints().withApiDocs().withExamples();
       return systemPrompt.compose();
     };
     exports2.embeddedScriptPrompt = embeddedScriptPrompt;
@@ -78563,11 +78666,13 @@ var require_extensionGenerators = __commonJS({
       static createCustomElementData(id, name, scaffoldDir) {
         const kebabCaseComponentName = (0, ditto_scaffolding_2.toKebabCase)(name);
         const componentPath = getScaffoldPath(scaffoldDir, "widget.tsx");
+        const settingsPath = getScaffoldPath(scaffoldDir, "panel.tsx");
         return {
           id,
           name,
           tagName: kebabCaseComponentName,
           element: componentPath,
+          settings: settingsPath,
           installation: { autoAdd: true },
           width: { defaultWidth: 500, allowStretch: true },
           height: { defaultHeight: 500 }

package/dist/wix-cli-templates/src/site/widgets/custom-elements/my-widget/panel.tsx

@@ -0,0 +1,53 @@
+import React, { type FC, useState, useEffect, useCallback } from "react";
+import { widget } from "@wix/editor";
+import {
+  SidePanel,
+  WixDesignSystemProvider,
+  Input,
+  FormField,
+} from "@wix/design-system";
+import "@wix/design-system/styles.global.css";
+
+const Panel: FC = () => {
+  const [displayName, setDisplayName] = useState<string>("");
+
+  useEffect(() => {
+    widget
+      .getProp("display-name")
+      .then((displayName) =>
+        setDisplayName(displayName || `Your Widget's Title`),
+      )
+      .catch((error) => console.error("Failed to fetch display-name:", error));
+  }, [setDisplayName]);
+
+  const handleDisplayNameChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const newDisplayName = event.target.value;
+      setDisplayName(newDisplayName);
+      widget.setProp("display-name", newDisplayName);
+    },
+    [setDisplayName],
+  );
+
+  return (
+    <WixDesignSystemProvider>
+      <SidePanel width="300" height="100vh">
+        <SidePanel.Content noPadding stretchVertically>
+          <SidePanel.Field>
+            <FormField label="Display Name">
+              <Input
+                type="text"
+                value={displayName}
+                onChange={handleDisplayNameChange}
+                aria-label="Display Name"
+              />
+            </FormField>
+          </SidePanel.Field>
+        </SidePanel.Content>
+      </SidePanel>
+    </WixDesignSystemProvider>
+  );
+};
+
+export default Panel;
+

package/dist/wix-cli-templates/src/site/widgets/custom-elements/my-widget/widget.tsx

@@ -1,5 +1,34 @@
-export default class extends HTMLElement {
-  public connectedCallback() {
-    this.innerHTML = `<div data-testid="custom-element">Hello from custom element!</div>`;
+import React, { type FC } from 'react';
+import ReactDOM from 'react-dom';
+import reactToWebComponent from 'react-to-webcomponent';
+
+interface Props {
+  displayName?: string;
+}
+
+const CustomElement: FC<Props> = ({
+  displayName = `Your Widget's Title`,
+}) => {
+  return (
+    <div>
+      <h2>{displayName}</h2>
+      <hr />
+      <p>
+        This is a Site Widget generated by Wix CLI.<br />
+      </p>
+    </div>
+  );
+};
+
+const customElement = reactToWebComponent(
+  CustomElement,
+  React,
+  ReactDOM as any,
+  {
+    props: {
+      displayName: 'string',
+    },
   }
-}
+);
+
+export default customElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/ditto-codegen-public",
-  "version": "1.0.181",
+  "version": "1.0.183",
   "description": "AI-powered Wix CLI app generator - standalone executable",
   "scripts": {
     "build": "node build.mjs",
@@ -24,5 +24,5 @@
     "@wix/ditto-codegen": "1.0.0",
     "esbuild": "^0.25.9"
   },
-  "falconPackageHash": "151737a032f3a8f5f4f0c4f06b5f3327f6ae413df19d0c5acb41af5d"
+  "falconPackageHash": "4dda91599e3e7aacc90417a2c99a0c0c293c409b3a4ac6293f97cae0"
 }