@wix/ditto-codegen-public 1.0.171 → 1.0.173

package/dist/examples-apps/custom-element/src/widgets/custom-elements/countdown-timer/widget.tsx

@@ -1,9 +1,11 @@
-interface CountdownTimerData {
-  title: string;
-  endDateTime: string;
-  targetUrl?: string;
+import { items } from '@wix/data';
+import { window as wixWindow } from '@wix/site-window';
+
+interface CountdownConfig {
+  _id: string;
+  targetDate: Date;
+  title?: string;
   isActive: boolean;
-  description?: string;
 }
 
 interface TimeRemaining {
@@ -15,41 +17,65 @@ interface TimeRemaining {
 
 export default class extends HTMLElement {
   private intervalId: number | null = null;
-  private timerData: CountdownTimerData | null = null;
+  private config: CountdownConfig | null = null;
+  private isEditorMode = false;
 
-  public connectedCallback(): void {
-    this.loadTimerData();
+  public async connectedCallback(): Promise<void> {
+    await this.checkEnvironment();
+    if (this.isEditorMode) {
+      this.renderEditorPlaceholder();
+    } else {
+      await this.loadConfig();
+    }
   }
 
   public disconnectedCallback(): void {
     if (this.intervalId !== null) {
       clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+
+  private async checkEnvironment(): Promise<void> {
+    try {
+      const currentViewMode = await wixWindow.viewMode();
+      this.isEditorMode = currentViewMode === 'Editor';
+    } catch (error) {
+      console.error('Failed to check view mode:', error);
+      this.isEditorMode = false;
     }
   }
 
-  private async loadTimerData(): Promise<void> {
+  private async loadConfig(): Promise<void> {
     try {
-      const timerData: CountdownTimerData = {
-        title: 'Special Offer Ends Soon!',
-        endDateTime: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
-        targetUrl: undefined,
-        isActive: true,
-        description: undefined
-      };
-
-      this.timerData = timerData;
-      this.render();
-      this.startCountdown();
+      const result = await items.query('countdown-config')
+        .eq('isActive', true)
+        .limit(1)
+        .find();
+
+      if (result.items.length > 0) {
+        const item = result.items[0];
+        this.config = {
+          _id: item._id as string,
+          targetDate: new Date(item.targetDate as string),
+          title: item.title as string | undefined,
+          isActive: item.isActive as boolean
+        };
+        this.render();
+        this.startCountdown();
+      } else {
+        this.renderNoConfig();
+      }
     } catch (error) {
-      console.error('Failed to load timer data:', error);
+      console.error('Failed to load countdown config:', error);
       this.renderError();
     }
   }
 
-  private calculateTimeRemaining(endDate: string): TimeRemaining | null {
+  private calculateTimeRemaining(targetDate: Date): TimeRemaining | null {
     const now = new Date().getTime();
-    const end = new Date(endDate).getTime();
-    const difference = end - now;
+    const target = targetDate.getTime();
+    const difference = target - now;
 
     if (difference <= 0) {
       return null;
@@ -64,7 +90,7 @@ export default class extends HTMLElement {
   }
 
   private startCountdown(): void {
-    if (!this.timerData || !this.timerData.isActive) {
+    if (!this.config || !this.config.isActive) {
       return;
     }
 
@@ -74,12 +100,12 @@ export default class extends HTMLElement {
   }
 
   private updateCountdown(): void {
-    if (!this.timerData) {
+    if (!this.config) {
       return;
     }
 
-    const timeRemaining = this.calculateTimeRemaining(this.timerData.endDateTime);
-    
+    const timeRemaining = this.calculateTimeRemaining(this.config.targetDate);
+
     if (timeRemaining === null) {
       this.renderExpired();
       if (this.intervalId !== null) {
@@ -93,12 +119,12 @@ export default class extends HTMLElement {
   }
 
   private render(): void {
-    if (!this.timerData) {
+    if (!this.config) {
       return;
     }
 
-    const timeRemaining = this.calculateTimeRemaining(this.timerData.endDateTime);
-    
+    const timeRemaining = this.calculateTimeRemaining(this.config.targetDate);
+
     if (timeRemaining === null) {
       this.renderExpired();
     } else {
@@ -106,220 +132,355 @@ export default class extends HTMLElement {
     }
   }
 
-  private renderCountdown(timeRemaining: TimeRemaining): void {
-    if (!this.timerData) {
-      return;
-    }
-
-    const containerStyle = `
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
-      padding: 24px;
-      border-radius: 12px;
-      text-align: center;
-      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-      max-width: 500px;
-      margin: 0 auto;
-    `;
+  private getStyles(): string {
+    return `
+      <style>
+        /* Editor Placeholder Styles */
+        .editor-container {
+          font-family: 'Courier New', monospace;
+          background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+          color: #00ff88;
+          padding: 48px 24px;
+          border-radius: 16px;
+          text-align: center;
+          box-shadow: 0 8px 32px rgba(0, 255, 136, 0.2);
+          max-width: 600px;
+          margin: 0 auto;
+          border: 2px solid #00ff88;
+        }
 
-    const titleStyle = `
-      font-size: 24px;
-      font-weight: 700;
-      margin: 0 0 8px 0;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    `;
+        .editor-icon {
+          font-size: 64px;
+          margin-bottom: 16px;
+          animation: pulse 2s ease-in-out infinite;
+        }
 
-    const descriptionStyle = `
-      font-size: 16px;
-      opacity: 0.9;
-      margin: 0 0 24px 0;
-      line-height: 1.4;
-    `;
+        .editor-title {
+          font-size: 28px;
+          font-weight: 700;
+          margin: 0 0 12px 0;
+          text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
+          letter-spacing: 2px;
+        }
 
-    const timerGridStyle = `
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 16px;
-      margin: 24px 0;
-    `;
+        .editor-message {
+          font-size: 16px;
+          opacity: 0.85;
+          margin: 0;
+          line-height: 1.6;
+        }
 
-    const timeUnitStyle = `
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: 8px;
-      padding: 16px 8px;
-      backdrop-filter: blur(10px);
-    `;
+        /* Countdown Timer Styles */
+        .timer-container {
+          font-family: 'Orbitron', 'Rajdhani', 'Exo 2', monospace, sans-serif;
+          background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
+          color: #00d9ff;
+          padding: 40px 24px;
+          border-radius: 20px;
+          text-align: center;
+          box-shadow: 0 20px 60px rgba(0, 217, 255, 0.3), inset 0 0 40px rgba(0, 217, 255, 0.1);
+          max-width: 700px;
+          margin: 0 auto;
+          position: relative;
+          overflow: hidden;
+        }
 
-    const numberStyle = `
-      font-size: 32px;
-      font-weight: 800;
-      margin: 0;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    `;
+        .timer-glow {
+          content: '';
+          position: absolute;
+          top: -50%;
+          left: -50%;
+          width: 200%;
+          height: 200%;
+          background: radial-gradient(circle, rgba(0, 217, 255, 0.1) 0%, transparent 70%);
+          animation: rotate 10s linear infinite;
+        }
 
-    const labelStyle = `
-      font-size: 12px;
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      margin: 4px 0 0 0;
-      opacity: 0.8;
-    `;
+        .timer-title {
+          font-size: 32px;
+          font-weight: 900;
+          margin: 0 0 12px 0;
+          text-shadow: 0 0 20px rgba(0, 217, 255, 0.8), 0 0 40px rgba(0, 217, 255, 0.4);
+          letter-spacing: 3px;
+          text-transform: uppercase;
+          position: relative;
+          z-index: 1;
+        }
 
-    const buttonStyle = `
-      background: rgba(255, 255, 255, 0.2);
-      color: white;
-      border: 2px solid rgba(255, 255, 255, 0.3);
-      padding: 12px 24px;
-      border-radius: 6px;
-      font-size: 16px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      text-decoration: none;
-      display: inline-block;
-      margin-top: 16px;
-      backdrop-filter: blur(10px);
-    `;
+        .timer-grid {
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+          gap: 20px;
+          margin: 32px 0;
+          position: relative;
+          z-index: 1;
+        }
 
-    const buttonHoverStyle = `
-      background: rgba(255, 255, 255, 0.3);
-      border-color: rgba(255, 255, 255, 0.5);
-      transform: translateY(-2px);
-    `;
+        .time-unit {
+          background: rgba(0, 217, 255, 0.15);
+          border-radius: 12px;
+          padding: 24px 12px;
+          backdrop-filter: blur(10px);
+          border: 2px solid rgba(0, 217, 255, 0.3);
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(0, 217, 255, 0.1);
+          transition: all 0.3s ease;
+        }
 
-    const responsiveStyle = `
-      @media (max-width: 480px) {
-        .timer-grid {
-          grid-template-columns: repeat(2, 1fr);
-          gap: 12px;
+        .time-unit:hover {
+          transform: translateY(-4px);
+          border-color: rgba(0, 217, 255, 0.6);
+          box-shadow: 0 12px 40px rgba(0, 217, 255, 0.4), inset 0 0 30px rgba(0, 217, 255, 0.2);
         }
+
         .time-number {
+          font-size: 48px;
+          font-weight: 900;
+          margin: 0;
+          text-shadow: 0 0 15px rgba(0, 217, 255, 0.8), 0 0 30px rgba(0, 217, 255, 0.4);
+          font-family: 'Orbitron', monospace;
+          letter-spacing: 2px;
+        }
+
+        .time-label {
+          font-size: 13px;
+          text-transform: uppercase;
+          letter-spacing: 2px;
+          margin: 8px 0 0 0;
+          opacity: 0.9;
+          font-weight: 700;
+        }
+
+        /* Expired State Styles */
+        .expired-container {
+          font-family: 'Bebas Neue', 'Anton', 'Oswald', sans-serif;
+          background: linear-gradient(135deg, #2d1b00 0%, #5c3a1f 50%, #8b4513 100%);
+          color: #ffa500;
+          padding: 48px 24px;
+          border-radius: 20px;
+          text-align: center;
+          box-shadow: 0 20px 60px rgba(255, 165, 0, 0.4), inset 0 0 40px rgba(255, 165, 0, 0.1);
+          max-width: 600px;
+          margin: 0 auto;
+          border: 3px solid #ffa500;
+        }
+
+        .expired-icon {
+          font-size: 80px;
+          margin-bottom: 16px;
+          animation: bounce 1s ease-in-out infinite;
+        }
+
+        .expired-title {
+          font-size: 48px;
+          font-weight: 900;
+          margin: 0 0 16px 0;
+          text-shadow: 0 0 20px rgba(255, 165, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.5);
+          letter-spacing: 4px;
+          text-transform: uppercase;
+        }
+
+        .expired-message {
+          font-size: 20px;
+          margin: 0;
+          opacity: 0.95;
+          font-weight: 600;
+          letter-spacing: 1px;
+        }
+
+        /* No Config State Styles */
+        .no-config-container {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+          color: #2c3e50;
+          padding: 40px 24px;
+          border-radius: 16px;
+          text-align: center;
+          border: 2px dashed #95a5a6;
+          max-width: 500px;
+          margin: 0 auto;
+        }
+
+        .no-config-icon {
+          font-size: 64px;
+          margin-bottom: 16px;
+        }
+
+        .no-config-title {
           font-size: 24px;
+          font-weight: 700;
+          margin: 0 0 12px 0;
+          color: #34495e;
         }
-        .timer-container {
-          padding: 16px;
+
+        .no-config-message {
+          font-size: 16px;
+          margin: 0;
+          line-height: 1.6;
+          color: #7f8c8d;
         }
-      }
-    `;
 
-    this.innerHTML = `
-      <style>
-        ${responsiveStyle}
-        .timer-button:hover {
-          ${buttonHoverStyle}
+        /* Error State Styles */
+        .error-container {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          background: #fff5f5;
+          color: #c53030;
+          padding: 32px 24px;
+          border-radius: 12px;
+          text-align: center;
+          border: 2px solid #fc8181;
+          max-width: 500px;
+          margin: 0 auto;
+        }
+
+        .error-icon {
+          font-size: 48px;
+          margin-bottom: 12px;
+        }
+
+        .error-message {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 600;
+        }
+
+        /* Animations */
+        @keyframes pulse {
+          0%, 100% { 
+            opacity: 1; 
+            transform: scale(1); 
+          }
+          50% { 
+            opacity: 0.6; 
+            transform: scale(1.1); 
+          }
+        }
+
+        @keyframes rotate {
+          from { 
+            transform: rotate(0deg); 
+          }
+          to { 
+            transform: rotate(360deg); 
+          }
+        }
+
+        @keyframes bounce {
+          0%, 100% { 
+            transform: translateY(0); 
+          }
+          50% { 
+            transform: translateY(-20px); 
+          }
+        }
+
+        /* Responsive Styles */
+        @media (max-width: 600px) {
+          .timer-grid {
+            grid-template-columns: repeat(2, 1fr);
+            gap: 16px;
+          }
+
+          .time-number {
+            font-size: 36px;
+          }
+
+          .timer-container {
+            padding: 24px 16px;
+          }
+
+          .timer-title {
+            font-size: 24px;
+          }
         }
       </style>
-      <div class="timer-container" style="${containerStyle}" data-testid="countdown-timer">
-        <h2 style="${titleStyle}">${this.escapeHtml(this.timerData.title)}</h2>
-        ${this.timerData.description ? `<p style="${descriptionStyle}">${this.escapeHtml(this.timerData.description)}</p>` : ''}
-        
-        <div class="timer-grid" style="${timerGridStyle}">
-          <div style="${timeUnitStyle}">
-            <div class="time-number" style="${numberStyle}">${timeRemaining.days.toString().padStart(2, '0')}</div>
-            <div style="${labelStyle}">Days</div>
-          </div>
-          <div style="${timeUnitStyle}">
-            <div class="time-number" style="${numberStyle}">${timeRemaining.hours.toString().padStart(2, '0')}</div>
-            <div style="${labelStyle}">Hours</div>
-          </div>
-          <div style="${timeUnitStyle}">
-            <div class="time-number" style="${numberStyle}">${timeRemaining.minutes.toString().padStart(2, '0')}</div>
-            <div style="${labelStyle}">Minutes</div>
-          </div>
-          <div style="${timeUnitStyle}">
-            <div class="time-number" style="${numberStyle}">${timeRemaining.seconds.toString().padStart(2, '0')}</div>
-            <div style="${labelStyle}">Seconds</div>
-          </div>
-        </div>
-        
-        ${this.timerData.targetUrl ? `
-          <a href="${this.escapeHtml(this.timerData.targetUrl)}" 
-             class="timer-button" 
-             style="${buttonStyle}"
-             role="button"
-             aria-label="Take action before timer expires">
-            Don't Miss Out!
-          </a>
-        ` : ''}
+    `;
+  }
+
+  private renderEditorPlaceholder(): void {
+    this.innerHTML = `
+      ${this.getStyles()}
+      <div class="editor-container" data-testid="countdown-timer-editor">
+        <div class="editor-icon">⏱️</div>
+        <h2 class="editor-title">COUNTDOWN TIMER</h2>
+        <p class="editor-message">
+          This widget will display a live countdown on your published site.<br>
+          Configure the target date in your dashboard to get started.
+        </p>
       </div>
     `;
   }
 
-  private renderExpired(): void {
-    if (!this.timerData) {
+  private renderCountdown(timeRemaining: TimeRemaining): void {
+    if (!this.config) {
       return;
     }
 
-    const containerStyle = `
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
-      color: white;
-      padding: 24px;
-      border-radius: 12px;
-      text-align: center;
-      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-      max-width: 500px;
-      margin: 0 auto;
-    `;
+    const timeUnits = [
+      { value: timeRemaining.days, label: 'Days' },
+      { value: timeRemaining.hours, label: 'Hours' },
+      { value: timeRemaining.minutes, label: 'Minutes' },
+      { value: timeRemaining.seconds, label: 'Seconds' }
+    ];
+
+    const timeUnitsHtml = timeUnits
+      .map(unit => `
+        <div class="time-unit">
+          <div class="time-number">${unit.value.toString().padStart(2, '0')}</div>
+          <div class="time-label">${unit.label}</div>
+        </div>
+      `)
+      .join('');
 
-    const titleStyle = `
-      font-size: 24px;
-      font-weight: 700;
-      margin: 0 0 16px 0;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    `;
+    const titleHtml = this.config.title
+      ? `<h2 class="timer-title">${this.escapeHtml(this.config.title)}</h2>`
+      : '';
 
-    const messageStyle = `
-      font-size: 18px;
-      margin: 0;
-      opacity: 0.9;
+    this.innerHTML = `
+      ${this.getStyles()}
+      <div class="timer-container" data-testid="countdown-timer">
+        <div class="timer-glow"></div>
+        ${titleHtml}
+        <div class="timer-grid">
+          ${timeUnitsHtml}
+        </div>
+      </div>
     `;
+  }
+
+  private renderExpired(): void {
+    const message = this.config && this.config.title
+      ? `${this.escapeHtml(this.config.title)} has ended.`
+      : 'The countdown has ended.';
 
     this.innerHTML = `
-      <div style="${containerStyle}" data-testid="countdown-timer-expired">
-        <h2 style="${titleStyle}">⏰ Time's Up!</h2>
-        <p style="${messageStyle}">${this.escapeHtml(this.timerData.title)} has ended.</p>
-        ${this.timerData.targetUrl ? `
-          <a href="${this.escapeHtml(this.timerData.targetUrl)}" 
-             style="
-               background: rgba(255, 255, 255, 0.2);
-               color: white;
-               border: 2px solid rgba(255, 255, 255, 0.3);
-               padding: 12px 24px;
-               border-radius: 6px;
-               font-size: 16px;
-               font-weight: 600;
-               cursor: pointer;
-               text-decoration: none;
-               display: inline-block;
-               margin-top: 16px;
-               backdrop-filter: blur(10px);
-             "
-             role="button">
-            Learn More
-          </a>
-        ` : ''}
+      ${this.getStyles()}
+      <div class="expired-container" data-testid="countdown-timer-expired">
+        <div class="expired-icon">🎉</div>
+        <h2 class="expired-title">Time's Up!</h2>
+        <p class="expired-message">${message}</p>
       </div>
     `;
   }
 
-  private renderError(): void {
-    const containerStyle = `
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #f8f9fa;
-      color: #6c757d;
-      padding: 24px;
-      border-radius: 12px;
-      text-align: center;
-      border: 2px dashed #dee2e6;
-      max-width: 500px;
-      margin: 0 auto;
+  private renderNoConfig(): void {
+    this.innerHTML = `
+      ${this.getStyles()}
+      <div class="no-config-container" data-testid="countdown-timer-no-config">
+        <div class="no-config-icon">⚙️</div>
+        <h2 class="no-config-title">No Active Countdown</h2>
+        <p class="no-config-message">
+          Please configure a countdown timer in your dashboard to display it here.
+        </p>
+      </div>
     `;
+  }
 
+  private renderError(): void {
     this.innerHTML = `
-      <div style="${containerStyle}" data-testid="countdown-timer-error">
-        <p style="margin: 0; font-size: 16px;">⚠️ Unable to load countdown timer</p>
+      ${this.getStyles()}
+      <div class="error-container" data-testid="countdown-timer-error">
+        <div class="error-icon">⚠️</div>
+        <p class="error-message">Unable to load countdown timer</p>
       </div>
     `;
   }

package/dist/out.js

@@ -39504,6 +39504,23 @@ Expected plan (abbreviated):
   }
 });
 
+// dist/system-prompts/system-prompt-builders/utils/typescript-quality-guidelines.js
+var require_typescript_quality_guidelines = __commonJS({
+  "dist/system-prompts/system-prompt-builders/utils/typescript-quality-guidelines.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.typescriptQualityGuidelines = void 0;
+    exports2.typescriptQualityGuidelines = `<typescript_quality_guidelines>
+- Generated code MUST compile with zero TypeScript errors under strict settings:
+  strict, noImplicitAny, strictNullChecks, exactOptionalPropertyTypes, noUncheckedIndexedAccess
+- Prefer type-narrowing and exhaustive logic over assertions; avoid non-null assertions (!) and unsafe casts (as any)
+- Treat optional values, refs, and array indexing results as possibly undefined and handle them explicitly
+- Use exhaustive checks for unions (e.g., switch with a never check) and return total values (no implicit undefined)
+- Do NOT use // @ts-ignore or // @ts-expect-error; fix the types or add guards instead
+</typescript_quality_guidelines>`;
+  }
+});
+
 // dist/system-prompts/dashboardPage/dashboardPackage.js
 var require_dashboardPackage = __commonJS({
   "dist/system-prompts/dashboardPage/dashboardPackage.js"(exports2) {
@@ -64348,7 +64365,7 @@ ${componentDescription}
 </description>${featuresBlock}
 </component>`;
     }
-    async function buildWdsSystemPrompt(allowedComponents) {
+    function buildWdsSystemPrompt(allowedComponents) {
       const parsedData = wdsJson;
       const relevantComponents = (parsedData.items || []).filter((component) => allowedComponents.has(component.storyName));
       if (!relevantComponents.length) {
@@ -64369,6 +64386,7 @@ var require_dashboard_page_instructions = __commonJS({
     Object.defineProperty(exports2, "__esModule", { value: true });
     exports2.dashboardPageInstructions = void 0;
     var apiSpec_1 = require_apiSpec();
+    var typescript_quality_guidelines_1 = require_typescript_quality_guidelines();
     var dashboardPackage_1 = require_dashboardPackage();
     var data_1 = require_data();
     var dynamicParameters_1 = require_dynamicParameters();
@@ -64468,34 +64486,18 @@ export default function () {
 - Do NOT use components from @wix/wix-ui-icons-common unless you know the correct import path and it's explicitly needed for icons
 - Always verify component availability before using it in your generated code
 - If you need a component not in the list, use a basic HTML element or create a simple custom component instead`;
-    var dashboardPageWdsReference = async () => {
-      const wdsPrompt = await (0, wdsPackage_1.buildWdsSystemPrompt)(supportedWDSComponents);
-      return wdsPrompt;
-    };
-    var dashboardApiReferences = `${dashboardPackage_1.dashboardPackage}
-${ecomPackage_1.ecomPackage}`;
-    var dashboardPageTypescriptQualityGuidelines = `<typescript_quality_guidelines>
-- Generated code MUST compile with zero TypeScript errors under strict settings:
-  strict, noImplicitAny, strictNullChecks, exactOptionalPropertyTypes, noUncheckedIndexedAccess
-- Prefer type-narrowing and exhaustive logic over assertions; avoid non-null assertions (!) and unsafe casts (as any)
-- Treat optional values, refs, and array indexing results as possibly undefined and handle them explicitly
-- Use exhaustive checks for unions (e.g., switch with a never check) and return total values (no implicit undefined)
-- Do NOT use // @ts-ignore or // @ts-expect-error; fix the types or add guards instead
-</typescript_quality_guidelines>`;
-    var dashboardPageDataPrompt = data_1.dataPrompt;
-    var dashboardPageApiSpecPrompt = (0, apiSpec_1.apiSpecPrompt)();
-    var dashboardPageDynamicParametersManagementPrompt = (0, dynamicParameters_1.dynamicParametersManagementPrompt)();
     exports2.dashboardPageInstructions = {
       role: dashboardPageRole,
       filesAndCode: dashboardPageFilesAndCode,
       wdsProviderUsage: dashboardPageWdsProviderUsage,
       hardConstraints: dashboardPageHardConstraints,
-      wdsReference: () => dashboardPageWdsReference(),
-      apiReferences: dashboardApiReferences,
-      typescriptQualityGuidelines: dashboardPageTypescriptQualityGuidelines,
-      dataPrompt: dashboardPageDataPrompt,
-      apiSpecPrompt: dashboardPageApiSpecPrompt,
-      dynamicParametersManagementPrompt: dashboardPageDynamicParametersManagementPrompt
+      wdsReference: () => (0, wdsPackage_1.buildWdsSystemPrompt)(supportedWDSComponents),
+      apiReferences: `${dashboardPackage_1.dashboardPackage}
+${ecomPackage_1.ecomPackage}`,
+      typescriptQualityGuidelines: typescript_quality_guidelines_1.typescriptQualityGuidelines,
+      dataPrompt: data_1.dataPrompt,
+      apiSpecPrompt: (0, apiSpec_1.apiSpecPrompt)(),
+      dynamicParametersManagementPrompt: (0, dynamicParameters_1.dynamicParametersManagementPrompt)()
     };
   }
 });
@@ -65342,13 +65344,12 @@ var require_dashboard_page_prompt = __commonJS({
     var dashboard_page_instructions_1 = require_dashboard_page_instructions();
     var CodeGenerationSystemPromptBuilder_1 = require_CodeGenerationSystemPromptBuilder();
     var dashboardPagePrompt = async ({ useData, useApiSpec, useDynamicParameters, apiNames, useIteration }) => {
-      const wdsReference = await dashboard_page_instructions_1.dashboardPageInstructions.wdsReference();
       const systemPrompt = (0, CodeGenerationSystemPromptBuilder_1.codeGenerationSystemPromptBuilder)({
         agentType: types_impl_1.ExtensionType.DASHBOARD_PAGE,
         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", 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().withImplementationGuidelines(dashboard_page_instructions_1.dashboardPageInstructions.typescriptQualityGuidelines).withExamples();
       if (useData) {
         systemPrompt.withSection("data_prompt", dashboard_page_instructions_1.dashboardPageInstructions.dataPrompt);
       }
@@ -65700,6 +65701,7 @@ var require_site_component_instructions = __commonJS({
     "use strict";
     Object.defineProperty(exports2, "__esModule", { value: true });
     exports2.siteComponentInstructions = void 0;
+    var typescript_quality_guidelines_1 = require_typescript_quality_guidelines();
     var siteComponentRole = "You are a senior Wix CLI App Developer and React expert. Your job is to produce a beautiful, production\u2011quality site component quickly and correctly.";
     var siteComponentImplementationGuidelines = `<rules>
     - Return ONLY a JSON object matching the schema { path, content, type } (no prose, no markdown)
@@ -65722,14 +65724,7 @@ var require_site_component_instructions = __commonJS({
     - Name things clearly; avoid magic numbers; extract tiny helpers if it improves clarity
     </engineering_guidelines>
 
-    <typescript_quality_guidelines>
-    - Generated code MUST compile with zero TypeScript errors under strict settings:
-      strict, noImplicitAny, strictNullChecks, exactOptionalPropertyTypes, noUncheckedIndexedAccess
-    - Prefer type-narrowing and exhaustive logic over assertions; avoid non-null assertions (!) and unsafe casts (as any)
-    - Treat optional values, refs, and array indexing results as possibly undefined and handle them explicitly
-    - Use exhaustive checks for unions (e.g., switch with a never check) and return total values (no implicit undefined)
-    - Do NOT use // @ts-ignore or // @ts-expect-error; fix the types or add guards instead
-    </typescript_quality_guidelines>
+    ${typescript_quality_guidelines_1.typescriptQualityGuidelines}
 `;
     exports2.siteComponentInstructions = {
       role: siteComponentRole,
@@ -65813,6 +65808,7 @@ var require_custom_element_instructions = __commonJS({
     "use strict";
     Object.defineProperty(exports2, "__esModule", { value: true });
     exports2.customElementInstructions = void 0;
+    var typescript_quality_guidelines_1 = require_typescript_quality_guidelines();
     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)
@@ -65827,14 +65823,7 @@ var require_custom_element_instructions = __commonJS({
     - Name things clearly; avoid magic numbers; extract tiny helpers if it improves clarity
     </engineering_guidelines>
 
-    <typescript_quality_guidelines>
-    - Generated code MUST compile with zero TypeScript errors under strict settings:
-      strict, noImplicitAny, strictNullChecks, exactOptionalPropertyTypes, noUncheckedIndexedAccess
-    - Prefer type-narrowing and exhaustive logic over assertions; avoid non-null assertions (!) and unsafe casts (as any)
-    - Treat optional values, refs, and array indexing results as possibly undefined and handle them explicitly
-    - Use exhaustive checks for unions (e.g., switch with a never check) and return total values (no implicit undefined)
-    - Do NOT use // @ts-ignore or // @ts-expect-error; fix the types or add guards instead
-    </typescript_quality_guidelines>
+    ${typescript_quality_guidelines_1.typescriptQualityGuidelines}
 
     <frontend_aesthetics>
     You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.
@@ -66304,13 +66293,13 @@ var require_backend_api_instructions = __commonJS({
     var backendApiRole = `You are a specialized code-generation agent for creating Astro Server Endpoints (API Routes) for fullstack applications.`;
     var backendApiImplementationGuidelines = `Generate clean, well-structured Astro Server Endpoints based on the API Spec that follow these patterns and best practices.
 Focus on creating maintainable, secure, and efficient API routes that integrate well with frontend applications.`;
-    var backendApiCoreKnowledge = `### Astro Server Endpoints Overview
+    var backendApiCoreKnowledge = `<astro_server_endpoints_overview>
 - Astro Server Endpoints are API routes that run on the server side
 - They are located in the \`src/pages/api/\` directory
 - Each file exports named functions for HTTP methods (GET, POST, PUT, DELETE, etc.)
 - Files use the \`.ts\` extension and are automatically converted to API endpoints
-
-### File Structure and Naming
+</astro_server_endpoints_overview>
+<file_structure_and_naming>
 - API routes are created in \`src/pages/api/\` directory
 - File names become the endpoint path (e.g., \`users.ts\` \u2192 \`/api/users\`)
 - For dynamic routes with parameters, use square brackets in the filename (e.g., \`/api/users/[id]\`)
@@ -66339,39 +66328,40 @@ export async function GET({ params }) {
   });
 }
 \`\`\`
-
-### TypeScript Patterns
+</file_structure_and_naming>
+<typescript_patterns>
 - Import \`APIRoute\` type from 'astro'
 - Export named functions for HTTP methods: \`GET\`, \`POST\`, \`PUT\`, \`DELETE\`, \`PATCH\`
 - Use async/await for handling asynchronous operations
 - Always return a \`Response\` object
-
-### Request Handling
+</typescript_patterns>
+<request_handling>
 - Access request data through the \`request\` parameter
 - Use \`request.json()\` for POST/PUT request bodies
 - Use \`request.url\` for the full URL
 - Use \`new URL(request.url).searchParams\` for query parameters
 - Access headers via \`request.headers\`
-
-### Response Patterns
+</request_handling>
+<response_patterns>
 - Always return a \`Response\` object
 - Use \`JSON.stringify()\` for JSON responses
 - Set appropriate status codes (200, 201, 400, 404, 500, etc.)
 - Include proper headers, especially \`Content-Type: application/json\`
-
-### Common Patterns
+</response_patterns>
+<common_patterns>
 - GET endpoints for data retrieval
 - POST endpoints for data creation
 - PUT/PATCH endpoints for data updates
 - DELETE endpoints for data removal
 - Use proper HTTP status codes
-
-### Best Practices
+</common_patterns>
+<best_practices>
 - Use proper TypeScript types
 - Return appropriate HTTP status codes
 - Include proper headers
 - Use async/await for asynchronous operations
-- Keep endpoints focused and single-purpose`;
+- Keep endpoints focused and single-purpose
+</best_practices>`;
     exports2.backendApiInstructions = {
       role: backendApiRole,
       implementationGuidelines: backendApiImplementationGuidelines,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/ditto-codegen-public",
-  "version": "1.0.171",
+  "version": "1.0.173",
   "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": "40fa676f6231cebb54833b3bd440ad0d833557d1ccab2e07fe8483c5"
+  "falconPackageHash": "143c2dbe2321cf37cf808acd5d4052c36631cc0a6f612540411cf062"
 }