webstudio 0.151.0 → 0.167.0

package/lib/cli.js

@@ -1,5 +1,5 @@
 // src/cli.ts
-import { exit, argv } from "node:process";
+import { exit as exit4, argv } from "node:process";
 import { hideBin } from "yargs/helpers";
 
 // src/config.ts
@@ -68,16 +68,16 @@ var isFileExists = async (filePath) => {
     return false;
   }
 };
-var ensureFileInPath = async (filePath, content) => {
+var createFileIfNotExists = async (filePath, content) => {
   const dir = dirname(filePath);
-  await ensureFolderExists(dir);
+  await createFolderIfNotExists(dir);
   try {
     await access(filePath, constants.F_OK);
   } catch {
     await writeFile(filePath, content || "", "utf8");
   }
 };
-var ensureFolderExists = async (folderPath) => {
+var createFolderIfNotExists = async (folderPath) => {
   try {
     await access(folderPath, constants.F_OK);
   } catch {
@@ -94,10 +94,41 @@ var loadJSONFile = async (filePath) => {
 };
 
 // src/commands/link.ts
-import { stdin, stdout, cwd } from "node:process";
+import { cwd, exit } from "node:process";
 import { join as join2 } from "node:path";
-import * as readline from "node:readline/promises";
 import { readFile as readFile2, writeFile as writeFile2 } from "node:fs/promises";
+import { cancel, isCancel, log, text } from "@clack/prompts";
+var parseShareLink = (value) => {
+  const url = new URL(value);
+  const origin = url.origin;
+  const token = url.searchParams.get("authToken");
+  const segments = url.pathname.split("/").slice(1);
+  if (segments.length !== 2 || segments[0] !== "builder") {
+    throw Error("Segments not matching");
+  }
+  const [_builder, projectId] = segments;
+  if (token == null) {
+    throw Error("Token is missing");
+  }
+  return {
+    origin,
+    projectId,
+    token
+  };
+};
+var validateShareLink = (value) => {
+  if (value.length === 0) {
+    return "Share link is required";
+  }
+  if (URL.canParse(value) === false) {
+    return "Share link is invalid";
+  }
+  try {
+    parseShareLink(value);
+  } catch {
+    return "Share link is invalid";
+  }
+};
 var linkOptions = (yargs) => yargs.option("link", {
   alias: "l",
   type: "string",
@@ -108,62 +139,48 @@ var link = async (options) => {
   if (options.link) {
     shareLink = options.link;
   } else {
-    const rl = readline.createInterface({ input: stdin, output: stdout });
-    shareLink = await rl.question(
-      `Please paste a link from the Share Dialog in the builder: `
-    );
-    rl.close();
-  }
-  const shareLinkUrl = new URL(shareLink);
-  const origin = shareLinkUrl.origin;
-  const token = shareLinkUrl.searchParams.get("authToken");
-  const paths = shareLinkUrl.pathname.split("/").slice(1);
-  if (paths[0] !== "builder" || paths.length !== 2) {
-    throw new Error("Invalid share link.");
-  }
-  const projectId = paths[1];
-  if (token == null) {
-    throw new Error("Invalid share link.");
-  }
-  try {
-    const currentConfig = await readFile2(GLOBAL_CONFIG_FILE, "utf-8");
-    const currentConfigJson = jsonToGlobalConfig(JSON.parse(currentConfig));
-    const newConfig = {
-      ...currentConfigJson,
-      [projectId]: {
-        origin,
-        token
-      }
-    };
-    await writeFile2(GLOBAL_CONFIG_FILE, JSON.stringify(newConfig, null, 2));
-    console.info(`Saved credentials for project ${projectId}.
-  You can find your config at ${GLOBAL_CONFIG_FILE}
-        `);
-    const localConfig = {
-      projectId
-    };
-    await ensureFileInPath(
-      join2(cwd(), LOCAL_CONFIG_FILE),
-      JSON.stringify(localConfig, null, 2)
-    );
-  } catch (error) {
-    if (error instanceof Error && "code" in error && error.code === "ENONET") {
-      throw new Error(`Global config file is not found`);
+    shareLink = await text({
+      message: "Please paste a link from the Share Dialog in the builder",
+      validate: validateShareLink
+    });
+    if (isCancel(shareLink)) {
+      cancel("Project linking is cancelled");
+      exit(1);
     }
-    throw error;
   }
+  const { origin, projectId, token } = parseShareLink(shareLink);
+  const currentConfig = await readFile2(GLOBAL_CONFIG_FILE, "utf-8");
+  const currentConfigJson = jsonToGlobalConfig(JSON.parse(currentConfig));
+  const newConfig = {
+    ...currentConfigJson,
+    [projectId]: {
+      origin,
+      token
+    }
+  };
+  await writeFile2(GLOBAL_CONFIG_FILE, JSON.stringify(newConfig, null, 2));
+  log.info(`Saved credentials for project ${projectId}.
+You can find your config at ${GLOBAL_CONFIG_FILE}`);
+  const localConfig = {
+    projectId
+  };
+  await createFileIfNotExists(
+    join2(cwd(), LOCAL_CONFIG_FILE),
+    JSON.stringify(localConfig, null, 2)
+  );
+  log.step("The project is linked successfully");
 };
 
 // src/commands/sync.ts
 import { readFile as readFile3, writeFile as writeFile3 } from "node:fs/promises";
 import { cwd as cwd2 } from "node:process";
 import { join as join3 } from "node:path";
-import ora from "ora";
+import pc from "picocolors";
+import { spinner } from "@clack/prompts";
 import {
   loadProjectDataByBuildId,
   loadProjectDataById
 } from "@webstudio-is/http-client";
-import pc from "picocolors";
 var syncOptions = (yargs) => yargs.option("buildId", {
   type: "string",
   describe: "[Experimental] Project build id to sync"
@@ -175,15 +192,15 @@ var syncOptions = (yargs) => yargs.option("buildId", {
   describe: "[Experimental] Service token"
 });
 var sync = async (options) => {
-  const spinner = ora("Syncing project data").start();
-  spinner.text = "Loading project data from config file";
+  const syncing = spinner();
+  syncing.start("Synchronizing project data");
   const definedOptionValues = [
     options.buildId,
     options.origin,
     options.authToken
   ].filter(Boolean);
   if (definedOptionValues.length > 0 && definedOptionValues.length < 3) {
-    spinner.fail(`Please provide buildId, origin and authToken`);
+    syncing.stop(`Please provide buildId, origin and authToken`, 2);
     return;
   }
   let project;
@@ -194,17 +211,12 @@ var sync = async (options) => {
       origin: options.origin
     });
   } else {
-    if (await isFileExists(GLOBAL_CONFIG_FILE) === false) {
-      spinner.fail(
-        `Global config file at path ${GLOBAL_CONFIG_FILE} is not found. Please link your project using webstudio link command`
-      );
-      return;
-    }
     const globalConfigText = await readFile3(GLOBAL_CONFIG_FILE, "utf-8");
     const globalConfig = jsonToGlobalConfig(JSON.parse(globalConfigText));
     if (await isFileExists(LOCAL_CONFIG_FILE) === false) {
-      spinner.fail(
-        `Local config file is not found. Please make sure current directory is a webstudio project`
+      syncing.stop(
+        `Local config file is not found. Please make sure current directory is a webstudio project`,
+        2
       );
       return;
     }
@@ -215,29 +227,35 @@ var sync = async (options) => {
     const localConfig = jsonToLocalConfig(JSON.parse(localConfigText));
     const projectConfig = globalConfig[localConfig.projectId];
     if (projectConfig === void 0) {
-      spinner.fail(
-        `Project config is not found, please run ${pc.dim("webstudio link")}`
+      syncing.stop(
+        `Project config is not found, please run ${pc.dim("webstudio link")}`,
+        2
       );
       return;
     }
     const { origin, token } = projectConfig;
-    spinner.text = "Loading project data from webstudio\n";
-    project = await loadProjectDataById({
-      projectId: localConfig.projectId,
-      authToken: token,
-      origin
-    });
+    try {
+      project = await loadProjectDataById({
+        projectId: localConfig.projectId,
+        authToken: token,
+        origin
+      });
+    } catch (error) {
+      syncing.stop(error.message, 2);
+      return;
+    }
   }
   project;
-  spinner.text = "Saving project data to config file";
   const localBuildFilePath = join3(cwd2(), LOCAL_DATA_FILE);
-  await ensureFileInPath(localBuildFilePath);
+  await createFileIfNotExists(localBuildFilePath);
   await writeFile3(localBuildFilePath, JSON.stringify(project, null, 2), "utf8");
-  spinner.succeed("Project data synced successfully");
+  syncing.stop("Project data synchronized successfully");
 };
 
 // src/commands/build.ts
 import { access as access3 } from "node:fs/promises";
+import { exit as exit3 } from "node:process";
+import { log as log3 } from "@clack/prompts";
 
 // src/prebuild.ts
 import { basename, dirname as dirname2, join as join4, normalize } from "node:path";
@@ -252,10 +270,10 @@ import {
   readdir
 } from "node:fs/promises";
 import { pipeline } from "node:stream/promises";
-import { cwd as cwd3 } from "node:process";
+import { cwd as cwd3, exit as exit2 } from "node:process";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import pLimit from "p-limit";
-import ora2 from "ora";
+import { log as log2, spinner as spinner2 } from "@clack/prompts";
 import merge from "deepmerge";
 import {
   generateCss,
@@ -265,7 +283,7 @@ import {
   normalizeProps,
   generateRemixRoute,
   generateRemixParams,
-  collectionComponent
+  isCoreComponent
 } from "@webstudio-is/react-sdk";
 import {
   createScope,
@@ -281,6 +299,122 @@ import { createImageLoader } from "@webstudio-is/image";
 import * as baseComponentMetas from "@webstudio-is/sdk-components-react/metas";
 import * as remixComponentMetas from "@webstudio-is/sdk-components-react-remix/metas";
 import * as radixComponentMetas from "@webstudio-is/sdk-components-react-radix/metas";
+
+// src/html-to-jsx.ts
+import {
+  parseFragment,
+  defaultTreeAdapter
+} from "parse5";
+import { camelCase } from "change-case";
+var BOOLEAN_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "async",
+  "autofocus",
+  "autoplay",
+  "checked",
+  "contenteditable",
+  "controls",
+  "default",
+  "defer",
+  "disabled",
+  "formnovalidate",
+  "hidden",
+  "ismap",
+  "itemscope",
+  "loop",
+  "multiple",
+  "muted",
+  "nomodule",
+  "novalidate",
+  "open",
+  "playsinline",
+  "readonly",
+  "required",
+  "reversed",
+  "scoped",
+  "selected",
+  "truespeed"
+]);
+var isBooleanAttr = (name) => BOOLEAN_ATTRIBUTES.has(name.toLowerCase());
+function* walkChildNodes(node) {
+  if (defaultTreeAdapter.isCommentNode(node) || defaultTreeAdapter.isTextNode(node) || defaultTreeAdapter.isDocumentTypeNode(node)) {
+    throw new Error("Unsupported node type");
+  }
+  for (const childNode of node.childNodes) {
+    if (defaultTreeAdapter.isCommentNode(childNode)) {
+      continue;
+    }
+    if (defaultTreeAdapter.isTextNode(childNode)) {
+      yield { type: "text", value: childNode.value };
+      continue;
+    }
+    if (false === defaultTreeAdapter.isElementNode(childNode)) {
+      continue;
+    }
+    const attributes = childNode.attrs.map((attr) => [
+      attr.name,
+      attr.value
+    ]);
+    yield { type: "element-start", tagName: childNode.tagName, attributes };
+    yield* walkChildNodes(childNode);
+    yield { type: "element-end", tagName: childNode.tagName };
+  }
+}
+var convertStyleString = (style) => {
+  const styles = style.split(";").map((style2) => style2.trim()).map((style2) => style2.split(":").map((part) => part.trim()));
+  const res = {};
+  for (const [name, value] of styles) {
+    res[camelCase(name)] = value;
+  }
+  return JSON.stringify(res);
+};
+var toAttrString = (name, value) => {
+  const attName = name.toLowerCase();
+  const jsxName = attName === "class" ? "className" : attName;
+  if (value === "" && isBooleanAttr(attName)) {
+    return `${jsxName}`;
+  }
+  if (attName === "style") {
+    return `${jsxName}={${convertStyleString(value)}}`;
+  }
+  return `${jsxName}="${value}"`;
+};
+var attributesToString = (attributes) => attributes.map(([attName, value]) => ` ${toAttrString(attName, value)}`).join("");
+var convertTagName = (tagName) => {
+  const tag = tagName.toLowerCase();
+  if (tag === "script") {
+    return "Script";
+  }
+  if (tag === "style") {
+    return "Style";
+  }
+  return tag;
+};
+var escapeValue = (value) => value.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$").replace(/\r/g, "\\r").replace(/\n/g, "\\n");
+var htmlToJsx = (html) => {
+  const parsedHtml = parseFragment(html, { scriptingEnabled: false });
+  let result = "";
+  for (const walkNode of walkChildNodes(parsedHtml)) {
+    switch (walkNode.type) {
+      case "text": {
+        const escapedValue = escapeValue(walkNode.value);
+        result += escapedValue ? "{`" + escapedValue + "`}" : "";
+        break;
+      }
+      case "element-start": {
+        const tag = convertTagName(walkNode.tagName);
+        result += `<${tag}${attributesToString(walkNode.attributes)}>`;
+        break;
+      }
+      case "element-end": {
+        result += `</${convertTagName(walkNode.tagName)}>`;
+        break;
+      }
+    }
+  }
+  return result;
+};
+
+// src/prebuild.ts
 var limit = pLimit(10);
 var downloadAsset = async (url, name, assetBaseUrl) => {
   const assetPath = join4("public", assetBaseUrl, name);
@@ -288,7 +422,7 @@ var downloadAsset = async (url, name, assetBaseUrl) => {
   try {
     await access2(assetPath);
   } catch {
-    await ensureFolderExists(dirname2(assetPath));
+    await createFolderIfNotExists(dirname2(assetPath));
     try {
       const response = await fetch(url);
       if (!response.ok) {
@@ -357,12 +491,12 @@ var copyTemplates = async (template = "defaults") => {
   }
 };
 var prebuild = async (options) => {
-  if (options.template === void 0) {
-    throw new Error(
-      `
- Template is not provided 
- Please check webstudio --help for more details`
+  if (options.template.length === 0) {
+    log2.error(
+      `Template is not provided
+Please check webstudio --help for more details`
     );
+    exit2(1);
   }
   for (const template of options.template) {
     if (template === "vanilla") {
@@ -372,16 +506,14 @@ var prebuild = async (options) => {
       continue;
     }
     if (await isCliTemplate(template) === false) {
-      throw Error(
-        `
- Template ${options.template} is not available 
- Please check webstudio --help for more details`
+      log2.error(
+        `Template ${options.template} is not available
+Please check webstudio --help for more details`
       );
+      exit2(1);
     }
   }
-  const spinner = ora2("Scaffolding the project files");
-  spinner.start();
-  spinner.text = "Generating files";
+  log2.step("Scaffolding the project files");
   const appRoot = "app";
   const generatedDir = join4(appRoot, "__generated__");
   await rm(generatedDir, { recursive: true, force: true });
@@ -480,7 +612,7 @@ var prebuild = async (options) => {
     };
     componentsByPage[page.id] = /* @__PURE__ */ new Set();
     for (const [_instanceId, instance] of instances) {
-      if (instance.component === collectionComponent) {
+      if (isCoreComponent(instance.component)) {
         continue;
       }
       componentsByPage[page.id].add(instance.component);
@@ -544,8 +676,9 @@ var prebuild = async (options) => {
     }
   }
   const assets = new Map(siteData.assets.map((asset) => [asset.id, asset]));
-  spinner.text = "Generating css file";
   const { cssText, classesMap } = generateCss({
+    instances: new Map(siteData.build.instances),
+    props: new Map(siteData.build.props),
     assets,
     breakpoints: new Map(siteData.build?.breakpoints),
     styles: new Map(siteData.build?.styles),
@@ -555,11 +688,17 @@ var prebuild = async (options) => {
     assetBaseUrl,
     atomic: siteData.build.pages.compiler?.atomicStyles ?? true
   });
-  await ensureFileInPath(join4(generatedDir, "index.css"), cssText);
-  spinner.text = "Generating routes and pages";
-  const routeTemplatePath = normalize(join4(cwd3(), "app/routes/template.tsx"));
+  await createFileIfNotExists(join4(generatedDir, "index.css"), cssText);
+  const routeTemplatesDir = join4(cwd3(), "app/route-templates");
+  const routeTemplatePath = normalize(join4(routeTemplatesDir, "html.tsx"));
+  const routeXmlTemplatePath = normalize(join4(routeTemplatesDir, "xml.tsx"));
+  const defaultSiteMapXmlPath = normalize(
+    join4(routeTemplatesDir, "default-sitemap.tsx")
+  );
   const routeFileTemplate = await readFile4(routeTemplatePath, "utf8");
-  await rm(routeTemplatePath);
+  const routeXmlFileTemplate = await readFile4(routeXmlTemplatePath, "utf8");
+  const defaultSiteMapTemplate = await readFile4(defaultSiteMapXmlPath, "utf8");
+  await rm(routeTemplatesDir, { recursive: true, force: true });
   for (const [pageId, pageComponents] of Object.entries(componentsByPage)) {
     const scope = createScope([
       // manually maintained list of occupied identifiers
@@ -592,14 +731,36 @@ var prebuild = async (options) => {
       namespaces.get(namespace)?.add([shortName, component]);
     }
     let componentImports = "";
+    let xmlPresentationComponents = "";
+    const pageData = siteDataByPage[pageId];
+    const documentType = pageData.page.meta.documentType ?? "html";
     for (const [namespace, componentsSet] of namespaces.entries()) {
-      const specifiers = Array.from(componentsSet).map(
-        ([shortName, component]) => `${shortName} as ${scope.getName(component, shortName)}`
-      ).join(", ");
-      componentImports += `import { ${specifiers} } from "${namespace}";
+      switch (documentType) {
+        case "html":
+          {
+            const specifiers = Array.from(componentsSet).map(
+              ([shortName, component]) => `${shortName} as ${scope.getName(component, shortName)}`
+            ).join(", ");
+            componentImports += `import { ${specifiers} } from "${namespace}";
 `;
+          }
+          break;
+        case "xml":
+          {
+            componentImports = `import { XmlNode } from "@webstudio-is/sdk-components-react";
+`;
+            xmlPresentationComponents += Array.from(componentsSet).map(
+              ([shortName, component]) => scope.getName(component, shortName)
+            ).filter((scopedName) => scopedName !== "XmlNode").map(
+              (scopedName) => scopedName === "Body" ? `const ${scopedName} = (props: any) => props.children;` : `const ${scopedName} = () => null;`
+            ).join("\n");
+          }
+          break;
+        default: {
+          documentType;
+        }
+      }
     }
-    const pageData = siteDataByPage[pageId];
     const pageFontAssets = fontAssetsByPage[pageId];
     const pageBackgroundImageAssets = backgroundImageAssetsByPage[pageId];
     const rootInstanceId = pageData.page.rootInstanceId;
@@ -638,83 +799,108 @@ var prebuild = async (options) => {
     const pageMeta = pageData.page.meta;
     const favIconAsset = assets.get(projectMeta?.faviconAssetId ?? "");
     const socialImageAsset = assets.get(pageMeta.socialImageAssetId ?? "");
+    const pagePath = getPagePath(pageData.page.id, siteData.build.pages);
+    const remixRoute = generateRemixRoute(pagePath);
+    const fileName = `${remixRoute}.tsx`;
     const pageExports = `/* eslint-disable */
-/* This is a auto generated file for building the project */ 
+      /* This is a auto generated file for building the project */ 
 
 
-import { Fragment, useState } from "react";
-import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
-import { useResource } from "@webstudio-is/react-sdk";
-${componentImports}
+      import { Fragment, useState } from "react";
+      import type { FontAsset, ImageAsset } from "@webstudio-is/sdk";
+      import { useResource } from "@webstudio-is/react-sdk";
+      ${componentImports}
 
-export const siteName = ${JSON.stringify(projectMeta?.siteName)};
+      export const siteName = ${JSON.stringify(projectMeta?.siteName)};
 
-export const favIconAsset: ImageAsset | undefined =
-  ${JSON.stringify(favIconAsset)};
+      export const favIconAsset: ImageAsset | undefined =
+        ${JSON.stringify(favIconAsset)};
 
-export const socialImageAsset: ImageAsset | undefined =
-  ${JSON.stringify(socialImageAsset)};
+      export const socialImageAsset: ImageAsset | undefined =
+        ${JSON.stringify(socialImageAsset)};
 
-// Font assets on current page (can be preloaded)
-export const pageFontAssets: FontAsset[] =
-  ${JSON.stringify(pageFontAssets)}
+      // Font assets on current page (can be preloaded)
+      export const pageFontAssets: FontAsset[] =
+        ${JSON.stringify(pageFontAssets)}
 
-export const pageBackgroundImageAssets: ImageAsset[] =
-  ${JSON.stringify(pageBackgroundImageAssets)}
+      export const pageBackgroundImageAssets: ImageAsset[] =
+        ${JSON.stringify(pageBackgroundImageAssets)}
 
+      ${remixRoute === "_index" ? `
+            ${projectMeta?.code ? `
+            const Script = ({children, ...props}: Record<string, string | boolean>) => {
+              if (children == null) {
+                return <script {...props} />;
+              }
 
+              return <script {...props} dangerouslySetInnerHTML={{__html: children}} />;
+            };
+            const Style = ({children, ...props}: Record<string, string | boolean>) => {
+              if (children == null) {
+                return <style {...props} />;
+              }
 
-${pageComponent}
+              return <style {...props} dangerouslySetInnerHTML={{__html: children}} />;
+            };
+            ` : ""}
 
-export { Page }
-`;
+            export const CustomCode = () => {
+              return (<>${projectMeta?.code ? htmlToJsx(projectMeta.code) : ""}</>);
+            }
+          ` : ""}
+
+      ${xmlPresentationComponents}
+
+      ${pageComponent}
+
+      export { Page }
+    `;
     const serverExports = `/* eslint-disable */
-/* This is a auto generated file for building the project */ 
+      /* This is a auto generated file for building the project */ 
 
 
-import type { PageMeta } from "@webstudio-is/sdk";
-${generateResourcesLoader({
+      import type { PageMeta } from "@webstudio-is/sdk";
+      ${generateResourcesLoader({
       scope,
       page: pageData.page,
       dataSources,
       resources
     })}
 
-${generatePageMeta({
+      ${generatePageMeta({
       globalScope: scope,
       page: pageData.page,
       dataSources
     })}
 
-${generateFormsProperties(props)}
+      ${generateFormsProperties(props)}
 
-${generateRemixParams(pageData.page.path)}
+      ${generateRemixParams(pageData.page.path)}
 
-export const projectId = "${siteData.build.projectId}";
+      export const projectId = "${siteData.build.projectId}";
 
-export const contactEmail = ${JSON.stringify(contactEmail)};
-
-export const customCode = ${JSON.stringify(projectMeta?.code?.trim() ?? "")};
-`;
-    const pagePath = getPagePath(pageData.page.id, siteData.build.pages);
-    const remixRoute = generateRemixRoute(pagePath);
-    const fileName = `${remixRoute}.tsx`;
-    const routeFileContent = routeFileTemplate.replace(
+      export const contactEmail = ${JSON.stringify(contactEmail)};
+    `;
+    const routeFileContent = (documentType === "html" ? routeFileTemplate : routeXmlFileTemplate).replace(
       /".*\/__generated__\/_index"/,
       `"../__generated__/${remixRoute}"`
     ).replace(
       /".*\/__generated__\/_index.server"/,
       `"../__generated__/${remixRoute}.server"`
     );
-    await ensureFileInPath(join4(routesDir, fileName), routeFileContent);
-    await ensureFileInPath(join4(generatedDir, fileName), pageExports);
-    await ensureFileInPath(
+    await createFileIfNotExists(join4(routesDir, fileName), routeFileContent);
+    await createFileIfNotExists(join4(generatedDir, fileName), pageExports);
+    await createFileIfNotExists(
       join4(generatedDir, `${remixRoute}.server.tsx`),
       serverExports
     );
   }
-  await writeFile4(
-    join4(generatedDir, "[sitemap.xml].ts"),
+  await createFileIfNotExists(
+    join4(routesDir, "[sitemap.xml]._index.tsx"),
+    defaultSiteMapTemplate.replace(/".*\/__generated__\//, `"../__generated__/`)
+  );
+  await createFileIfNotExists(
+    join4(generatedDir, "$resources.sitemap.xml.ts"),
     `
       export const sitemap = ${JSON.stringify(
       getStaticSiteMapXml(siteData.build.pages, siteData.build.updatedAt),
@@ -725,22 +911,25 @@ export const customCode = ${JSON.stringify(projectMeta?.code?.trim() ?? "")};
   );
   const redirects = siteData.build.pages?.redirects;
   if (redirects !== void 0 && redirects.length > 0) {
-    spinner.text = "Generating redirects";
     for (const redirect of redirects) {
       const redirectPagePath = generateRemixRoute(redirect.old);
       const redirectFileName = `${redirectPagePath}.ts`;
       const content = `import { type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
 
-export const loader = (arg: LoaderFunctionArgs) => {
-  return redirect("${redirect.new}", ${redirect.status ?? 301});
-};
-`;
-      await ensureFileInPath(join4(routesDir, redirectFileName), content);
+      export const loader = (arg: LoaderFunctionArgs) => {
+      return redirect("${redirect.new}", ${redirect.status ?? 301});
+      };
+      `;
+      await createFileIfNotExists(join4(routesDir, redirectFileName), content);
     }
   }
-  spinner.text = "Downloading fonts and images";
-  await Promise.all(assetsToDownload);
-  spinner.succeed("Build finished");
+  if (assetsToDownload.length > 0) {
+    const downloading = spinner2();
+    downloading.start("Downloading fonts and images");
+    await Promise.all(assetsToDownload);
+    downloading.stop("Downloaded fonts and images");
+  }
+  log2.step("Build finished");
 };
 
 // src/commands/build.ts
@@ -755,6 +944,7 @@ var buildOptions = (yargs) => yargs.option("assets", {
 }).option("template", {
   type: "array",
   string: true,
+  default: [],
   describe: `Template to use for the build [choices: ${PROJECT_TEMPALTES.join(
     ", "
   )}]`
@@ -764,9 +954,10 @@ var build = async (options) => {
     await access3(LOCAL_DATA_FILE);
   } catch (error) {
     if (error instanceof Error && "code" in error && error.code === "ENOENT") {
-      throw new Error(
+      log3.error(
         `You need to link a webstudio project before building it. Run \`webstudio link\` to link a project.`
       );
+      exit3(1);
     }
     throw error;
   }
@@ -776,110 +967,99 @@ var build = async (options) => {
 // src/commands/init-flow.ts
 import { chdir, cwd as cwd4 } from "node:process";
 import { join as join5 } from "node:path";
-import ora3 from "ora";
-
-// src/prompts.ts
-import prompts from "prompts";
-var prompt = (prompt2) => {
-  return prompts([
-    {
-      ...prompt2,
-      onState: (state) => {
-        if (state.aborted) {
-          process.nextTick(() => {
-            process.exit(0);
-          });
-        }
-      }
-    }
-  ]);
-};
-
-// src/commands/init-flow.ts
 import pc2 from "picocolors";
+import {
+  cancel as cancel2,
+  confirm,
+  isCancel as isCancel2,
+  log as log4,
+  select,
+  spinner as spinner3,
+  text as text2
+} from "@clack/prompts";
 import { $ } from "execa";
 import { titleCase } from "title-case";
+var exitIfCancelled = (value) => {
+  if (isCancel2(value)) {
+    cancel2("Project initialization is cancelled");
+    process.exit(0);
+  }
+  return value;
+};
 var initFlow = async (options) => {
   const isProjectConfigured = await isFileExists(".webstudio/config.json");
   let shouldInstallDeps = false;
   let folderName;
   let projectTemplate = void 0;
   if (isProjectConfigured === false) {
-    const { shouldCreateFolder } = await prompt({
-      type: "confirm",
-      name: "shouldCreateFolder",
-      message: "Would you like to create a project folder? (no to use current folder)",
-      initial: true
-    });
+    const shouldCreateFolder = exitIfCancelled(
+      await confirm({
+        message: "Would you like to create a project folder? (no to use current folder)",
+        initialValue: true
+      })
+    );
     if (shouldCreateFolder === true) {
-      folderName = (await prompt({
-        type: "text",
-        name: "folderName",
-        message: "Please enter a project name"
-      })).folderName;
-      if (folderName === void 0) {
-        throw new Error("Folder name is required");
-      }
-      await ensureFolderExists(join5(cwd4(), folderName));
+      folderName = exitIfCancelled(
+        await text2({
+          message: "Please enter a project name",
+          validate(value) {
+            if (value.length === 0) {
+              return "Folder name is required";
+            }
+          }
+        })
+      );
+      await createFolderIfNotExists(join5(cwd4(), folderName));
       chdir(join5(cwd4(), folderName));
     }
-    const { projectLink } = await prompt({
-      type: "text",
-      name: "projectLink",
-      message: "Please paste a link from the Share dialog in the builder"
-    });
-    if (projectLink === void 0) {
-      throw new Error(`Project Link is required`);
-    }
-    await link({ link: projectLink });
-    const { deployTarget } = await prompt({
-      type: "select",
-      name: "deployTarget",
-      message: "Where would you like to deploy your project?",
-      choices: PROJECT_TEMPALTES.map((template) => {
-        return {
-          title: titleCase(template),
-          value: template
-        };
+    const shareLink = exitIfCancelled(
+      await text2({
+        message: "Please paste a link from the Share Dialog in the builder",
+        validate: validateShareLink
       })
-    });
-    projectTemplate = deployTarget;
-    const { installDeps } = await prompt({
-      type: "confirm",
-      name: "installDeps",
-      message: "Would you like to install dependencies? (recommended)",
-      initial: true
-    });
-    shouldInstallDeps = installDeps;
+    );
+    await link({ link: shareLink });
+    projectTemplate = exitIfCancelled(
+      await select({
+        message: "Where would you like to deploy your project?",
+        options: PROJECT_TEMPALTES.map((template) => ({
+          value: template,
+          label: titleCase(template)
+        }))
+      })
+    );
+    shouldInstallDeps = exitIfCancelled(
+      await confirm({
+        message: "Would you like to install dependencies? (recommended)",
+        initialValue: true
+      })
+    );
   }
-  await sync({ buildId: void 0, origin: void 0, authToken: void 0 });
   if (projectTemplate === void 0) {
-    const { deployTarget } = await prompt({
-      type: "select",
-      name: "deployTarget",
-      message: "Where would you like to deploy your project?",
-      choices: PROJECT_TEMPALTES.map((template) => {
-        return {
-          title: titleCase(template),
-          value: template
-        };
+    projectTemplate = exitIfCancelled(
+      await select({
+        message: "Where would you like to deploy your project?",
+        options: PROJECT_TEMPALTES.map((template) => ({
+          value: template,
+          label: titleCase(template)
+        }))
       })
-    });
-    projectTemplate = deployTarget;
+    );
   }
+  await sync({ buildId: void 0, origin: void 0, authToken: void 0 });
   await build({
     ...options,
     ...projectTemplate && { template: [projectTemplate] }
   });
   if (shouldInstallDeps === true) {
-    const spinner = ora3().start();
-    spinner.text = "Installing dependencies";
+    const install = spinner3();
+    install.start("Installing dependencies");
     await $`npm install`;
-    spinner.succeed("Installed dependencies");
+    install.stop("Installed dependencies");
   }
-  console.info(pc2.bold(pc2.green(`
-Your project was successfully synced \u{1F389}`)));
-  console.info(
+  log4.message();
+  log4.message(pc2.green(pc2.bold(`Your project was successfully synced \u{1F389}`)));
+  log4.message(
     [
       "Now you can:",
       folderName && `Go to your project: ${pc2.dim(`cd ${folderName}`)}`,
@@ -912,7 +1092,7 @@ import makeCLI from "yargs";
 // package.json
 var package_default = {
   name: "webstudio",
-  version: "0.151.0",
+  version: "0.167.0",
   description: "Webstudio CLI",
   author: "Webstudio <github@webstudio.is>",
   homepage: "https://webstudio.is",
@@ -932,10 +1112,12 @@ var package_default = {
     checks: "pnpm typecheck",
     build: "rm -rf lib && esbuild src/cli.ts --outdir=lib --bundle --format=esm --packages=external",
     "local-run": "tsx --no-warnings ./src/bin.ts",
-    dev: "esbuild src/cli.ts --watch --bundle --format=esm --packages=external --outdir=./lib"
+    dev: "esbuild src/cli.ts --watch --bundle --format=esm --packages=external --outdir=./lib",
+    test: "NODE_OPTIONS=--experimental-vm-modules jest"
   },
   license: "AGPL-3.0-or-later",
   dependencies: {
+    "@clack/prompts": "^0.7.0",
     "@webstudio-is/http-client": "workspace:*",
     "@webstudio-is/image": "workspace:*",
     "@webstudio-is/react-sdk": "workspace:*",
@@ -943,39 +1125,39 @@ var package_default = {
     "@webstudio-is/sdk-components-react": "workspace:*",
     "@webstudio-is/sdk-components-react-radix": "workspace:*",
     "@webstudio-is/sdk-components-react-remix": "workspace:*",
+    "change-case": "^5.0.2",
     deepmerge: "^4.3.1",
     "env-paths": "^3.0.0",
     execa: "^7.2.0",
-    ora: "^7.0.1",
+    parse5: "7.1.2",
     "p-limit": "^4.0.0",
-    picocolors: "^1.0.0",
-    prompts: "^2.4.2",
+    picocolors: "^1.0.1",
     "strip-indent": "^4.0.0",
     "title-case": "^4.1.0",
     yargs: "^17.7.2",
     zod: "^3.22.4"
   },
   devDependencies: {
-    "@netlify/remix-adapter": "^2.3.1",
-    "@netlify/remix-edge-adapter": "3.2.2",
-    "@remix-run/cloudflare": "^2.9.1",
-    "@remix-run/cloudflare-pages": "^2.9.1",
-    "@remix-run/dev": "^2.9.1",
-    "@remix-run/node": "^2.9.1",
-    "@remix-run/react": "^2.9.1",
-    "@remix-run/server-runtime": "^2.9.1",
+    "@jest/globals": "^29.7.0",
+    "@netlify/remix-adapter": "^2.4.0",
+    "@netlify/remix-edge-adapter": "3.3.0",
+    "@remix-run/cloudflare": "^2.9.2",
+    "@remix-run/cloudflare-pages": "^2.9.2",
+    "@remix-run/dev": "^2.9.2",
+    "@remix-run/node": "^2.9.2",
+    "@remix-run/react": "^2.9.2",
+    "@remix-run/server-runtime": "^2.9.2",
     "@types/node": "^20.12.7",
-    "@types/prompts": "^2.4.5",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "@types/yargs": "^17.0.32",
     "@webstudio-is/form-handlers": "workspace:*",
+    "@webstudio-is/jest-config": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
     react: "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    tsx: "^4.7.2",
     typescript: "5.4.5",
-    vite: "^5.2.11",
+    vite: "^5.2.12",
     wrangler: "^3.48.0"
   }
 };
@@ -983,7 +1165,7 @@ var package_default = {
 // src/cli.ts
 var main = async () => {
   try {
-    await ensureFileInPath(GLOBAL_CONFIG_FILE, "{}");
+    await createFileIfNotExists(GLOBAL_CONFIG_FILE, "{}");
     const cmd = makeCLI(hideBin(argv)).strict().fail(function(msg, err, yargs) {
       if (err) {
         throw err;
@@ -1019,7 +1201,7 @@ var main = async () => {
     await cmd.parse();
   } catch (error) {
     console.error(error);
-    exit(1);
+    exit4(1);
   }
 };
 export {