@sudajs/cli 0.19.0 → 0.20.0

package/dist/index.js

@@ -6,7 +6,7 @@ import { createRequire } from 'module';
 import path2 from 'path';
 import { createInterface } from 'readline/promises';
 import { fileURLToPath, pathToFileURL } from 'url';
-import { themeDesignSystemSchema, createThemeDesignCssVariables, createThemeAgentManifest, createSudaPageAgentRuntime, checkThemeModule, formatThemeCheckResult, agentValidationResultSchema } from '@sudajs/theme-engine';
+import { themeDesignSystemSchema, createThemeDesignFontStylesheetUrl, findThemeDesignSystemFieldName, resolveThemeDesignTokens, createThemeDesignCssVariables, createThemeAgentManifest, createSudaPageAgentRuntime, checkThemeModule, formatThemeCheckResult, agentValidationResultSchema } from '@sudajs/theme-engine';
 import { themeManifestSchema, runWithThemePreviewLocale } from '@sudajs/theme-engine/server';
 import { Command } from 'commander';
 import { build } from 'esbuild';
@@ -902,10 +902,13 @@ export const {
   SUDA_COLOR_TOKEN_KEYS,
   createThemeDesignCssVariables,
   createThemeDesignDefault,
+  createThemeDesignFontStylesheetUrl,
   resolveThemeDesignTokens,
   SUDA_CUSTOM_DESIGN_PRESET_ID,
   SUDA_DESIGN_COLOR_KEYS,
   SUDA_DESIGN_RADIUS_KEYS,
+  SUDA_DESIGN_TYPOGRAPHY_KEYS,
+  SUDA_THEME_FONT_FAMILIES,
   compileSudaBlockSlots,
   isSudaLocalBlockComponent,
   SUDA_LOCAL_BLOCK_CATEGORY,
@@ -1746,6 +1749,7 @@ var __testUtils = {
   listProjectsOutputSchema,
   renderDevStarterPageHtml,
   renderDevEditorPageHtml,
+  readDevThemeLocaleMessages,
   writeVitePreviewEntries,
   resolveDevEditorSlug,
   resolveDevStarterSlug,
@@ -1879,20 +1883,23 @@ async function writeVitePreviewEntries(root) {
     path2.join(buildDir, "editor-client.ts"),
     [
       'import "@puckeditor/core/puck.css";',
-      'import { composeUnifiedThemeEditorData, createUnifiedThemeEditorConfig, installThemePreviewLocale, resolveAssetPath, ThemeEditor } from "@sudajs/theme-engine";',
+      'import { composeUnifiedThemeEditorData, createThemeDesignFontStylesheetUrl, createUnifiedThemeEditorConfig, installThemeLocale, installThemePreviewLocale, resolveAssetPath, resolveThemeDesignTokens, 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.themeLocaleMessages){installThemeLocale(payload.themeLocaleMessages)}",
       "if(payload.previewLocaleMessages){installThemePreviewLocale(payload.previewLocaleMessages)}",
+      'const runtime=(await import("./runtime.dev")).default;',
       '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});",
+      'function applyDesignFont(nextData){const fieldName=payload.designSystemFieldName||"designSystem";const value=nextData?.root?.props?.[fieldName];const tokens=resolveThemeDesignTokens(payload.designSystem,value);const href=createThemeDesignFontStylesheetUrl(tokens);let link=document.querySelector("#suda-theme-fonts");if(!href){link?.remove();return}if(!link){link=document.createElement("link");link.id="suda-theme-fonts";link.rel="stylesheet";document.head.append(link)}link.href=href}',
+      "applyDesignFont(data);",
       '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}));',
+      'createRoot(document.querySelector("#suda-theme-dev-editor-root")!).render(createElement(ThemeEditor,{config,data,editorContext,metadata,iframe:false,height:"100%",previewStylesheetUrls:["/src/styles.css"],publishActionVisible:false,onChange:applyDesignFont}));',
       ""
     ].join("\n"),
     "utf8"
@@ -2015,7 +2022,8 @@ function createSudaPreviewVitePlugin(root, options = {}) {
               renderer,
               localized.locale,
               url.searchParams,
-              localized.previewLocaleMessages
+              localized.previewLocaleMessages,
+              localized.themeLocaleMessages
             ) : renderDevStarterPageHtml(
               localized.theme,
               starter,
@@ -2049,8 +2057,9 @@ async function loadLocalizedViteDevTheme(root, server, explicitLang, acceptLangu
       localeParams.acceptLanguage = acceptLanguage;
     }
     const locale = resolveThemePreviewLocale(localeParams);
+    const themeLocaleMessages = await readDevThemeLocaleMessages(root, locale);
     if (!baseTheme.module.manifest.previewLocales) {
-      return { theme: baseTheme, locale };
+      return { theme: baseTheme, locale, themeLocaleMessages };
     }
     const previewLocaleMessages = await readDevPreviewLocaleMessages(root, locale);
     server.moduleGraph.invalidateAll();
@@ -2058,7 +2067,7 @@ async function loadLocalizedViteDevTheme(root, server, explicitLang, acceptLangu
       previewLocaleMessages,
       () => loadViteDevTheme(root, server)
     );
-    return { theme, locale, previewLocaleMessages };
+    return { theme, locale, themeLocaleMessages, previewLocaleMessages };
   });
 }
 var vitePreviewLocaleLoadTails = /* @__PURE__ */ new WeakMap();
@@ -2236,6 +2245,16 @@ async function readDevPreviewLocaleMessages(root, locale) {
   }
   return messages;
 }
+async function readDevThemeLocaleMessages(root, locale) {
+  const localesDir = path2.join(root, "src", "locales");
+  const localizedPath = path2.join(localesDir, `${locale}.json`);
+  const filePath = await pathExists(localizedPath) ? localizedPath : path2.join(localesDir, "en.json");
+  const messages = await readLocaleJson(filePath);
+  if (!isRecord(messages)) {
+    throw new Error(`Theme locale ${locale} must be a JSON object.`);
+  }
+  return messages;
+}
 function escapeHtml(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
@@ -2271,6 +2290,8 @@ async function loadThemeScopedRenderer(themeRoot) {
 }
 function renderDevStarterPageHtml(theme, page, renderer, locale = "en", preserveLang = false, previewLocaleMessages, searchParams = new URLSearchParams(), options = {}) {
   const layoutData = createDevPreviewLayout(theme, searchParams);
+  const designTokens = resolveDevDesignTokens(theme, layoutData);
+  const fontStylesheetUrl = createThemeDesignFontStylesheetUrl(designTokens);
   const chrome = renderer.extractLayoutChrome(layoutData);
   const metadata = {
     resolveAssetUrl: createPreviewAssetResolver(renderer.resolveAssetPath),
@@ -2310,6 +2331,7 @@ function renderDevStarterPageHtml(theme, page, renderer, locale = "en", preserve
     '<meta name="viewport" content="width=device-width, initial-scale=1" />',
     `<title>${escapeHtml(`${theme.module.manifest.name} \u2014 ${page.title}`)}</title>`,
     '<link rel="stylesheet" href="/src/styles.css" />',
+    ...fontStylesheetUrl ? [`<link id="suda-theme-fonts" rel="stylesheet" href="${escapeHtml(fontStylesheetUrl)}" />`] : [],
     customHead,
     designPalette?.style ?? "",
     "</head>",
@@ -2352,10 +2374,7 @@ function createDevPreviewLayout(theme, searchParams) {
   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];
+  const designFieldName = findThemeDesignSystemFieldName(theme.module.layoutConfig.root?.fields);
   if (!designFieldName) {
     return theme.module.defaultLayout;
   }
@@ -2369,8 +2388,16 @@ function createDevPreviewLayout(theme, searchParams) {
   };
   return layoutData;
 }
-function renderDevEditorPageHtml(theme, page, renderer, locale = "en", searchParams = new URLSearchParams(), previewLocaleMessages) {
+function resolveDevDesignTokens(theme, layoutData) {
+  const designFieldName = findThemeDesignSystemFieldName(theme.module.layoutConfig.root?.fields);
+  const rootProps = layoutData.root?.props;
+  const designValue = designFieldName ? rootProps?.[designFieldName] : void 0;
+  return resolveThemeDesignTokens(theme.module.manifest.designSystem, designValue);
+}
+function renderDevEditorPageHtml(theme, page, renderer, locale = "en", searchParams = new URLSearchParams(), previewLocaleMessages, themeLocaleMessages) {
   const layoutData = createDevPreviewLayout(theme, searchParams);
+  const designTokens = resolveDevDesignTokens(theme, layoutData);
+  const fontStylesheetUrl = createThemeDesignFontStylesheetUrl(designTokens);
   const chrome = renderer.extractLayoutChrome(layoutData);
   const cssVariables = { ...chrome.cssVariables };
   const cssVarStyle = Object.entries(cssVariables).map(([key, value]) => `${key}: ${value};`).join(" ");
@@ -2386,6 +2413,9 @@ function renderDevEditorPageHtml(theme, page, renderer, locale = "en", searchPar
     layoutData,
     contactForm: PREVIEW_CONTACT_FORM,
     previewLocaleMessages,
+    designSystem: theme.module.manifest.designSystem,
+    designSystemFieldName: findThemeDesignSystemFieldName(theme.module.layoutConfig.root?.fields) ?? "designSystem",
+    themeLocaleMessages,
     locale,
     currentPageId: page.slug,
     backHref: createDevPreviewHref(page, searchParams),
@@ -2399,6 +2429,7 @@ function renderDevEditorPageHtml(theme, page, renderer, locale = "en", searchPar
     '<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" />',
+    ...fontStylesheetUrl ? [`<link id="suda-theme-fonts" rel="stylesheet" href="${escapeHtml(fontStylesheetUrl)}" />`] : [],
     "<style>html,body,#suda-theme-dev-editor-root{height:100%;margin:0}body{overflow:hidden}</style>",
     "</head>",
     `<body${cssVarStyle ? ` style="${cssVarStyle}"` : ""}>`,
@@ -2413,10 +2444,14 @@ function serializeInlineScriptValue(value) {
   return JSON.stringify(value).replaceAll("<", "\\u003c").replaceAll("\u2028", "\\u2028").replaceAll("\u2029", "\\u2029");
 }
 function renderDevDesignPalette(designSystem, editorHref) {
-  const hasPresetSwitcher = designSystem.presets.length >= 2;
+  const primaryColors = new Set(
+    designSystem.presets.map((preset) => preset.tokens.colors.primary)
+  );
+  const hasPresetSwitcher = primaryColors.size >= 2;
   const presets = designSystem.presets.map((preset) => ({
     id: preset.id,
-    variables: createThemeDesignCssVariables(preset.tokens)
+    variables: createThemeDesignCssVariables(preset.tokens),
+    fontStylesheetUrl: createThemeDesignFontStylesheetUrl(preset.tokens)
   }));
   const selectedIcon = renderToStaticMarkup(
     createElement(CircleCheck, {
@@ -2448,7 +2483,7 @@ function renderDevDesignPalette(designSystem, editorHref) {
   });
   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#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["--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["--primary"])}palette.addEventListener("click",(event)=>{const button=event.target.closest("[data-suda-dev-preset]");if(button)apply(button.dataset.sudaDevPreset,true)})})();</script>` : "")
+    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)}let fontLink=document.querySelector("#suda-theme-fonts");if(preset.fontStylesheetUrl){if(!fontLink){fontLink=document.createElement("link");fontLink.id="suda-theme-fonts";fontLink.rel="stylesheet";document.head.append(fontLink)}fontLink.href=preset.fontStylesheetUrl}else fontLink?.remove();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["--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["--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"];