@sudajs/cli 0.18.9 → 0.18.11

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { ThemeModule, ThemeStarterPage } from '@sudajs/theme-engine';
-import { ThemeRender, extractLayoutChrome, resolveAssetPath } from '@sudajs/theme-engine/server';
+import { ThemeRender, extractLayoutChrome, resolveAssetPath, ThemePreviewLocaleMessages } from '@sudajs/theme-engine/server';
 import { Command } from 'commander';
 import { createElement } from 'react';
 import { renderToString } from 'react-dom/server';
@@ -1816,6 +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;
@@ -1831,7 +1834,9 @@ declare const __testUtils: {
     updateRemotePageDraft: typeof updateRemotePageDraft;
 };
 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;
@@ -1856,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): 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

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import { createHash } from 'crypto';
 import { existsSync } from 'fs';
-import fs, { readFile, writeFile, stat, readdir, mkdir, copyFile, rm } from 'fs/promises';
+import fs, { readFile, mkdir, writeFile, stat, readdir, copyFile, rm } from 'fs/promises';
 import { createRequire } from 'module';
 import path2 from 'path';
 import { createInterface } from 'readline/promises';
@@ -12,6 +12,9 @@ import { themeDesignSystemSchema, createThemeDesignCssVariables, createThemeAgen
 import { themeManifestSchema, runWithThemePreviewLocale } from '@sudajs/theme-engine/server';
 import { Command } from 'commander';
 import { build } from 'esbuild';
+import { CircleCheck, Pencil } from 'lucide-react';
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 import { z } from 'zod';
 import os from 'os';
 import pc from 'picocolors';
@@ -1520,26 +1523,7 @@ async function buildClientRuntime(root, minify) {
   await mkdir(path2.dirname(generatedEntry), { recursive: true });
   await writeFile(
     generatedEntry,
-    [
-      '"use client";',
-      'import type { ThemeClientHooks, ThemeClientRuntime, ThemeRenderModule } from "@sudajs/theme-engine/runtime";',
-      'import * as themeConfig from "../src/config.js";',
-      clientHooksImport,
-      "const theme: ThemeRenderModule = {",
-      "  pageConfig: themeConfig.pageConfig,",
-      "  layoutConfig: themeConfig.layoutConfig,",
-      "};",
-      'if ("rendering" in themeConfig && themeConfig.rendering !== undefined) {',
-      "  theme.rendering = themeConfig.rendering;",
-      "}",
-      "const hooks: ThemeClientHooks = clientHooks;",
-      "const runtime: ThemeClientRuntime = { theme };",
-      "if (hooks.initialize !== undefined) {",
-      "  runtime.initialize = hooks.initialize;",
-      "}",
-      "export default runtime;",
-      ""
-    ].join("\n"),
+    createClientRuntimeSource(clientHooksImport, true),
     "utf8"
   );
   await mkdir(path2.join(root, "dist"), { recursive: true });
@@ -1754,6 +1738,9 @@ var __testUtils = {
   performUpdateThemeSettings,
   getRemoteThemeSettings,
   renderDevStarterPageHtml,
+  renderDevEditorPageHtml,
+  writeVitePreviewEntries,
+  resolveDevEditorSlug,
   resolveDevStarterSlug,
   resolveScreenshotOptions,
   slugifyThemeName,
@@ -1825,13 +1812,17 @@ async function watchTheme(root, port) {
 async function startViteDevPreviewServer(root, port) {
   const viteConfig = await findViteConfig(root);
   const vite = await loadThemeVite(root);
+  await writeVitePreviewEntries(root);
   const host = "127.0.0.1";
   const server = await vite.createServer({
     root,
     configFile: viteConfig,
     configLoader: "runner",
-    cacheDir: path2.join(root, ".suda-build", "vite-cache"),
+    cacheDir: path2.join(root, ".suda-build", "node_modules", ".vite"),
     appType: "custom",
+    optimizeDeps: {
+      entries: [".suda-build/preview-client.ts", ".suda-build/editor-client.ts"]
+    },
     server: { host, port },
     plugins: [createSudaPreviewVitePlugin(root)]
   });
@@ -1843,6 +1834,77 @@ async function startViteDevPreviewServer(root, port) {
     close: () => server.close()
   };
 }
+async function writeVitePreviewEntries(root) {
+  const clientHooksPath = path2.join(root, "src", "client.ts");
+  const clientHooksImport = existsSync(clientHooksPath) ? 'import { clientHooks } from "../src/client.js";' : "const clientHooks = {};";
+  const buildDir = path2.join(root, ".suda-build");
+  await mkdir(buildDir, { recursive: true });
+  await writeFile(
+    path2.join(buildDir, "runtime.dev.ts"),
+    createClientRuntimeSource(clientHooksImport, false),
+    "utf8"
+  );
+  await writeFile(
+    path2.join(buildDir, "preview-client.ts"),
+    [
+      'import { hydrateThemePage, loadThemeRuntime } from "@sudajs/theme-engine/client";',
+      'import { installThemePreviewLocale, resolveAssetPath } from "@sudajs/theme-engine/site-runtime";',
+      'const payloadElement=document.querySelector("#suda-theme-hydration-data");',
+      'if(!payloadElement){throw new Error("Missing Suda theme hydration payload.")}',
+      "const payload=JSON.parse(payloadElement.textContent ?? '{}');",
+      "if(payload.previewLocaleMessages){installThemePreviewLocale(payload.previewLocaleMessages)}",
+      'const runtime=(await loadThemeRuntime("/.suda-build/runtime.dev.ts")).default;',
+      'const metadata={contactForm:payload.contactForm,resolveAssetUrl:(value: string | undefined)=>resolveAssetPath(value,{legacyResolve:(key)=>key.startsWith("themes/")?`/api/themes/${key.slice("themes/".length)}`:undefined})};',
+      'await hydrateThemePage({container:document.querySelector("[data-theme-hydration-root]")!,runtime,pageData:payload.pageData,layoutData:payload.layoutData,metadata,onRecoverableError:(error)=>console.error("[theme-dev] theme hydration recovered from an error",error)});',
+      ""
+    ].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 [
+    ...useClientDirective ? ['"use client";'] : [],
+    'import type { ThemeClientHooks, ThemeClientRuntime, ThemeRenderModule } from "@sudajs/theme-engine/runtime";',
+    'import * as themeConfig from "../src/config.js";',
+    clientHooksImport,
+    "const theme: ThemeRenderModule = {",
+    "  pageConfig: themeConfig.pageConfig,",
+    "  layoutConfig: themeConfig.layoutConfig,",
+    "};",
+    'if ("rendering" in themeConfig && themeConfig.rendering !== undefined) {',
+    "  theme.rendering = themeConfig.rendering;",
+    "}",
+    "const hooks: ThemeClientHooks = clientHooks;",
+    "const runtime: ThemeClientRuntime = { theme };",
+    "if (hooks.initialize !== undefined) {",
+    "  runtime.initialize = hooks.initialize;",
+    "}",
+    "export default runtime;",
+    ""
+  ].join("\n");
+}
 function createSudaPreviewVitePlugin(root) {
   return {
     name: "suda-theme-preview",
@@ -1856,65 +1918,51 @@ 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;
             const explicitLang = url.searchParams.get("lang");
-            const { theme, locale } = await loadLocalizedViteDevTheme(
+            const localized = await loadLocalizedViteDevTheme(
               root,
               server,
               explicitLang,
               acceptLanguage
             );
             const renderer = await loadThemeScopedRenderer(root);
-            if (slug === null) {
-              const homeSlug = pickStarterSlug(theme);
-              if (!homeSlug) {
-                response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
-                response.end("No starter pages declared by this theme.");
-                return;
-              }
-              const starter2 = findStarterPage(theme, homeSlug);
-              if (!starter2) {
-                response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
-                response.end(`Unknown starter page: ${homeSlug}`);
-                return;
-              }
-              const html2 = await server.transformIndexHtml(
-                url.pathname,
-                renderDevStarterPageHtml(
-                  theme,
-                  starter2,
-                  renderer,
-                  locale,
-                  canonicalLocale(explicitLang) !== null
-                )
-              );
-              response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
-              response.end(html2);
-              return;
-            }
-            const starter = findStarterPage(theme, slug);
+            const starterSlug = slug ?? pickStarterSlug(localized.theme);
+            const starter = starterSlug ? findStarterPage(localized.theme, starterSlug) : null;
             if (!starter) {
               response.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
-              response.end(`Unknown starter page: ${slug}`);
+              response.end(
+                starterSlug ? `Unknown starter page: ${starterSlug}` : "No starter pages declared by this theme."
+              );
               return;
             }
-            const html = await server.transformIndexHtml(
-              url.pathname,
-              renderDevStarterPageHtml(
-                theme,
-                starter,
-                renderer,
-                locale,
-                canonicalLocale(explicitLang) !== null
-              )
+            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) {
@@ -1940,13 +1988,13 @@ async function loadLocalizedViteDevTheme(root, server, explicitLang, acceptLangu
     if (!baseTheme.module.manifest.previewLocales) {
       return { theme: baseTheme, locale };
     }
-    const messages = await readDevPreviewLocaleMessages(root, locale);
+    const previewLocaleMessages = await readDevPreviewLocaleMessages(root, locale);
     server.moduleGraph.invalidateAll();
     const theme = await runWithThemePreviewLocale(
-      messages,
+      previewLocaleMessages,
       () => loadViteDevTheme(root, server)
     );
-    return { theme, locale };
+    return { theme, locale, previewLocaleMessages };
   });
 }
 var vitePreviewLocaleLoadTails = /* @__PURE__ */ new WeakMap();
@@ -1994,10 +2042,27 @@ 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;
   }
+  if (pathname.startsWith("/@")) {
+    return void 0;
+  }
   const normalized = pathname.replace(/^\/+/, "").replace(/\/+$/, "");
   if (!normalized || normalized.includes("/")) {
     return void 0;
@@ -2104,8 +2169,9 @@ async function loadThemeScopedRenderer(themeRoot) {
     renderToString: reactDomServerModule.renderToString
   };
 }
-function renderDevStarterPageHtml(theme, page, renderer, locale = "en", preserveLang = false) {
-  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
@@ -2114,14 +2180,27 @@ 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,
+    contactForm: PREVIEW_CONTACT_FORM,
+    previewLocaleMessages
+  });
+  const hydrationScript = [
+    `<script id="suda-theme-hydration-data" type="application/json">${hydrationPayload}</script>`,
+    '<script type="module">void import("/.suda-build/preview-client.ts").catch((error)=>console.error("[theme-dev] theme client failed to load",error))</script>'
+  ].join("");
   return [
     "<!doctype html>",
     `<html lang="${escapeHtml(locale)}">`,
@@ -2134,9 +2213,10 @@ function renderDevStarterPageHtml(theme, page, renderer, locale = "en", preserve
     customHead,
     "</head>",
     `<body${cssVarStyle ? ` style="${cssVarStyle}"` : ""}>`,
-    body,
+    `<div data-theme-hydration-root="" style="display:contents">${body}</div>`,
     designPalette.html,
     customBody,
+    hydrationScript,
     ...preserveLang ? [
       '<script>for(const a of document.querySelectorAll("a[href]")){try{const u=new URL(a.href,location.href);if(u.origin===location.origin){u.searchParams.set("lang",new URL(location.href).searchParams.get("lang"));a.href=u.pathname+u.search+u.hash}}catch{}}</script>'
     ] : [],
@@ -2144,31 +2224,130 @@ 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)
   }));
-  const buttons = designSystem.presets.map(
+  const selectedIcon = renderToStaticMarkup(
+    createElement(CircleCheck, {
+      className: "suda-dev-preset-selected-icon",
+      width: 32,
+      height: 32,
+      "aria-hidden": true,
+      focusable: false
+    })
+  );
+  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></button>`
-  ).join("");
+    )}"></span>${selectedIcon}</button>`
+  ).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 button[aria-pressed="true"]::after{position:absolute;display:grid;width:32px;height:32px;color:var(--suda-dev-preset-primary);font:700 22px/1 ui-sans-serif,system-ui,sans-serif;content:"\u2713";place-items:center}\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{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"];