@sudajs/cli 0.18.3 → 0.18.5

package/dist/index.d.ts

@@ -1800,6 +1800,7 @@ declare function fetchJson<T>(url: string, options?: RequestInit & {
     token?: string;
 }): Promise<T>;
 declare function validateThemeTailwindContract(root: string): Promise<void>;
+declare function validateThemeCssTokenContract(root: string): Promise<void>;
 declare function validateTheme(root: string): Promise<ValidatedTheme>;
 declare function validateThemeLocales(root: string): Promise<void>;
 declare function validateThemePreviewLocales(root: string, previewLocales: string[] | undefined): Promise<void>;
@@ -1827,6 +1828,7 @@ declare const __testUtils: {
     slugifyThemeName: typeof slugifyThemeName;
     validateThemeKey: typeof validateThemeKey;
     validateThemeName: typeof validateThemeName;
+    validateThemeCssTokenContract: typeof validateThemeCssTokenContract;
     validateThemeTailwindContract: typeof validateThemeTailwindContract;
     validateThemeLocales: typeof validateThemeLocales;
     validateThemePreviewLocales: typeof validateThemePreviewLocales;

package/dist/index.js

@@ -8,7 +8,7 @@ import { createInterface } from 'readline/promises';
 import { fileURLToPath, pathToFileURL } from 'url';
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
-import { themeDesignSystemSchema, createThemeAgentManifest, createSudaPageAgentRuntime, checkThemeModule, formatThemeCheckResult, agentValidationResultSchema, agentPageSchemaOutputSchema, agentComponentOutputSchema } from '@sudajs/theme-engine';
+import { themeDesignSystemSchema, createThemeDesignCssVariables, createThemeAgentManifest, createSudaPageAgentRuntime, checkThemeModule, formatThemeCheckResult, agentValidationResultSchema, agentPageSchemaOutputSchema, agentComponentOutputSchema } from '@sudajs/theme-engine';
 import { themeManifestSchema, runWithThemePreviewLocale } from '@sudajs/theme-engine/server';
 import { Command } from 'commander';
 import { build } from 'esbuild';
@@ -1123,6 +1123,108 @@ async function validateThemeTailwindContract(root) {
   if (!styles.includes('@import "tailwindcss";') && !styles.includes("@import 'tailwindcss';")) {
     throw new Error('src/styles.css must include `@import "tailwindcss";`.');
   }
+  await validateThemeCssTokenContract(root);
+}
+async function collectThemeSourceCssFiles(directory) {
+  const entries = await readdir(directory, { withFileTypes: true });
+  const files = [];
+  for (const entry of entries) {
+    const absolutePath = path2.join(directory, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...await collectThemeSourceCssFiles(absolutePath));
+    } else if (entry.isFile() && entry.name.endsWith(".css")) {
+      files.push(absolutePath);
+    }
+  }
+  return files;
+}
+function findThemeInlineBlocks(styles, filePath) {
+  const blocks = [];
+  const pattern = /@theme\s+inline\s*\{/g;
+  for (const match of styles.matchAll(pattern)) {
+    const start = match.index;
+    let depth = 1;
+    let cursor = start + match[0].length;
+    while (cursor < styles.length && depth > 0) {
+      if (styles[cursor] === "{") depth += 1;
+      if (styles[cursor] === "}") depth -= 1;
+      cursor += 1;
+    }
+    if (depth !== 0) {
+      throw new Error(`${filePath} contains an unclosed \`@theme inline\` block.`);
+    }
+    blocks.push({
+      body: styles.slice(start + match[0].length, cursor - 1),
+      end: cursor,
+      start
+    });
+  }
+  return blocks;
+}
+async function validateThemeCssTokenContract(root) {
+  const sourceRoot = path2.join(root, "src");
+  const files = await collectThemeSourceCssFiles(sourceRoot);
+  const sources = await Promise.all(
+    files.map(async (filePath) => {
+      const styles = await readFile(filePath, "utf8");
+      return { blocks: findThemeInlineBlocks(styles, filePath), filePath, styles };
+    })
+  );
+  const declarations = /* @__PURE__ */ new Map();
+  for (const source of sources) {
+    for (const block of source.blocks) {
+      for (const match of block.body.matchAll(/(--[a-zA-Z0-9_-]+)\s*:\s*([^;]+);/g)) {
+        const name = match[1];
+        const value = match[2];
+        if (name !== void 0 && value !== void 0) {
+          declarations.set(name, value);
+        }
+      }
+    }
+  }
+  const sudaAliases = /* @__PURE__ */ new Set();
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (const [name, value] of declarations) {
+      const dependsOnSuda = /var\(\s*--suda-/.test(value);
+      const dependsOnAlias = [...sudaAliases].some(
+        (alias) => new RegExp(`var\\(\\s*${escapeRegExp(alias)}(?:\\s*[,\\)])`).test(value)
+      );
+      if ((dependsOnSuda || dependsOnAlias) && !sudaAliases.has(name)) {
+        sudaAliases.add(name);
+        changed = true;
+      }
+    }
+  }
+  const issues = [];
+  for (const source of sources) {
+    const handwrittenStyles = source.styles.split("");
+    for (const block of source.blocks) {
+      for (let index = block.start; index < block.end; index += 1) {
+        if (handwrittenStyles[index] !== "\n") {
+          handwrittenStyles[index] = " ";
+        }
+      }
+    }
+    const searchable = handwrittenStyles.join("");
+    for (const alias of sudaAliases) {
+      const reference = new RegExp(`var\\(\\s*${escapeRegExp(alias)}(?:\\s*[,\\)])`, "g");
+      for (const match of searchable.matchAll(reference)) {
+        const line = searchable.slice(0, match.index ?? 0).split("\n").length;
+        issues.push(`${path2.relative(root, source.filePath)}:${line} uses ${alias}`);
+      }
+    }
+  }
+  if (issues.length > 0) {
+    throw new Error(
+      [
+        "Hand-written theme CSS must not consume Suda-backed Tailwind aliases from `@theme inline`.",
+        ...issues.map((issue) => `  - ${issue}`),
+        "Use `var(--suda-*)` directly, or define and consume a theme-prefixed variable on the theme root. Tailwind utilities such as `bg-primary` remain supported."
+      ].join("\n")
+    );
+  }
 }
 async function validateTheme(root) {
   const packageJsonPath = path2.join(root, "package.json");
@@ -1657,6 +1759,7 @@ var __testUtils = {
   slugifyThemeName,
   validateThemeKey,
   validateThemeName,
+  validateThemeCssTokenContract,
   validateThemeTailwindContract,
   validateThemeLocales,
   validateThemePreviewLocales,
@@ -2018,6 +2121,7 @@ function renderDevStarterPageHtml(theme, page, renderer, locale = "en", preserve
   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);
   return [
     "<!doctype html>",
     `<html lang="${escapeHtml(locale)}">`,
@@ -2026,10 +2130,12 @@ 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" />',
+    designPalette.style,
     customHead,
     "</head>",
     `<body${cssVarStyle ? ` style="${cssVarStyle}"` : ""}>`,
     body,
+    designPalette.html,
     customBody,
     ...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>'
@@ -2038,6 +2144,33 @@ function renderDevStarterPageHtml(theme, page, renderer, locale = "en", preserve
     "</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: "" };
+  }
+  const presets = designSystem.presets.map((preset) => ({
+    id: preset.id,
+    variables: createThemeDesignCssVariables(preset.tokens)
+  }));
+  const buttons = 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("");
+  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>`
+  };
+}
 var SCREENSHOT_DEVICES = ["desktop", "tablet", "mobile"];
 var SCREENSHOT_DEVICE_CONFIG = {
   desktop: {