@sudajs/cli 0.18.10 → 0.18.11

package/dist/index.d.ts

@@ -1816,7 +1816,9 @@ declare const __testUtils: {
     performUpdateThemeSettings: typeof performUpdateThemeSettings;
     getRemoteThemeSettings: typeof getRemoteThemeSettings;
     renderDevStarterPageHtml: typeof renderDevStarterPageHtml;
+    renderDevEditorPageHtml: typeof renderDevEditorPageHtml;
     writeVitePreviewEntries: typeof writeVitePreviewEntries;
+    resolveDevEditorSlug: typeof resolveDevEditorSlug;
     resolveDevStarterSlug: typeof resolveDevStarterSlug;
     resolveScreenshotOptions: typeof resolveScreenshotOptions;
     slugifyThemeName: typeof slugifyThemeName;
@@ -1834,6 +1836,7 @@ declare const __testUtils: {
 declare function watchTheme(root: string, port: number): Promise<void>;
 declare function writeVitePreviewEntries(root: string): Promise<void>;
 declare function withSerializedVitePreviewLocaleLoad<Result>(server: object, load: () => Promise<Result>): Promise<Result>;
+declare function resolveDevEditorSlug(pathname: string): string | null | undefined;
 declare function resolveDevStarterSlug(pathname: string): string | null | undefined;
 declare function resolveThemePreviewLocale(params: {
     previewLocales: string[] | undefined;
@@ -1858,7 +1861,8 @@ interface ThemeRenderer {
     renderToString: typeof renderToString;
 }
 declare function loadThemeScopedRenderer(themeRoot: string): Promise<ThemeRenderer>;
-declare function renderDevStarterPageHtml(theme: ValidatedTheme, page: ThemeStarterPage, renderer: ThemeRenderer, locale?: string, preserveLang?: boolean, previewLocaleMessages?: ThemePreviewLocaleMessages): string;
+declare function renderDevStarterPageHtml(theme: ValidatedTheme, page: ThemeStarterPage, renderer: ThemeRenderer, locale?: string, preserveLang?: boolean, previewLocaleMessages?: ThemePreviewLocaleMessages, searchParams?: URLSearchParams): string;
+declare function renderDevEditorPageHtml(theme: ValidatedTheme, page: ThemeStarterPage, renderer: ThemeRenderer, locale?: string, searchParams?: URLSearchParams, previewLocaleMessages?: ThemePreviewLocaleMessages): string;
 interface ScreenshotOptions extends ThemeRootOptions {
     device?: string[] | string;
     output?: string;

package/dist/index.js

@@ -12,7 +12,7 @@ import { themeDesignSystemSchema, createThemeDesignCssVariables, createThemeAgen
 import { themeManifestSchema, runWithThemePreviewLocale } from '@sudajs/theme-engine/server';
 import { Command } from 'commander';
 import { build } from 'esbuild';
-import { CircleCheck } from 'lucide-react';
+import { CircleCheck, Pencil } from 'lucide-react';
 import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { z } from 'zod';
@@ -1738,7 +1738,9 @@ var __testUtils = {
   performUpdateThemeSettings,
   getRemoteThemeSettings,
   renderDevStarterPageHtml,
+  renderDevEditorPageHtml,
   writeVitePreviewEntries,
+  resolveDevEditorSlug,
   resolveDevStarterSlug,
   resolveScreenshotOptions,
   slugifyThemeName,
@@ -1819,7 +1821,7 @@ async function startViteDevPreviewServer(root, port) {
     cacheDir: path2.join(root, ".suda-build", "node_modules", ".vite"),
     appType: "custom",
     optimizeDeps: {
-      entries: [".suda-build/preview-client.ts"]
+      entries: [".suda-build/preview-client.ts", ".suda-build/editor-client.ts"]
     },
     server: { host, port },
     plugins: [createSudaPreviewVitePlugin(root)]
@@ -1858,6 +1860,28 @@ async function writeVitePreviewEntries(root) {
     ].join("\n"),
     "utf8"
   );
+  await writeFile(
+    path2.join(buildDir, "editor-client.ts"),
+    [
+      'import "@puckeditor/core/puck.css";',
+      'import { composeUnifiedThemeEditorData, createUnifiedThemeEditorConfig, installThemePreviewLocale, resolveAssetPath, ThemeEditor } from "@sudajs/theme-engine";',
+      'import { createElement } from "react";',
+      'import { createRoot } from "react-dom/client";',
+      'import runtime from "./runtime.dev";',
+      'const payloadElement=document.querySelector("#suda-theme-editor-data");',
+      'if(!payloadElement){throw new Error("Missing Suda theme editor payload.")}',
+      "const payload=JSON.parse(payloadElement.textContent ?? '{}');",
+      "if(payload.previewLocaleMessages){installThemePreviewLocale(payload.previewLocaleMessages)}",
+      'const resolveAssetUrl=(value: string | undefined)=>resolveAssetPath(value,{legacyResolve:(key)=>key.startsWith("themes/")?`/api/themes/${key.slice("themes/".length)}`:undefined});',
+      'const config=createUnifiedThemeEditorConfig(runtime.theme,undefined,{labels:{pageContent:"Page content",themeSettings:"Theme settings"}});',
+      "const data=composeUnifiedThemeEditorData(payload.layoutData,payload.pageData,{layoutConfig:runtime.theme.layoutConfig,pageConfig:runtime.theme.pageConfig});",
+      'const editorContext={assets:[],resolveAssetUrl,currentPageId:payload.currentPageId,backHref:payload.backHref,editorPages:payload.editorPages,editorLocale:payload.locale,chromeMessages:{backToPages:"Back to preview",pageMenuLabel:"Switch starter page",themeSettings:"Theme settings",outline:"Outline",blocks:"Blocks",switchViewport:"Switch viewport"}};',
+      "const metadata={contactForm:payload.contactForm,isEditor:true,resolveAssetUrl};",
+      'createRoot(document.querySelector("#suda-theme-dev-editor-root")!).render(createElement(ThemeEditor,{config,data,editorContext,metadata,iframe:false,height:"100%",publishActionVisible:false}));',
+      ""
+    ].join("\n"),
+    "utf8"
+  );
 }
 function createClientRuntimeSource(clientHooksImport, useClientDirective) {
   return [
@@ -1894,11 +1918,14 @@ function createSudaPreviewVitePlugin(root) {
             next();
             return;
           }
-          const slug = resolveDevStarterSlug(url.pathname);
-          if (slug === void 0) {
+          const editorSlug = resolveDevEditorSlug(url.pathname);
+          const previewSlug = resolveDevStarterSlug(url.pathname);
+          if (editorSlug === void 0 && previewSlug === void 0) {
             next();
             return;
           }
+          const isEditor = editorSlug !== void 0;
+          const slug = isEditor ? editorSlug : previewSlug;
           try {
             const acceptLanguageHeader = request.headers["accept-language"];
             const acceptLanguage = Array.isArray(acceptLanguageHeader) ? acceptLanguageHeader.join(",") : acceptLanguageHeader;
@@ -1919,17 +1946,23 @@ function createSudaPreviewVitePlugin(root) {
               );
               return;
             }
-            const html = await server.transformIndexHtml(
-              url.pathname,
-              renderDevStarterPageHtml(
-                localized.theme,
-                starter,
-                renderer,
-                localized.locale,
-                canonicalLocale(explicitLang) !== null,
-                localized.previewLocaleMessages
-              )
+            const htmlSource = isEditor ? renderDevEditorPageHtml(
+              localized.theme,
+              starter,
+              renderer,
+              localized.locale,
+              url.searchParams,
+              localized.previewLocaleMessages
+            ) : renderDevStarterPageHtml(
+              localized.theme,
+              starter,
+              renderer,
+              localized.locale,
+              canonicalLocale(explicitLang) !== null,
+              localized.previewLocaleMessages,
+              url.searchParams
             );
+            const html = await server.transformIndexHtml(url.pathname, htmlSource);
             response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
             response.end(html);
           } catch (error2) {
@@ -2009,6 +2042,20 @@ function pickStarterSlug(theme) {
 function findStarterPage(theme, slug) {
   return theme.module.starterPages.find((page) => page.slug === slug) ?? null;
 }
+var DEV_EDITOR_PATH = "/__suda/editor";
+function resolveDevEditorSlug(pathname) {
+  if (pathname === DEV_EDITOR_PATH || pathname === `${DEV_EDITOR_PATH}/`) {
+    return null;
+  }
+  if (!pathname.startsWith(`${DEV_EDITOR_PATH}/`)) {
+    return void 0;
+  }
+  const normalized = pathname.slice(DEV_EDITOR_PATH.length + 1).replace(/\/+$/, "");
+  if (!normalized || normalized.includes("/")) {
+    return void 0;
+  }
+  return decodeURIComponent(normalized);
+}
 function resolveDevStarterSlug(pathname) {
   if (pathname === "/") {
     return null;
@@ -2122,8 +2169,9 @@ async function loadThemeScopedRenderer(themeRoot) {
     renderToString: reactDomServerModule.renderToString
   };
 }
-function renderDevStarterPageHtml(theme, page, renderer, locale = "en", preserveLang = false, previewLocaleMessages) {
-  const chrome = renderer.extractLayoutChrome(theme.module.defaultLayout);
+function renderDevStarterPageHtml(theme, page, renderer, locale = "en", preserveLang = false, previewLocaleMessages, searchParams = new URLSearchParams()) {
+  const layoutData = createDevPreviewLayout(theme, searchParams);
+  const chrome = renderer.extractLayoutChrome(layoutData);
   const metadata = {
     resolveAssetUrl: createPreviewAssetResolver(renderer.resolveAssetPath),
     contactForm: PREVIEW_CONTACT_FORM
@@ -2132,17 +2180,20 @@ function renderDevStarterPageHtml(theme, page, renderer, locale = "en", preserve
     renderer.createElement(renderer.ThemeRender, {
       theme: theme.module,
       pageData: page.data,
-      layoutData: theme.module.defaultLayout,
+      layoutData,
       metadata
     })
   );
   const cssVarStyle = Object.entries(chrome.cssVariables).map(([key, value]) => `${key}: ${value};`).join(" ");
   const customHead = chrome.customHeadCode ?? "";
   const customBody = chrome.customBodyCode ?? "";
-  const designPalette = renderDevDesignPalette(theme.module.manifest.designSystem);
+  const designPalette = renderDevDesignPalette(
+    theme.module.manifest.designSystem,
+    createDevEditorHref(page.slug, searchParams)
+  );
   const hydrationPayload = serializeInlineScriptValue({
     pageData: page.data,
-    layoutData: theme.module.defaultLayout,
+    layoutData,
     contactForm: PREVIEW_CONTACT_FORM,
     previewLocaleMessages
   });
@@ -2173,13 +2224,95 @@ function renderDevStarterPageHtml(theme, page, renderer, locale = "en", preserve
     "</html>"
   ].join("");
 }
+function copyDevPreviewSearchParams(searchParams) {
+  const copied = new URLSearchParams();
+  for (const key of ["lang", "designPreset"]) {
+    const value = searchParams.get(key);
+    if (value) {
+      copied.set(key, value);
+    }
+  }
+  return copied;
+}
+function createDevEditorHref(slug, searchParams) {
+  const query = copyDevPreviewSearchParams(searchParams).toString();
+  return `${DEV_EDITOR_PATH}/${encodeURIComponent(slug)}${query ? `?${query}` : ""}`;
+}
+function createDevPreviewHref(page, searchParams) {
+  const pathname = page.isHome ? "/" : `/${encodeURIComponent(page.slug)}`;
+  const query = copyDevPreviewSearchParams(searchParams).toString();
+  return `${pathname}${query ? `?${query}` : ""}`;
+}
+function createDevPreviewLayout(theme, searchParams) {
+  const requestedPresetId = searchParams.get("designPreset");
+  const requestedPreset = requestedPresetId ? theme.module.manifest.designSystem.presets.find(
+    (preset) => preset.id === requestedPresetId
+  ) : void 0;
+  if (!requestedPreset) {
+    return theme.module.defaultLayout;
+  }
+  const rootFields = theme.module.layoutConfig.root?.fields ?? {};
+  const designFieldName = Object.entries(rootFields).find(
+    ([, field]) => field.metadata?.sudaField === "designSystem"
+  )?.[0];
+  if (!designFieldName) {
+    return theme.module.defaultLayout;
+  }
+  const layoutData = structuredClone(theme.module.defaultLayout);
+  layoutData.root = {
+    ...layoutData.root ?? {},
+    props: {
+      ...layoutData.root?.props ?? {},
+      [designFieldName]: { presetId: requestedPreset.id }
+    }
+  };
+  return layoutData;
+}
+function renderDevEditorPageHtml(theme, page, renderer, locale = "en", searchParams = new URLSearchParams(), previewLocaleMessages) {
+  const layoutData = createDevPreviewLayout(theme, searchParams);
+  const chrome = renderer.extractLayoutChrome(layoutData);
+  const cssVariables = { ...chrome.cssVariables };
+  const cssVarStyle = Object.entries(cssVariables).map(([key, value]) => `${key}: ${value};`).join(" ");
+  const editorPages = theme.module.starterPages.map((starterPage) => ({
+    id: starterPage.slug,
+    handle: starterPage.slug,
+    label: starterPage.title,
+    group: starterPage.isHome ? "home" : "static",
+    editorHref: createDevEditorHref(starterPage.slug, searchParams)
+  }));
+  const payload = serializeInlineScriptValue({
+    pageData: page.data,
+    layoutData,
+    contactForm: PREVIEW_CONTACT_FORM,
+    previewLocaleMessages,
+    locale,
+    currentPageId: page.slug,
+    backHref: createDevPreviewHref(page, searchParams),
+    editorPages
+  });
+  return [
+    "<!doctype html>",
+    `<html lang="${escapeHtml(locale)}">`,
+    "<head>",
+    '<meta charset="utf-8" />',
+    '<meta name="viewport" content="width=device-width, initial-scale=1" />',
+    `<title>${escapeHtml(`Edit ${theme.module.manifest.name} \u2014 ${page.title}`)}</title>`,
+    '<link rel="stylesheet" href="/src/styles.css" />',
+    "<style>html,body,#suda-theme-dev-editor-root{height:100%;margin:0}body{overflow:hidden}</style>",
+    "</head>",
+    `<body${cssVarStyle ? ` style="${cssVarStyle}"` : ""}>`,
+    '<div id="suda-theme-dev-editor-root"></div>',
+    `<script id="suda-theme-editor-data" type="application/json">${payload}</script>`,
+    '<script type="module">void import("/.suda-build/editor-client.ts").catch((error)=>console.error("[theme-dev] theme editor failed to load",error))</script>',
+    "</body>",
+    "</html>"
+  ].join("");
+}
 function serializeInlineScriptValue(value) {
   return JSON.stringify(value).replaceAll("<", "\\u003c").replaceAll("\u2028", "\\u2028").replaceAll("\u2029", "\\u2029");
 }
-function renderDevDesignPalette(designSystem) {
-  if (designSystem.presets.length < 2) {
-    return { style: "", html: "" };
-  }
+function renderDevDesignPalette(designSystem, editorHref) {
+  const hasPresetSwitcher = designSystem.presets.length >= 2;
   const presets = designSystem.presets.map((preset) => ({
     id: preset.id,
     variables: createThemeDesignCssVariables(preset.tokens)
@@ -2193,20 +2326,28 @@ function renderDevDesignPalette(designSystem) {
       focusable: false
     })
   );
-  const buttons = designSystem.presets.map(
+  const editIcon = renderToStaticMarkup(
+    createElement(Pencil, {
+      width: 20,
+      height: 20,
+      "aria-hidden": true,
+      focusable: false
+    })
+  );
+  const buttons = hasPresetSwitcher ? designSystem.presets.map(
     (preset) => `<button type="button" data-suda-dev-preset="${escapeHtml(preset.id)}" title="${escapeHtml(
       preset.description ? `${preset.label} \u2014 ${preset.description}` : preset.label
     )}" aria-label="${escapeHtml(preset.label)}"><span style="background:${escapeHtml(
       preset.tokens.colors.primary
     )}"></span>${selectedIcon}</button>`
-  ).join("");
+  ).join("") : "";
   const config = serializeInlineScriptValue({
     defaultPresetId: designSystem.defaultPresetId,
     presets
   });
   return {
-    style: '<style data-suda-dev-palette-style>\n#suda-dev-palette{all:initial;position:fixed;z-index:2147483000;top:50%;right:16px;width:64px;max-height:calc(100svh - 32px);padding:8px 9px;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;background:#fff;border:1px solid #d1d5db;border-radius:999px;box-shadow:0 8px 24px rgb(15 23 42 / 12%);transform:translateY(-50%);color-scheme:light;scrollbar-width:none;-ms-overflow-style:none}\n#suda-dev-palette::-webkit-scrollbar{display:none}\n#suda-dev-palette button{all:initial;position:relative;display:grid;width:44px;height:44px;box-sizing:border-box;cursor:pointer;border-radius:999px;place-items:center}\n#suda-dev-palette button span{display:block;width:32px;height:32px;border-radius:999px;transition:transform 120ms ease}\n#suda-dev-palette button:hover span{transform:scale(1.08)}\n#suda-dev-palette button[aria-pressed="true"] span{visibility:hidden}\n#suda-dev-palette .suda-dev-preset-selected-icon{position:absolute;display:block;width:32px;height:32px;color:var(--suda-dev-preset-primary);visibility:hidden;opacity:0;transform:scale(.85);transition:opacity 120ms ease,transform 120ms ease}\n#suda-dev-palette button[aria-pressed="true"] .suda-dev-preset-selected-icon{visibility:visible;opacity:1;transform:scale(1)}\n#suda-dev-palette button:focus-visible{outline:2px solid #94a3b8;outline-offset:2px}\n@media(max-width:640px){#suda-dev-palette{right:8px;max-height:calc(100svh - 16px)}}\n@media(prefers-reduced-motion:reduce){#suda-dev-palette button span,#suda-dev-palette .suda-dev-preset-selected-icon{transition:none}}\n</style>',
-    html: `<aside id="suda-dev-palette" aria-label="Design presets">${buttons}</aside><script data-suda-dev-palette-script>(function(){const config=${config};const palette=document.getElementById("suda-dev-palette");if(!palette)return;const byId=new Map(config.presets.map((preset)=>[preset.id,preset]));const params=new URL(location.href).searchParams;const requested=params.get("designPreset");const selected=byId.has(requested)?requested:config.defaultPresetId;function apply(id,updateUrl){const preset=byId.get(id);if(!preset)return;const properties=Object.keys(preset.variables);const targets=[document.documentElement,document.body,...document.querySelectorAll("[style]")].filter((element,index,items)=>items.indexOf(element)===index&&(element===document.documentElement||element===document.body||properties.some((property)=>element.style.getPropertyValue(property)!=="")));for(const target of targets){for(const [property,value] of Object.entries(preset.variables))target.style.setProperty(property,value)}for(const button of palette.querySelectorAll("[data-suda-dev-preset]")){const active=button.dataset.sudaDevPreset===id;button.setAttribute("aria-pressed",String(active));button.style.setProperty("--suda-dev-preset-primary",byId.get(button.dataset.sudaDevPreset).variables["--suda-color-primary"])}if(updateUrl){const url=new URL(location.href);url.searchParams.set("designPreset",id);history.replaceState(history.state,"",url)}}if(requested&&byId.has(requested))apply(selected,false);else for(const button of palette.querySelectorAll("[data-suda-dev-preset]")){button.setAttribute("aria-pressed",String(button.dataset.sudaDevPreset===selected));button.style.setProperty("--suda-dev-preset-primary",byId.get(button.dataset.sudaDevPreset).variables["--suda-color-primary"])}palette.addEventListener("click",(event)=>{const button=event.target.closest("[data-suda-dev-preset]");if(button)apply(button.dataset.sudaDevPreset,true)})})();</script>`
+    style: '<style data-suda-dev-palette-style>\n#suda-dev-palette{all:initial;position:fixed;z-index:2147483000;top:50%;right:16px;width:64px;max-height:calc(100svh - 32px);padding:8px 9px;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;background:#fff;border:1px solid #d1d5db;border-radius:999px;box-shadow:0 8px 24px rgb(15 23 42 / 12%);transform:translateY(-50%);color-scheme:light;scrollbar-width:none;-ms-overflow-style:none}\n#suda-dev-palette::-webkit-scrollbar{display:none}\n#suda-dev-palette button{all:initial;position:relative;display:grid;width:44px;height:44px;box-sizing:border-box;cursor:pointer;border-radius:999px;place-items:center}\n#suda-dev-palette button span{display:block;width:32px;height:32px;border-radius:999px;transition:transform 120ms ease}\n#suda-dev-palette button:hover span{transform:scale(1.08)}\n#suda-dev-palette button[aria-pressed="true"] span{visibility:hidden}\n#suda-dev-palette .suda-dev-preset-selected-icon{position:absolute;display:block;width:32px;height:32px;color:var(--suda-dev-preset-primary);visibility:hidden;opacity:0;transform:scale(.85);transition:opacity 120ms ease,transform 120ms ease}\n#suda-dev-palette button[aria-pressed="true"] .suda-dev-preset-selected-icon{visibility:visible;opacity:1;transform:scale(1)}\n#suda-dev-palette button:focus-visible{outline:2px solid #94a3b8;outline-offset:2px}\n#suda-dev-palette .suda-dev-edit-divider{display:block;width:28px;height:1px;margin:4px auto;background:#e2e8f0}\n#suda-dev-palette .suda-dev-edit-link{all:initial;display:grid;width:44px;height:44px;box-sizing:border-box;color:#334155;cursor:pointer;border-radius:999px;place-items:center;transition:background-color 120ms ease,color 120ms ease}\n#suda-dev-palette .suda-dev-edit-link:hover{color:#0f172a;background:#f1f5f9}\n#suda-dev-palette .suda-dev-edit-link:focus-visible{outline:2px solid #94a3b8;outline-offset:2px}\n@media(max-width:640px){#suda-dev-palette{right:8px;max-height:calc(100svh - 16px)}}\n@media(prefers-reduced-motion:reduce){#suda-dev-palette button span,#suda-dev-palette .suda-dev-preset-selected-icon,#suda-dev-palette .suda-dev-edit-link{transition:none}}\n</style>',
+    html: `<aside id="suda-dev-palette" aria-label="Theme development tools">${buttons}${hasPresetSwitcher ? '<span class="suda-dev-edit-divider" aria-hidden="true"></span>' : ""}<a class="suda-dev-edit-link" data-suda-dev-editor-link="" href="${escapeHtml(editorHref)}" title="Edit starter page" aria-label="Edit starter page">${editIcon}</a></aside>` + (hasPresetSwitcher ? `<script data-suda-dev-palette-script>(function(){const config=${config};const palette=document.getElementById("suda-dev-palette");if(!palette)return;const byId=new Map(config.presets.map((preset)=>[preset.id,preset]));const params=new URL(location.href).searchParams;const requested=params.get("designPreset");const selected=byId.has(requested)?requested:config.defaultPresetId;function apply(id,updateUrl){const preset=byId.get(id);if(!preset)return;const properties=Object.keys(preset.variables);const targets=[document.documentElement,document.body,...document.querySelectorAll("[style]")].filter((element,index,items)=>items.indexOf(element)===index&&(element===document.documentElement||element===document.body||properties.some((property)=>element.style.getPropertyValue(property)!=="")));for(const target of targets){for(const [property,value] of Object.entries(preset.variables))target.style.setProperty(property,value)}for(const button of palette.querySelectorAll("[data-suda-dev-preset]")){const active=button.dataset.sudaDevPreset===id;button.setAttribute("aria-pressed",String(active));button.style.setProperty("--suda-dev-preset-primary",byId.get(button.dataset.sudaDevPreset).variables["--suda-color-primary"])}const editorLink=palette.querySelector("[data-suda-dev-editor-link]");if(editorLink){const editorUrl=new URL(editorLink.href,location.href);editorUrl.searchParams.set("designPreset",id);editorLink.href=editorUrl.pathname+editorUrl.search+editorUrl.hash}if(updateUrl){const url=new URL(location.href);url.searchParams.set("designPreset",id);history.replaceState(history.state,"",url)}}if(requested&&byId.has(requested))apply(selected,false);else for(const button of palette.querySelectorAll("[data-suda-dev-preset]")){button.setAttribute("aria-pressed",String(button.dataset.sudaDevPreset===selected));button.style.setProperty("--suda-dev-preset-primary",byId.get(button.dataset.sudaDevPreset).variables["--suda-color-primary"])}palette.addEventListener("click",(event)=>{const button=event.target.closest("[data-suda-dev-preset]");if(button)apply(button.dataset.sudaDevPreset,true)})})();</script>` : "")
   };
 }
 var SCREENSHOT_DEVICES = ["desktop", "tablet", "mobile"];