@wix/cli 1.1.141 → 1.1.143

package/build/{src-ZDFXTN36.js → src-SI6O4A5Z.js}

@@ -11,11 +11,11 @@ import {
   logout,
   useAuth,
   useSiteAuth
-} from "./chunk-SZ4GCQYL.js";
+} from "./chunk-4TL3CDOW.js";
 import "./chunk-WMCHVSMU.js";
-import "./chunk-6C4RLYLU.js";
+import "./chunk-PSUUZ5MS.js";
 import "./chunk-KJ37XZQA.js";
-import "./chunk-W6PEJALH.js";
+import "./chunk-53Z75RS5.js";
 import "./chunk-NRAQAV6T.js";
 import "./chunk-SQ3KPTIH.js";
 import "./chunk-Z4MHKCET.js";
@@ -38,4 +38,4 @@ export {
   useAuth,
   useSiteAuth
 };
-//# sourceMappingURL=src-ZDFXTN36.js.map
+//# sourceMappingURL=src-SI6O4A5Z.js.map

package/build/{src-PDY5SUXV.js → src-SWPFECWZ.js}

@@ -2,16 +2,16 @@ import { createRequire as _createRequire } from 'node:module';
 const require = _createRequire(import.meta.url);
 import {
   createI18nT
-} from "./chunk-DZWD6YGQ.js";
+} from "./chunk-AZQBBMA5.js";
 import "./chunk-HEANTKSX.js";
 import {
   Option,
   createCommand,
   require_commander
 } from "./chunk-J2EPR7DO.js";
-import "./chunk-6C4RLYLU.js";
+import "./chunk-PSUUZ5MS.js";
 import "./chunk-KJ37XZQA.js";
-import "./chunk-W6PEJALH.js";
+import "./chunk-53Z75RS5.js";
 import {
   require_react
 } from "./chunk-NRAQAV6T.js";
@@ -58,7 +58,7 @@ var devCommand = (services, cliVersion) => {
     new Option2("--tunnel", t("site_dev_command_def.option.tunnel")).conflicts("https").hideHelp(true)
   ).description(t("site_dev_command_def.description")).action(async (options, command) => {
     const { runCommand } = await import("./run-command-JNTKZGIY.js");
-    const { dev } = await import("./dev-UXKHLKMR.js");
+    const { dev } = await import("./dev-5LY5QTZV.js");
     await runCommand(
       command,
       services,
@@ -74,7 +74,7 @@ var installCommand = (services, cliVersion) => {
   const t = createI18nT();
   return createCommand("install").description(t("site_install_command_def.description")).argument("[package]", t("site_install_command_def.argument.package")).option("--yarn", t("site_install_command_def.option.yarn")).option("--npm", t("site_install_command_def.option.npm")).action(async (packageName, opts, command) => {
     const { runCommand } = await import("./run-command-JNTKZGIY.js");
-    const { install } = await import("./install-S5ZXRZJV.js");
+    const { install } = await import("./install-JTDXLP6N.js");
     await runCommand(
       command,
       services,
@@ -95,8 +95,8 @@ var previewCommand = (services, cliVersion) => {
       t("site_preview_command_def.option.source")
     ).choices(["local", "remote"])
   ).action(async (options, command) => {
-    const { renderCommand } = await import("./render-command-BZC3S272.js");
-    const { PreviewCommand } = await import("./PreviewCommand-ZGXWBI3V.js");
+    const { renderCommand } = await import("./render-command-R2MHU2A5.js");
+    const { PreviewCommand } = await import("./PreviewCommand-CFEW4WHI.js");
     await renderCommand(
       command,
       services,
@@ -120,7 +120,7 @@ var publishCommand = (services, cliVersion) => {
     t("site_publish_command_def.option.approve_preview")
   ).option("-f, --force", t("site_publish_command_def.option.force")).action(async (options, command) => {
     const { runCommand } = await import("./run-command-JNTKZGIY.js");
-    const { publish } = await import("./publish-SQVFB7LU.js");
+    const { publish } = await import("./publish-2JXKN5RW.js");
     await runCommand(
       command,
       services,
@@ -134,7 +134,7 @@ var publishCommand = (services, cliVersion) => {
 init_esm_shims();
 var syncTypesCommand = (services, cliVersion) => createCommand("sync-types").action(async (_, command) => {
   const { runCommand } = await import("./run-command-JNTKZGIY.js");
-  const { syncTypes } = await import("./sync-types-AZF2FSUW.js");
+  const { syncTypes } = await import("./sync-types-BGYXY6YW.js");
   await runCommand(
     command,
     services,
@@ -149,7 +149,7 @@ var uninstallCommand = (services, cliVersion) => {
   const t = createI18nT();
   return createCommand("uninstall").description(t("site_uninstall_command_def.description")).argument("<package>", t("site_uninstall_command_def.argument.package")).option("--yarn", t("site_uninstall_command_def.option.yarn")).option("--npm", t("site_uninstall_command_def.option.npm")).action(async (packageName, opts, command) => {
     const { runCommand } = await import("./run-command-JNTKZGIY.js");
-    const { uninstall } = await import("./uninstall-Q5N7ZWG7.js");
+    const { uninstall } = await import("./uninstall-6GAHFVWG.js");
     await runCommand(
       command,
       services,
@@ -166,4 +166,4 @@ var getRootCommand = async function getRootCommand2(services, cliVersion) {
 export {
   getRootCommand
 };
-//# sourceMappingURL=src-PDY5SUXV.js.map
+//# sourceMappingURL=src-SWPFECWZ.js.map

package/build/{src-BMAYMR2X.js → src-ZUW6HAIB.js}

@@ -6,9 +6,9 @@ import {
 import {
   renderCommand,
   runCommand
-} from "./chunk-AAY4DBI2.js";
-import "./chunk-GJ3FMAEJ.js";
-import "./chunk-C6TNYPLG.js";
+} from "./chunk-LDUTHWPD.js";
+import "./chunk-6MDQPBW7.js";
+import "./chunk-D4NO6SYP.js";
 import {
   NO_TTY_JSON_OUTPUT_OPTION
 } from "./chunk-AWPJTA2S.js";
@@ -19,11 +19,11 @@ import {
 } from "./chunk-J2EPR7DO.js";
 import "./chunk-BKY3IKB3.js";
 import "./chunk-EVROMEWT.js";
-import "./chunk-SZ4GCQYL.js";
+import "./chunk-4TL3CDOW.js";
 import "./chunk-WMCHVSMU.js";
-import "./chunk-6C4RLYLU.js";
+import "./chunk-PSUUZ5MS.js";
 import "./chunk-KJ37XZQA.js";
-import "./chunk-W6PEJALH.js";
+import "./chunk-53Z75RS5.js";
 import {
   require_react
 } from "./chunk-NRAQAV6T.js";
@@ -56,7 +56,7 @@ var buildCommand = (services, cliVersion) => createCommand("build").description(
 ).allowExcessArguments(true).allowUnknownOption(true).passThroughOptions(true).action(async (_, command) => {
   const { execa } = await import("./execa-MR2E3266.js");
   const { getRepoType, createPackageManager } = await import("./src-QRWN3UQZ.js");
-  const { runCommand: runCommand2 } = await import("./render-command-KBDAGHGC.js");
+  const { runCommand: runCommand2 } = await import("./render-command-CQAUKBCK.js");
   await runCommand2(command, services, cliVersion, async (model) => {
     const repoType = await getRepoType(model.projectFolder);
     const packageManager = await createPackageManager(repoType);
@@ -84,11 +84,11 @@ var envPullCommand = (services, cliVersion) => {
   ).action(async (opts, command) => {
     if (opts.json) {
       return runCommand(command, services, cliVersion, async (model) => {
-        const { nonInteractiveEnvPull } = await import("./env-pull-DRUEAPAY.js");
+        const { nonInteractiveEnvPull } = await import("./env-pull-FAVG553H.js");
         return nonInteractiveEnvPull(services, model);
       });
     }
-    const { EnvPullCommand } = await import("./EnvPullCommand-DQ4DBYQH.js");
+    const { EnvPullCommand } = await import("./EnvPullCommand-O7MN3GQ5.js");
     await renderCommand(command, services, cliVersion, /* @__PURE__ */ import_react.default.createElement(EnvPullCommand, null));
   });
 };
@@ -98,7 +98,7 @@ init_esm_shims();
 var import_react2 = __toESM(require_react(), 1);
 var envSetCommand = (services, cliVersion) => {
   return createCommand("set").description("Sets environment variable").requiredOption("--key <key>", "Name of the variable").requiredOption("--value <value>", "Value of the variable").action(async (opts, command) => {
-    const { EnvSetCommand } = await import("./EnvSetCommand-ZLQD3WOM.js");
+    const { EnvSetCommand } = await import("./EnvSetCommand-YWF2VDUM.js");
     const variable = { key: opts.key, value: opts.value };
     await renderCommand(
       command,
@@ -114,7 +114,7 @@ init_esm_shims();
 var import_react3 = __toESM(require_react(), 1);
 var envRemoveCommand = (services, cliVersion) => {
   return createCommand("remove").description("Removes an environment variable").requiredOption("--key <key>", "Name of the variable").action(async (opts, command) => {
-    const { EnvRemoveCommand } = await import("./EnvRemoveCommand-YU3BI6ZE.js");
+    const { EnvRemoveCommand } = await import("./EnvRemoveCommand-YOPODFHX.js");
     await renderCommand(
       command,
       services,
@@ -175,14 +175,14 @@ var previewCommand = (services, cliVersion) => {
     new Option(NO_TTY_JSON_OUTPUT_OPTION, "Output in JSON format").hideHelp()
   ).action(async (options, command) => {
     const { baseUrl, json, label } = options;
-    const { renderCommand: renderCommand2, runCommand: runCommand2 } = await import("./render-command-KBDAGHGC.js");
+    const { renderCommand: renderCommand2, runCommand: runCommand2 } = await import("./render-command-CQAUKBCK.js");
     if (json) {
       return runCommand2(command, services, cliVersion, async (model) => {
-        const { nonInteractivePreview } = await import("./preview-2RDTUGLP.js");
+        const { nonInteractivePreview } = await import("./preview-IMEGIC3I.js");
         return nonInteractivePreview(services, model, { baseUrl, label });
       });
     }
-    const { PreviewCommand } = await import("./PreviewCommand-PMHLL7UI.js");
+    const { PreviewCommand } = await import("./PreviewCommand-YI74OJ7S.js");
     await renderCommand2(
       command,
       services,
@@ -205,8 +205,8 @@ var promoteCommand = (services, cliVersion) => {
     new Option("-l, --label <label>", "A custom label for this preview").argParser(validateLabel).hideHelp()
   ).action(async (options, command) => {
     const { baseUrl, label } = options;
-    const { renderCommand: renderCommand2 } = await import("./render-command-KBDAGHGC.js");
-    const { PromoteCommand } = await import("./PromoteCommand-EVHEHNAV.js");
+    const { renderCommand: renderCommand2 } = await import("./render-command-CQAUKBCK.js");
+    const { PromoteCommand } = await import("./PromoteCommand-PFMRCLM6.js");
     await renderCommand2(
       command,
       services,
@@ -237,8 +237,8 @@ var releaseCommand = (services, cliVersion) => {
       "The type of version you would like to create"
     ).choices(["major", "minor"])
   ).action(async (options, command) => {
-    const { renderCommand: renderCommand2 } = await import("./render-command-KBDAGHGC.js");
-    const { ReleaseCommand } = await import("./ReleaseCommand-V7HD3Z2F.js");
+    const { renderCommand: renderCommand2 } = await import("./render-command-CQAUKBCK.js");
+    const { ReleaseCommand } = await import("./ReleaseCommand-AD3X2OPA.js");
     const { baseUrl, label, comment } = options;
     const versionType = options.versionType ? {
       major: ReleaseVersionType.MAJOR,
@@ -280,8 +280,8 @@ var devCommand = (services, cliVersion) => {
       "The base url for when static files have been uploaded to an external cdn"
     ).argParser(validateBase).hideHelp()
   ).action(async (options, command) => {
-    const { DevCommand } = await import("./DevCommand-SGPRUVKL.js");
-    const { renderCommand: renderCommand2 } = await import("./render-command-KBDAGHGC.js");
+    const { DevCommand } = await import("./DevCommand-B3554V66.js");
+    const { renderCommand: renderCommand2 } = await import("./render-command-CQAUKBCK.js");
     await renderCommand2(
       command,
       services,
@@ -303,8 +303,8 @@ init_esm_shims();
 var import_react8 = __toESM(require_react(), 1);
 var generateCommand = (services, cliVersion) => {
   return createCommand("generate").description("Generate a new extension for your project").action(async (options, command) => {
-    const { GenerateCommand } = await import("./GenerateCommand-CO2INZZT.js");
-    const { renderCommand: renderCommand2 } = await import("./render-command-KBDAGHGC.js");
+    const { GenerateCommand } = await import("./GenerateCommand-M7AYFTFZ.js");
+    const { renderCommand: renderCommand2 } = await import("./render-command-CQAUKBCK.js");
     await renderCommand2(command, services, cliVersion, /* @__PURE__ */ import_react8.default.createElement(GenerateCommand, null));
   });
 };
@@ -316,4 +316,4 @@ var getRootCommand = async (services, cliVersion) => {
 export {
   getRootCommand
 };
-//# sourceMappingURL=src-BMAYMR2X.js.map
+//# sourceMappingURL=src-ZUW6HAIB.js.map

package/build/{sync-types-AZF2FSUW.js → sync-types-BGYXY6YW.js}

@@ -3,18 +3,18 @@ const require = _createRequire(import.meta.url);
 import {
   syncTypes,
   syncTypesWithAuth
-} from "./chunk-VKYDCBWE.js";
-import "./chunk-A6BVUV6V.js";
-import "./chunk-4ZDCHQ2A.js";
+} from "./chunk-Q2JFFZS2.js";
+import "./chunk-S5TZQBRX.js";
+import "./chunk-WREPBGVY.js";
 import "./chunk-IGHRRWV4.js";
 import "./chunk-MVBGFP6D.js";
 import "./chunk-W54PG6O5.js";
 import "./chunk-EVROMEWT.js";
-import "./chunk-SZ4GCQYL.js";
+import "./chunk-4TL3CDOW.js";
 import "./chunk-WMCHVSMU.js";
-import "./chunk-6C4RLYLU.js";
+import "./chunk-PSUUZ5MS.js";
 import "./chunk-KJ37XZQA.js";
-import "./chunk-W6PEJALH.js";
+import "./chunk-53Z75RS5.js";
 import "./chunk-NRAQAV6T.js";
 import "./chunk-SQ3KPTIH.js";
 import "./chunk-Z4MHKCET.js";
@@ -30,4 +30,4 @@ export {
   syncTypes,
   syncTypesWithAuth
 };
-//# sourceMappingURL=sync-types-AZF2FSUW.js.map
+//# sourceMappingURL=sync-types-BGYXY6YW.js.map

package/build/{uninstall-Q5N7ZWG7.js → uninstall-6GAHFVWG.js}

@@ -3,33 +3,33 @@ const require = _createRequire(import.meta.url);
 import {
   resolveNpmDependencies,
   resolvePackageManager
-} from "./chunk-YCSOXW4E.js";
+} from "./chunk-W77KBD72.js";
 import "./chunk-5AY2TF4R.js";
 import {
   createLogger
-} from "./chunk-6RNNDF2T.js";
-import "./chunk-BQDKSF4L.js";
+} from "./chunk-OWKI56M7.js";
+import "./chunk-MQU4OXW2.js";
 import {
   createI18nT
-} from "./chunk-DZWD6YGQ.js";
+} from "./chunk-AZQBBMA5.js";
 import "./chunk-HEANTKSX.js";
 import "./chunk-6EJNAOBP.js";
 import {
   authenticate
-} from "./chunk-A6BVUV6V.js";
+} from "./chunk-S5TZQBRX.js";
 import "./chunk-CH52GF36.js";
-import "./chunk-PSBMQW7U.js";
+import "./chunk-CXUAXJIJ.js";
 import "./chunk-IRKCE3VI.js";
 import "./chunk-ZWAKRWC6.js";
 import "./chunk-2R5BII2J.js";
 import "./chunk-W54PG6O5.js";
 import "./chunk-YLWTNITT.js";
 import "./chunk-EVROMEWT.js";
-import "./chunk-SZ4GCQYL.js";
+import "./chunk-4TL3CDOW.js";
 import "./chunk-WMCHVSMU.js";
-import "./chunk-6C4RLYLU.js";
+import "./chunk-PSUUZ5MS.js";
 import "./chunk-KJ37XZQA.js";
-import "./chunk-W6PEJALH.js";
+import "./chunk-53Z75RS5.js";
 import "./chunk-NRAQAV6T.js";
 import "./chunk-SQ3KPTIH.js";
 import "./chunk-Z4MHKCET.js";
@@ -84,4 +84,4 @@ async function uninstall(model, services, options, initialPackageName) {
 export {
   uninstall
 };
-//# sourceMappingURL=uninstall-Q5N7ZWG7.js.map
+//# sourceMappingURL=uninstall-6GAHFVWG.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wix/cli",
   "description": "CLI tool for building Wix sites and applications",
-  "version": "1.1.141",
+  "version": "1.1.143",
   "bin": {
     "wix": "bin/wix.cjs"
   },
@@ -92,5 +92,5 @@
       ]
     }
   },
-  "falconPackageHash": "0b9b54757d8ad4fd151dc91cda32fea978e343dcc230399b7fefbf28"
+  "falconPackageHash": "02222225d101a4f1e80af51138e781168c4fdb55cf48094b34900eeb"
 }

package/templates/astro/service-plugin/ecom-payment-settings/files/extension.ts.ejs

@@ -6,6 +6,6 @@ import { extensions } from '@wix/astro/builders';
 export default extensions.ecomPaymentSettings({
   id: '<%- config.id -%>',
   name: '<%- route -%>',
-  fallbackValueForRequires3dSecure: false
+  fallbackValueForRequires3dSecure: false,
   source: '<%- config.source -%>',
 });

package/templates/astro/site-plugin/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37" height="37" viewBox="0 0 36 36" fill="none"><rect x="0.5" y="0.5" width="35" height="35" rx="3.5" fill="#ECEFF3"></rect><rect x="0.5" y="0.5" width="35" height="35" rx="3.5" stroke="#ECEFF3"></rect><path d="M13.6099 23.6002L12.8999 22.8902C12.342 22.3329 11.8994 21.6712 11.5975 20.9428C11.2956 20.2144 11.1401 19.4337 11.1401 18.6452C11.1401 17.8567 11.2956 17.0759 11.5975 16.3475C11.8994 15.6191 12.342 14.9574 12.8999 14.4002V14.4002L22.0999 23.6002C21.5426 24.158 20.8809 24.6006 20.1525 24.9025C19.4241 25.2045 18.6433 25.3599 17.8549 25.3599C17.0664 25.3599 16.2856 25.2045 15.5572 24.9025C14.8288 24.6006 14.1671 24.158 13.6099 23.6002ZM24.2199 22.8902C24.3136 22.7972 24.388 22.6866 24.4387 22.5648C24.4895 22.4429 24.5157 22.3122 24.5157 22.1802C24.5157 22.0482 24.4895 21.9175 24.4387 21.7956C24.388 21.6737 24.3136 21.5631 24.2199 21.4702L14.9999 12.2802C14.9069 12.1864 14.7963 12.1121 14.6744 12.0613C14.5526 12.0105 14.4219 11.9844 14.2899 11.9844C14.1578 11.9844 14.0271 12.0105 13.9053 12.0613C13.7834 12.1121 13.6728 12.1864 13.5799 12.2802V12.2802C13.4861 12.3731 13.4117 12.4837 13.361 12.6056C13.3102 12.7275 13.2841 12.8582 13.2841 12.9902C13.2841 13.1222 13.3102 13.2529 13.361 13.3747C13.4117 13.4966 13.4861 13.6072 13.5799 13.7002L22.7699 22.8902C22.8633 22.9885 22.9757 23.0668 23.1004 23.1203C23.225 23.1738 23.3592 23.2014 23.4949 23.2014C23.6305 23.2014 23.7647 23.1738 23.8894 23.1203C24.014 23.0668 24.1264 22.9885 24.2199 22.8902ZM21.2799 11.6902C21.4661 11.5028 21.5707 11.2494 21.5707 10.9852C21.5707 10.721 21.4661 10.4675 21.2799 10.2802C21.1869 10.1864 21.0763 10.1121 20.9544 10.0613C20.8326 10.0105 20.7019 9.98438 20.5699 9.98438C20.4378 9.98438 20.3071 10.0105 20.1853 10.0613C20.0634 10.1121 19.9528 10.1864 19.8599 10.2802L17.0699 13.0702L18.4799 14.4802L21.2799 11.6902ZM26.2199 16.6902C26.3136 16.5972 26.388 16.4866 26.4387 16.3647C26.4895 16.2429 26.5157 16.1122 26.5157 15.9802C26.5157 15.8482 26.4895 15.7175 26.4387 15.5956C26.388 15.4737 26.3136 15.3631 26.2199 15.2702C26.0325 15.0839 25.779 14.9794 25.5149 14.9794C25.2507 14.9794 24.9972 15.0839 24.8099 15.2702L21.9999 18.0002L23.4099 19.4102L26.2199 16.6902Z" fill="#3B4057"></path></svg>

package/templates/astro/site-plugin/dependencies.json

@@ -0,0 +1,13 @@
+{
+  "dependencies": {
+    "@wix/design-system": "^1.111.0",
+    "@wix/editor": "^1.356.0",
+    "react-to-webcomponent": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}

package/templates/astro/site-plugin/files/extension.ts.ejs

@@ -0,0 +1,23 @@
+---
+to: <%- route -%>.extension.ts
+---
+import { extensions } from '@wix/astro/builders';
+
+export default extensions.sitePlugin({
+  id: '<%- config.id -%>',
+  name: '<%- config.name -%>',
+  marketData: {
+    name: '<%- config.name -%>',
+    description: 'Marketing Description',
+    logoUrl: '{{BASE_URL}}/<%- route -%>-logo.svg',
+  },
+  placements: [{
+    appDefinitionId: '<%- config.placements[0].appDefinitionId -%>',
+    widgetId: '<%- config.placements[0].widgetId -%>',
+    slotId: '<%- config.placements[0].slotId -%>',
+  }],
+  installation: { autoAdd: true },
+  tagName: '<%- route -%>',
+  element: '<%- config.element -%>',
+  settings: '<%- config.settings -%>',
+});

package/templates/astro/site-plugin/files/panel.tsx.ejs

@@ -0,0 +1,49 @@
+---
+to: <%- route -%>.panel.tsx
+---
+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 Plugin'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/templates/astro/site-plugin/files/plugin.tsx.ejs

@@ -0,0 +1,37 @@
+---
+to: <%- route -%>.tsx
+---
+class MyElement extends HTMLElement {
+  static get observedAttributes() {
+    return ['display-name'];
+  }
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const displayName = this.getAttribute('display-name') || `Your Widget's Title`;
+
+    this.innerHTML = `
+      <div style="font-size: 16px; padding: 16px; border: 1px solid #ccc; border-radius: 8px; margin: 16px; height: 50%;">
+        <h2>${displayName}</h2>
+        <hr />
+        <p>
+          This is a Site Plugin generated by Wix CLI.<br />
+          Edit your element's code to change this text.
+        </p>
+      </div>
+    `;
+  }
+}
+
+export default MyElement;