@wix/ditto-codegen-public 1.0.181 → 1.0.182

package/dist/examples-apps/custom-element/countdown-widget/components/ColorPickerField.tsx

@@ -0,0 +1,27 @@
+import React, { type FC } from 'react';
+import { inputs } from '@wix/editor';
+import { FormField, Box, FillPreview, SidePanel } from '@wix/design-system';
+
+interface ColorPickerFieldProps {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const ColorPickerField: FC<ColorPickerFieldProps> = ({
+  label,
+  value,
+  onChange,
+}) => (
+  <SidePanel.Field>
+    <FormField label={label}>
+      <Box width="30px" height="30px">
+        <FillPreview
+          fill={value}
+          onClick={() => inputs.selectColor(value, { onChange })}
+        />
+      </Box>
+    </FormField>
+  </SidePanel.Field>
+);
+

package/dist/examples-apps/custom-element/countdown-widget/components/FontPickerField.tsx

@@ -0,0 +1,34 @@
+import React, { type FC } from 'react';
+import { inputs } from '@wix/editor';
+import { FormField, Button, Text, SidePanel } from '@wix/design-system';
+
+interface FontValue {
+  font: string;
+  textDecoration: string;
+}
+
+interface FontPickerFieldProps {
+  label: string;
+  value: FontValue;
+  onChange: (value: FontValue) => void;
+}
+
+export const FontPickerField: FC<FontPickerFieldProps> = ({
+  label,
+  value,
+  onChange,
+}) => (
+  <SidePanel.Field>
+    <FormField label={label}>
+      <Button
+        size="small"
+        priority="secondary"
+        onClick={() => inputs.selectFont(value, { onChange })}
+        fullWidth
+      >
+        <Text size="small" ellipsis>Change Font</Text>
+      </Button>
+    </FormField>
+  </SidePanel.Field>
+);
+

package/dist/examples-apps/custom-element/countdown-widget/components/Separator.tsx

@@ -0,0 +1,10 @@
+import React, { type FC } from 'react';
+
+interface SeparatorProps {
+  style: React.CSSProperties;
+}
+
+export const Separator: FC<SeparatorProps> = ({ style }) => (
+  <span style={style}>:</span>
+);
+

package/dist/examples-apps/custom-element/countdown-widget/components/TimeBlock.tsx

@@ -0,0 +1,23 @@
+import React, { type FC } from 'react';
+
+interface TimeBlockProps {
+  value: string;
+  label: string;
+  numberStyle: React.CSSProperties;
+  labelStyle: React.CSSProperties;
+  blockStyle: React.CSSProperties;
+}
+
+export const TimeBlock: FC<TimeBlockProps> = ({
+  value,
+  label,
+  numberStyle,
+  labelStyle,
+  blockStyle,
+}) => (
+  <div style={blockStyle}>
+    <div style={numberStyle}>{value}</div>
+    <div style={labelStyle}>{label}</div>
+  </div>
+);
+

package/dist/examples-apps/custom-element/countdown-widget/extensions.ts

@@ -0,0 +1,18 @@
+import { extensions } from '@wix/astro/builders';
+export const sitewidgetcountdownWidget = extensions.customElement({
+  id: '54db089e-aa5b-436a-9dfa-074f2efad2ce',
+  name: 'Countdown Widget',
+  tagName: 'countdown-widget',
+  element: './site/widgets/custom-elements/countdown-widget/widget.tsx',
+  settings: './site/widgets/custom-elements/countdown-widget/panel.tsx',
+  installation: {
+    autoAdd: true
+  },
+  width: {
+    defaultWidth: 500,
+    allowStretch: true
+  },
+  height: {
+    defaultHeight: 500
+  }
+})

package/dist/examples-apps/custom-element/countdown-widget/panel.tsx

@@ -0,0 +1,146 @@
+import React, { type FC, useState, useEffect, useCallback } from "react";
+import { widget } from "@wix/editor";
+import {
+  SidePanel,
+  WixDesignSystemProvider,
+  Input,
+  FormField,
+  TimeInput,
+  Box,
+} from "@wix/design-system";
+import "@wix/design-system/styles.global.css";
+import { ColorPickerField } from "./components/ColorPickerField";
+import { FontPickerField } from "./components/FontPickerField";
+import { parseTimeValue } from "./utils";
+
+const DEFAULT_BG_COLOR = "#0a0e27";
+const DEFAULT_TEXT_COLOR = "#00ff88";
+const DEFAULT_TEXT_FONT = "";
+const DEFAULT_TEXT_DECORATION = "";
+
+const Panel: FC = () => {
+  const [title, setTitle] = useState<string>("Countdown");
+  const [targetDate, setTargetDate] = useState<string>("");
+  const [targetTime, setTargetTime] = useState<string>("00:00");
+  const [bgColor, setBgColor] = useState<string>(DEFAULT_BG_COLOR);
+  const [textColor, setTextColor] = useState<string>(DEFAULT_TEXT_COLOR);
+  const [font, setFont] = useState({ font: DEFAULT_TEXT_FONT, textDecoration: DEFAULT_TEXT_DECORATION });
+
+  useEffect(() => {
+    Promise.all([
+      widget.getProp("title"),
+      widget.getProp("target-date"),
+      widget.getProp("target-time"),
+      widget.getProp("bg-color"),
+      widget.getProp("text-color"),
+      widget.getProp("font"),
+    ])
+      .then(([titleVal, dateVal, timeVal, bgColorVal, textColorVal, fontString]) => {
+        setTitle(titleVal || "Countdown");
+        setTargetDate(dateVal || "");
+        setTargetTime(timeVal || "00:00");
+        setBgColor(bgColorVal || DEFAULT_BG_COLOR);
+        setTextColor(textColorVal || DEFAULT_TEXT_COLOR);
+        setFont(JSON.parse(fontString || "{}"));
+      })
+      .catch((error) => console.error("Failed to fetch widget properties:", error));
+  }, []);
+
+  const handleTitleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newTitle = event.target.value;
+    setTitle(newTitle);
+    widget.setProp("title", newTitle);
+  }, []);
+
+  const handleDateChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newDate = event.target.value;
+    setTargetDate(newDate);
+    widget.setProp("target-date", newDate);
+  }, []);
+
+  const handleTimeChange = useCallback(({ date }: { date: Date }) => {
+    if (date) {
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      const newTime = `${hours}:${minutes}`;
+      setTargetTime(newTime);
+      widget.setProp("target-time", newTime);
+    }
+  }, []);
+
+  const handleBgColorChange = (value: string) => {
+    setBgColor(value);
+    widget.setProp("bg-color", value);
+  };
+
+  const handleTextColorChange = (value: string) => {
+    setTextColor(value);
+    widget.setProp("text-color", value);
+  };
+
+  const handleFontChange = (value: { font: string; textDecoration: string }) => {
+    setFont(value);
+    widget.setProp("font", JSON.stringify(value));
+  };
+
+  return (
+    <WixDesignSystemProvider>
+      <SidePanel width="300" height="100vh">
+        <SidePanel.Header title="Countdown Settings" />
+        <SidePanel.Content noPadding stretchVertically>
+          <Box direction="vertical" gap="24px">
+            <SidePanel.Field>
+              <FormField label="Title" required>
+                <Input
+                  type="text"
+                  value={title}
+                  onChange={handleTitleChange}
+                  placeholder="Enter countdown title"
+                />
+              </FormField>
+            </SidePanel.Field>
+
+            <SidePanel.Field>
+              <FormField label="Target Date" required>
+                <Input
+                  type="date"
+                  value={targetDate}
+                  onChange={handleDateChange}
+                />
+              </FormField>
+            </SidePanel.Field>
+
+            <SidePanel.Field>
+              <FormField label="Target Time" required>
+                <TimeInput
+                  value={parseTimeValue(targetTime)}
+                  onChange={handleTimeChange}
+                />
+              </FormField>
+            </SidePanel.Field>
+
+            <ColorPickerField
+              label="Background Color"
+              value={bgColor}
+              onChange={handleBgColorChange}
+            />
+
+            <ColorPickerField
+              label="Text Color"
+              value={textColor}
+              onChange={handleTextColorChange}
+            />
+
+            <FontPickerField
+              label="Text Font"
+              value={font}
+              onChange={handleFontChange}
+            />
+          </Box>
+        </SidePanel.Content>
+      </SidePanel>
+    </WixDesignSystemProvider>
+  );
+};
+
+export default Panel;

package/dist/examples-apps/custom-element/countdown-widget/styles.ts

@@ -0,0 +1,73 @@
+import type React from 'react';
+
+interface StyleProps {
+  bgColor: string;
+  textColor: string;
+  textFont?: string;
+  textDecoration?: string;
+}
+
+export interface WidgetStyles {
+  wrapper: React.CSSProperties;
+  title: React.CSSProperties;
+  digits: React.CSSProperties;
+  block: React.CSSProperties;
+  number: React.CSSProperties;
+  label: React.CSSProperties;
+  separator: React.CSSProperties;
+  message: React.CSSProperties;
+}
+
+export function createStyles({ bgColor, textColor, textFont, textDecoration }: StyleProps): WidgetStyles {
+  return {
+    wrapper: {
+      backgroundColor: bgColor,
+      padding: '24px 32px',
+      textAlign: 'center',
+      display: 'inline-block',
+    },
+    title: {
+      font: textFont || '600 24px sans-serif',
+      color: textColor,
+      textDecoration,
+      marginBottom: '16px',
+    },
+    digits: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '16px',
+    },
+    block: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      padding: '12px 16px',
+    },
+    number: {
+      font: textFont || '600 40px sans-serif',
+      color: textColor,
+      textDecoration,
+      lineHeight: 1,
+    },
+    label: {
+      fontSize: '12px',
+      marginTop: '8px',
+      color: textColor,
+      opacity: 0.7,
+    },
+    separator: {
+      font: textFont || '600 32px sans-serif',
+      color: textColor,
+      textDecoration,
+      lineHeight: 1,
+      opacity: 0.5,
+      marginBottom: '20px',
+    },
+    message: {
+      fontSize: '18px',
+      color: textColor,
+    },
+  };
+}
+

package/dist/examples-apps/custom-element/countdown-widget/utils.ts

@@ -0,0 +1,46 @@
+export interface TimeRemaining {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  isExpired: boolean;
+}
+
+export const INITIAL_TIME: TimeRemaining = {
+  days: 0,
+  hours: 0,
+  minutes: 0,
+  seconds: 0,
+  isExpired: false,
+};
+
+export function calculateTimeRemaining(targetDate: string, targetTime: string): TimeRemaining {
+  const target = new Date(`${targetDate}T${targetTime}`);
+  const diff = target.getTime() - Date.now();
+
+  if (diff <= 0) {
+    return { ...INITIAL_TIME, isExpired: true };
+  }
+
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+  return { days, hours, minutes, seconds, isExpired: false };
+}
+
+export function padNumber(value: number): string {
+  return String(value).padStart(2, '0');
+}
+
+export function parseTimeValue(timeString: string): Date {
+  const [hours, minutes] = timeString.split(':').map(Number);
+  const date = new Date();
+  date.setHours(hours || 0);
+  date.setMinutes(minutes || 0);
+  date.setSeconds(0);
+  date.setMilliseconds(0);
+  return date;
+}
+

package/dist/examples-apps/custom-element/countdown-widget/widget.tsx

@@ -0,0 +1,97 @@
+import React, { type FC, useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import reactToWebComponent from 'react-to-webcomponent';
+import { TimeBlock } from './components/TimeBlock';
+import { Separator } from './components/Separator';
+import { calculateTimeRemaining, padNumber, INITIAL_TIME, type TimeRemaining } from './utils';
+import { createStyles } from './styles';
+
+interface WidgetProps {
+  title?: string;
+  targetDate?: string;
+  targetTime?: string;
+  bgColor?: string;
+  textColor?: string;
+  font?: string;
+}
+
+const CustomElement: FC<WidgetProps> = ({
+  title = 'Countdown',
+  targetDate = '',
+  targetTime = '00:00',
+  bgColor = '#ffffff',
+  textColor = '#333333',
+  font = "{}",
+}) => {
+  const { font: textFont, textDecoration } = JSON.parse(font);
+  const [time, setTime] = useState<TimeRemaining>(INITIAL_TIME);
+  const styles = createStyles({ bgColor, textColor, textFont, textDecoration });
+
+  useEffect(() => {
+    if (!targetDate) return;
+
+    const update = () => setTime(calculateTimeRemaining(targetDate, targetTime));
+    update();
+
+    const interval = setInterval(update, 1000);
+    return () => clearInterval(interval);
+  }, [targetDate, targetTime]);
+
+  if (!targetDate) {
+    return (
+      <div style={styles.wrapper}>
+        {title && <div style={styles.title}>{title}</div>}
+        <div style={styles.message}>Set a target date</div>
+      </div>
+    );
+  }
+
+  if (time.isExpired) {
+    return (
+      <div style={styles.wrapper}>
+        {title && <div style={styles.title}>{title}</div>}
+        <div style={styles.message}>Event has started!</div>
+      </div>
+    );
+  }
+
+  const timeUnits = [
+    { value: time.days, label: 'Days' },
+    { value: time.hours, label: 'Hours' },
+    { value: time.minutes, label: 'Minutes' },
+    { value: time.seconds, label: 'Seconds' },
+  ];
+
+  return (
+    <div style={styles.wrapper}>
+      {title && <div style={styles.title}>{title}</div>}
+      <div style={styles.digits}>
+        {timeUnits.map((unit, index) => (
+          <React.Fragment key={unit.label}>
+            {index > 0 && <Separator style={styles.separator} />}
+            <TimeBlock
+              value={padNumber(unit.value)}
+              label={unit.label}
+              numberStyle={styles.number}
+              labelStyle={styles.label}
+              blockStyle={styles.block}
+            />
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const customElement = reactToWebComponent(CustomElement, React, ReactDOM, {
+  props: {
+    title: 'string',
+    targetDate: 'string',
+    targetTime: 'string',
+    bgColor: 'string',
+    textColor: 'string',
+    font: 'string',
+  },
+});
+
+export default customElement;

package/dist/out.js

@@ -37455,7 +37455,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 +37492,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 +64477,7 @@ var require_dashboard_page_instructions = __commonJS({
       "Page.Section",
       "RichTextInputArea",
       "SectionHeader",
+      "SidePanel",
       "Table",
       "TableActionCell",
       "TableListHeader",
@@ -64604,7 +64627,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"
           ]
         }
       },
@@ -65797,18 +65827,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 +65894,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 +65915,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().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);
       }
@@ -78563,11 +78615,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.182",
   "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": "2d00f26181910908e52a2ac219529e18c316ff62684e562f64fec209"
 }

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

@@ -1,493 +0,0 @@
-import { items } from '@wix/data';
-import { window as wixWindow } from '@wix/site-window';
-
-interface CountdownConfig {
-  _id: string;
-  targetDate: Date;
-  title?: string;
-  isActive: boolean;
-}
-
-interface TimeRemaining {
-  days: number;
-  hours: number;
-  minutes: number;
-  seconds: number;
-}
-
-export default class extends HTMLElement {
-  private intervalId: number | null = null;
-  private config: CountdownConfig | null = null;
-  private isEditorMode = false;
-
-  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 loadConfig(): Promise<void> {
-    try {
-      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 countdown config:', error);
-      this.renderError();
-    }
-  }
-
-  private calculateTimeRemaining(targetDate: Date): TimeRemaining | null {
-    const now = new Date().getTime();
-    const target = targetDate.getTime();
-    const difference = target - now;
-
-    if (difference <= 0) {
-      return null;
-    }
-
-    const days = Math.floor(difference / (1000 * 60 * 60 * 24));
-    const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-    const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
-    const seconds = Math.floor((difference % (1000 * 60)) / 1000);
-
-    return { days, hours, minutes, seconds };
-  }
-
-  private startCountdown(): void {
-    if (!this.config || !this.config.isActive) {
-      return;
-    }
-
-    this.intervalId = window.setInterval(() => {
-      this.updateCountdown();
-    }, 1000);
-  }
-
-  private updateCountdown(): void {
-    if (!this.config) {
-      return;
-    }
-
-    const timeRemaining = this.calculateTimeRemaining(this.config.targetDate);
-
-    if (timeRemaining === null) {
-      this.renderExpired();
-      if (this.intervalId !== null) {
-        clearInterval(this.intervalId);
-        this.intervalId = null;
-      }
-      return;
-    }
-
-    this.renderCountdown(timeRemaining);
-  }
-
-  private render(): void {
-    if (!this.config) {
-      return;
-    }
-
-    const timeRemaining = this.calculateTimeRemaining(this.config.targetDate);
-
-    if (timeRemaining === null) {
-      this.renderExpired();
-    } else {
-      this.renderCountdown(timeRemaining);
-    }
-  }
-
-  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;
-        }
-
-        .editor-icon {
-          font-size: 64px;
-          margin-bottom: 16px;
-          animation: pulse 2s ease-in-out infinite;
-        }
-
-        .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;
-        }
-
-        .editor-message {
-          font-size: 16px;
-          opacity: 0.85;
-          margin: 0;
-          line-height: 1.6;
-        }
-
-        /* 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;
-        }
-
-        .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;
-        }
-
-        .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;
-        }
-
-        .timer-grid {
-          display: grid;
-          grid-template-columns: repeat(4, 1fr);
-          gap: 20px;
-          margin: 32px 0;
-          position: relative;
-          z-index: 1;
-        }
-
-        .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;
-        }
-
-        .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;
-        }
-
-        .no-config-message {
-          font-size: 16px;
-          margin: 0;
-          line-height: 1.6;
-          color: #7f8c8d;
-        }
-
-        /* 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>
-    `;
-  }
-
-  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 renderCountdown(timeRemaining: TimeRemaining): void {
-    if (!this.config) {
-      return;
-    }
-
-    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 titleHtml = this.config.title
-      ? `<h2 class="timer-title">${this.escapeHtml(this.config.title)}</h2>`
-      : '';
-
-    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 = `
-      ${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 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 = `
-      ${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>
-    `;
-  }
-
-  private escapeHtml(text: string): string {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-  }
-}